From bd97f3093edb9c0a0f5f6c8f93ecd5ba8ec84314 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sun, 2 Jun 2024 10:25:21 +0200
Subject: [PATCH] changed unique name to id

---
 src/App.css |  2 +-
 src/App.js  | 56 +++++++++++++++++++++++++++++++++--------------------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/App.css b/src/App.css
index 260ca13..a0cc4f2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -53,7 +53,7 @@
 .show-more-button {
   background-color: #af9363;
   color: #fff;
-  border-radius: 40px;
+  border-radius: 6px;
   padding: 14px 24.5px;
   border: none;
   cursor: pointer;
diff --git a/src/App.js b/src/App.js
index 12b5fff..d888c49 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import { DislikeFilled, LikeFilled, RightOutlined } from "@ant-design/icons";
 import "./App.css";
-import { Badge, Flex, Skeleton } from "antd";
+import { Badge, Flex, Result, Skeleton } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 
@@ -41,16 +41,16 @@ function UseVoteLocalStorage() {
     localStorage.setItem("shx-product-pipeline-votes", JSON.stringify(votes));
   };
 
-  const vote = (name, up) => {
+  const vote = (id, up) => {
     const newVotes = [...storageVotes];
 
-    const existingVoteIndex = newVotes.findIndex((vote) => vote.n === name);
+    const existingVoteIndex = newVotes.findIndex((vote) => vote.id === id);
 
     if (existingVoteIndex !== -1) {
       newVotes[existingVoteIndex].t = up === true ? 1 : 0;
     } else {
       newVotes.push({
-        n: name,
+        id: id,
         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"}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      name: name,
+      id: id,
     }),
   }).catch(() => {});
 }
@@ -161,7 +161,7 @@ function App() {
           // remove votes for products which no longer in future products
           setVotes(
             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">
-            {products.NewProducts.length > 0 ? (
+            {products.NewProducts === null ? (
+              <Result status={404} title="Aktuell nichts neues :(" />
+            ) : products.NewProducts.length > 0 ? (
               <>
                 {products.NewProducts.map(
                   (product, index) =>
@@ -231,7 +233,13 @@ function App() {
 
         <div className="cards-container" style={{ paddingBottom: 40 }}>
           <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(
                   (product, index) =>
@@ -275,13 +283,19 @@ function App() {
 
         <div className="cards-container">
           <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(
                   (product, index) =>
                     (showMore.futureProducts || index < 5) && (
                       <motion.div
-                        key={product.Name}
+                        key={product.Id}
                         layout
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
@@ -300,7 +314,7 @@ function App() {
                                   color:
                                     votes.findIndex(
                                       (vote) =>
-                                        vote.n === product.Name && vote.t === 0
+                                        vote.id === product.Id && vote.t === 0
                                     ) > -1
                                       ? "#e74c3c"
                                       : "#34495e",
@@ -309,17 +323,17 @@ function App() {
                                   if (
                                     votes.findIndex(
                                       (vote) =>
-                                        vote.n === product.Name && vote.t === 0
+                                        vote.id === product.Id && vote.t === 0
                                     ) === -1
                                   ) {
-                                    VoteRequest(product.Name, false);
-                                    vote(product.Name, false);
+                                    VoteRequest(product.Id, false);
+                                    vote(product.Id, false);
 
                                     // simulate vote before request is made
                                     setProducts((products) => {
                                       const newArr =
                                         products.FutureProducts.map((p) =>
-                                          p.Name === product.Name
+                                          p.Id === product.Id
                                             ? { ...p, Votes: p.Votes - 1 }
                                             : p
                                         );
@@ -338,7 +352,7 @@ function App() {
                                   color:
                                     votes.findIndex(
                                       (vote) =>
-                                        vote.n === product.Name && vote.t === 1
+                                        vote.id === product.Id && vote.t === 1
                                     ) > -1
                                       ? "#27ae60"
                                       : "#34495e",
@@ -347,17 +361,17 @@ function App() {
                                   if (
                                     votes.findIndex(
                                       (vote) =>
-                                        vote.n === product.Name && vote.t === 1
+                                        vote.id === product.Id && vote.t === 1
                                     ) === -1
                                   ) {
-                                    VoteRequest(product.Name, true);
-                                    vote(product.Name, true);
+                                    VoteRequest(product.Id, true);
+                                    vote(product.Id, true);
 
                                     // simulate vote before request is made
                                     setProducts((products) => {
                                       const newArr =
                                         products.FutureProducts.map((p) =>
-                                          p.Name === product.Name
+                                          p.Id === product.Id
                                             ? { ...p, Votes: p.Votes + 1 }
                                             : p
                                         );