Shinnex
/
shx-product-pipeline-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed unique name to id

main
alex 2024-06-02 10:25:21 +02:00
parent 98a4ab8456
commit bd97f3093e
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -53,7 +53,7 @@
.show-more-button { .show-more-button {
background-color: #af9363; background-color: #af9363;
color: #fff; color: #fff;
border-radius: 40px; border-radius: 6px;
padding: 14px 24.5px; padding: 14px 24.5px;
border: none; border: none;
cursor: pointer; cursor: pointer;

56
src/App.js
View File

@ -1,6 +1,6 @@
import { DislikeFilled, LikeFilled, RightOutlined } from "@ant-design/icons"; import { DislikeFilled, LikeFilled, RightOutlined } from "@ant-design/icons";
import "./App.css"; import "./App.css";
import { Badge, Flex, Skeleton } from "antd"; import { Badge, Flex, Result, Skeleton } from "antd";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@ -41,16 +41,16 @@ function UseVoteLocalStorage() {
localStorage.setItem("shx-product-pipeline-votes", JSON.stringify(votes)); localStorage.setItem("shx-product-pipeline-votes", JSON.stringify(votes));
}; };
const vote = (name, up) => { const vote = (id, up) => {
const newVotes = [...storageVotes]; const newVotes = [...storageVotes];
const existingVoteIndex = newVotes.findIndex((vote) => vote.n === name); const existingVoteIndex = newVotes.findIndex((vote) => vote.id === id);
if (existingVoteIndex !== -1) { if (existingVoteIndex !== -1) {
newVotes[existingVoteIndex].t = up === true ? 1 : 0; newVotes[existingVoteIndex].t = up === true ? 1 : 0;
} else { } else {
newVotes.push({ newVotes.push({
n: name, id: id,
t: up === true ? 1 : 0, t: up === true ? 1 : 0,
}); });
} }
@ -113,14 +113,14 @@ function Card({
); );
} }
function VoteRequest(name, up) { function VoteRequest(id, up) {
fetch(`${process.env.REACT_APP_API_URL}/vote?t=${up === true ? "u" : "d"}`, { fetch(`${process.env.REACT_APP_API_URL}/vote?t=${up === true ? "u" : "d"}`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
name: name, id: id,
}), }),
}).catch(() => {}); }).catch(() => {});
} }
@ -161,7 +161,7 @@ function App() {
// remove votes for products which no longer in future products // remove votes for products which no longer in future products
setVotes( setVotes(
votesRef.current.filter((v) => votesRef.current.filter((v) =>
data.FutureProducts.some((item) => item.Name === v.n) data.FutureProducts.some((item) => item.id === v.id)
) )
); );
}) })
@ -190,7 +190,9 @@ function App() {
<div className="cards-container" style={{ paddingBottom: 40 }}> <div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards"> <div className="cards">
{products.NewProducts.length > 0 ? ( {products.NewProducts === null ? (
<Result status={404} title="Aktuell nichts neues :(" />
) : products.NewProducts.length > 0 ? (
<> <>
{products.NewProducts.map( {products.NewProducts.map(
(product, index) => (product, index) =>
@ -231,7 +233,13 @@ function App() {
<div className="cards-container" style={{ paddingBottom: 40 }}> <div className="cards-container" style={{ paddingBottom: 40 }}>
<div className="cards"> <div className="cards">
{products.InWorkProducts.length > 0 ? ( {products.InWorkProducts === null ? (
<Result
status={404}
title="Aktuell nichts in Arbeit"
subTitle="Wird Zeit etwas zu ändern. Jetzt Produktwunsch äußern!"
/>
) : products.InWorkProducts.length > 0 ? (
<> <>
{products.InWorkProducts.map( {products.InWorkProducts.map(
(product, index) => (product, index) =>
@ -275,13 +283,19 @@ function App() {
<div className="cards-container"> <div className="cards-container">
<div className="cards" style={{ paddingBottom: 20 }}> <div className="cards" style={{ paddingBottom: 20 }}>
{products.FutureProducts.length > 0 ? ( {products.FutureProducts === null ? (
<Result
status={404}
title="Aktuell liegen keine Produktwünsche vor"
subTitle="Jetzt Produktwunsch äußern!"
/>
) : products.FutureProducts.length > 0 ? (
<> <>
{products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map( {products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map(
(product, index) => (product, index) =>
(showMore.futureProducts || index < 5) && ( (showMore.futureProducts || index < 5) && (
<motion.div <motion.div
key={product.Name} key={product.Id}
layout layout
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
@ -300,7 +314,7 @@ function App() {
color: color:
votes.findIndex( votes.findIndex(
(vote) => (vote) =>
vote.n === product.Name && vote.t === 0 vote.id === product.Id && vote.t === 0
) > -1 ) > -1
? "#e74c3c" ? "#e74c3c"
: "#34495e", : "#34495e",
@ -309,17 +323,17 @@ function App() {
if ( if (
votes.findIndex( votes.findIndex(
(vote) => (vote) =>
vote.n === product.Name && vote.t === 0 vote.id === product.Id && vote.t === 0
) === -1 ) === -1
) { ) {
VoteRequest(product.Name, false); VoteRequest(product.Id, false);
vote(product.Name, false); vote(product.Id, false);
// simulate vote before request is made // simulate vote before request is made
setProducts((products) => { setProducts((products) => {
const newArr = const newArr =
products.FutureProducts.map((p) => products.FutureProducts.map((p) =>
p.Name === product.Name p.Id === product.Id
? { ...p, Votes: p.Votes - 1 } ? { ...p, Votes: p.Votes - 1 }
: p : p
); );
@ -338,7 +352,7 @@ function App() {
color: color:
votes.findIndex( votes.findIndex(
(vote) => (vote) =>
vote.n === product.Name && vote.t === 1 vote.id === product.Id && vote.t === 1
) > -1 ) > -1
? "#27ae60" ? "#27ae60"
: "#34495e", : "#34495e",
@ -347,17 +361,17 @@ function App() {
if ( if (
votes.findIndex( votes.findIndex(
(vote) => (vote) =>
vote.n === product.Name && vote.t === 1 vote.id === product.Id && vote.t === 1
) === -1 ) === -1
) { ) {
VoteRequest(product.Name, true); VoteRequest(product.Id, true);
vote(product.Name, true); vote(product.Id, true);
// simulate vote before request is made // simulate vote before request is made
setProducts((products) => { setProducts((products) => {
const newArr = const newArr =
products.FutureProducts.map((p) => products.FutureProducts.map((p) =>
p.Name === product.Name p.Id === product.Id
? { ...p, Votes: p.Votes + 1 } ? { ...p, Votes: p.Votes + 1 }
: p : p
); );