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() {
- {products.NewProducts.length > 0 ? (
+ {products.NewProducts === null ? (
+
+ ) : products.NewProducts.length > 0 ? (
<>
{products.NewProducts.map(
(product, index) =>
@@ -231,7 +233,13 @@ function App() {
- {products.InWorkProducts.length > 0 ? (
+ {products.InWorkProducts === null ? (
+
+ ) : products.InWorkProducts.length > 0 ? (
<>
{products.InWorkProducts.map(
(product, index) =>
@@ -275,13 +283,19 @@ function App() {
- {products.FutureProducts.length > 0 ? (
+ {products.FutureProducts === null ? (
+
+ ) : products.FutureProducts.length > 0 ? (
<>
{products.FutureProducts.sort((a, b) => b.Votes - a.Votes).map(
(product, index) =>
(showMore.futureProducts || index < 5) && (
- 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
);