From a72fef25514005035bb7453db6764520181e68f8 Mon Sep 17 00:00:00 2001
From: Andreas Thomas <dev@chronark.com>
Date: Tue, 13 Dec 2022 09:05:26 +0100
Subject: [PATCH] feat: down vote button and styling fixs

* added down vote button
* onVote function changed to handle up and down vote
* fixed in dark mode the text color of the theme switcher options
* added mounted check to header component to prevent state update on unmounted component
---
 components/card-active.tsx | 65 ++++++++++++++++++++++++--------------
 components/footer.tsx      |  2 +-
 components/header.tsx      |  6 ++++
 pages/api/remove.ts        |  2 --
 pages/api/vote.ts          | 24 ++++++++++++--
 store/index.tsx            | 18 ++++++++---
 styles/globals.css         |  4 +++
 7 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/components/card-active.tsx b/components/card-active.tsx
index f80482b..c1bf3d1 100644
--- a/components/card-active.tsx
+++ b/components/card-active.tsx
@@ -1,6 +1,6 @@
 import { DateTime } from 'luxon'
 import { useContext } from 'react'
-import GlobalStoreContext, { Feature } from '@/store/index'
+import GlobalStoreContext, { Feature, VoteType } from '@/store/index'
 import { useSession } from 'next-auth/react'
 
 export default function CardActive({ item }: { item: Feature }) {
@@ -12,29 +12,48 @@ export default function CardActive({ item }: { item: Feature }) {
   const isAdmin = session?.user['role'] === 'admin'
 
   return (
-    <article className="flex items-center space-x-4">
-      <button
-        className="
-        flex flex-col items-center border border-zinc-300 py-1 w-10 rounded
-        hover:bg-zinc-100
-        dark:border-zinc-700 dark:hover:bg-zinc-700"
-        onClick={() => onVote(item)}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+    <article className="p-2 flex items-center space-x-4 border border-zinc-200 dark:border-zinc-700 rounded-md">
+      <div className="flex flex-col gap-1">
+        <button
+          className="flex flex-col items-center border border-zinc-300 py-1 px-2 rounded hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-700"
+          onClick={() => onVote(item, VoteType.UP)}
         >
-          <polyline points="18 15 12 9 6 15" />
-        </svg>
-        <span className="-mt-1 font-bold text-sm">{score}</span>
-      </button>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="18 15 12 9 6 15" />
+          </svg>
+        </button>
+
+        <div className="text-center">{score}</div>
+
+        <button
+          className="flex flex-col items-center border border-zinc-300 py-1 px-2 rounded hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-700"
+          onClick={() => onVote(item, VoteType.DOWN)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      </div>
 
       <div>
         <h3 className="text-lg font-bold">{title}</h3>
diff --git a/components/footer.tsx b/components/footer.tsx
index fed73ca..7cf90e8 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -21,7 +21,7 @@ export default function Footer() {
 
       <div className="mt-6">
         <select
-          className="form-select py-2 text-sm capitalize leading-none"
+          className="form-select py-2 text-sm capitalize"
           value={theme}
           onChange={(e) => setTheme(e.target.value)}
         >
diff --git a/components/header.tsx b/components/header.tsx
index 29650dd..b4730e1 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,8 +1,14 @@
+import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
 
 export default function Header() {
+  const [mounted, setMounted] = useState<boolean>(false)
   const { resolvedTheme } = useTheme()
 
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return null
+
   return (
     <header className="pt-20 mb-12">
       <div className="flex justify-center">
diff --git a/pages/api/remove.ts b/pages/api/remove.ts
index d3a8f3d..4ad2e3f 100644
--- a/pages/api/remove.ts
+++ b/pages/api/remove.ts
@@ -18,8 +18,6 @@ export default async (req, res) => {
     const { title, createdAt, user, status } = req.body
     const FEATURE = JSON.stringify({ title, createdAt, user, status })
 
-    console.log({ all: await redis.zrange(databaseName, 0, -1), FEATURE })
-
     const isRemove = await redis.zrem(databaseName, FEATURE)
 
     if (!isRemove) {
diff --git a/pages/api/vote.ts b/pages/api/vote.ts
index bbb87fe..2d297c9 100644
--- a/pages/api/vote.ts
+++ b/pages/api/vote.ts
@@ -1,8 +1,26 @@
 import redis, { databaseName } from '@/lib/redis'
+import { VoteType } from '@/store/index'
 import { unstable_getServerSession } from 'next-auth/next'
 import { authOptions } from './auth/[...nextauth]'
 import { NextAuthOptions } from 'next-auth'
 
+function defineScore(voteType: VoteType) {
+  let score: number = 0
+
+  switch (voteType) {
+    case VoteType.UP:
+      score = 1
+      break
+    case VoteType.DOWN:
+      score = -1
+      break
+    default:
+      throw new Error('Invalid vote type')
+  }
+
+  return score
+}
+
 export default async (req, res) => {
   const session = (await unstable_getServerSession(
     req,
@@ -11,7 +29,7 @@ export default async (req, res) => {
   )) as any
 
   try {
-    const { title, createdAt, user, status } = req.body
+    const { title, createdAt, user, status, voteType } = req.body
 
     const FEATURE = JSON.stringify({ title, createdAt, user, status })
 
@@ -19,7 +37,9 @@ export default async (req, res) => {
 
     if (!hasUser) throw new Error('You have already voted')
 
-    const data = await redis.zincrby(databaseName, 1, FEATURE)
+    const score = defineScore(voteType)
+
+    const data = await redis.zincrby(databaseName, score, FEATURE)
 
     res.status(200).json(data)
   } catch (error) {
diff --git a/store/index.tsx b/store/index.tsx
index 97d99e6..aa4312b 100644
--- a/store/index.tsx
+++ b/store/index.tsx
@@ -7,6 +7,11 @@ export enum FeatureStatus {
   Released = 'released'
 }
 
+export enum VoteType {
+  UP = 'up',
+  DOWN = 'down'
+}
+
 export type Feature = {
   createdAt: number
   score: number
@@ -20,14 +25,14 @@ export interface IGlobalStore {
   loadingData: boolean
   onPublish: (item: Feature) => void
   onRemove: (item: Feature) => void
-  onVote: (item: Feature) => void
+  onVote: (item: Feature, voteType: VoteType) => void
   onCreate: (title: string, callback?: () => void) => void
 }
 
 const GlobalStoreContext = createContext<IGlobalStore>(null)
 
 export function GlobalStoreProvider({ children }) {
-  const { data, isValidating, mutate, error, } = useSWR<Feature[]>('api/list', {
+  const { data, isValidating, mutate, error } = useSWR<Feature[]>('api/list', {
     fallbackData: []
   })
 
@@ -73,13 +78,18 @@ export function GlobalStoreProvider({ children }) {
       })
   }
 
-  const onVote = async (item) => {
+  const onVote = async (item, voteType: VoteType) => {
+    const reqBody = {
+      ...item,
+      voteType
+    }
+
     fetch('api/vote', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(item)
+      body: JSON.stringify(reqBody)
     })
       .then((response) => response.json())
       .then((data) => {
diff --git a/styles/globals.css b/styles/globals.css
index cbc8c39..6cfbd85 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,6 +14,10 @@
     dark:border-zinc-600;
   }
 
+  .form-select option {
+    @apply bg-white dark:bg-zinc-800;
+  }
+
   .form-input {
     @apply block w-full bg-transparent border-zinc-300 rounded shadow-sm
     dark:bg-zinc-800 dark:border-zinc-600;