changed unique name to id
parent
98a4ab8456
commit
bd97f3093e
|
|
@ -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;
|
||||
|
|
|
|||
56
src/App.js
56
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
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue