added card icons and username to template

Alforoan · Jul 6, 2024 · 7f0d61f · 7f0d61f
1 parent f2ba9e6
commit 7f0d61f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -21,10 +21,11 @@
     "axios": "^1.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.23.1",
-    "recharts": "^2.12.7",
     "react-toastify": "^10.0.5",
+    "recharts": "^2.12.7",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

diff --git a/client/src/components/BoardComponent.tsx b/client/src/components/BoardComponent.tsx
@@ -10,6 +10,7 @@ import CardDetails from "./CardDetails";
 import ProgressBar from "./ProgressBar";
 import { useBoard } from "../context/BoardContext";
 import { useTemplates } from "../context/TemplateContext";
+import { MdOutlineTimer, MdOutlineCheckBox } from "react-icons/md";
 
 const BoardComponent: React.FC = () => {
   const [estimatedTimeTotal, setEstimatedTimeTotal] = useState(0);
@@ -238,12 +239,13 @@ const BoardComponent: React.FC = () => {
                                           className="bg-white p-2 mb-2 rounded shadow"
                                           onClick={() => setSelectedCard(card)}
                                         >
-                                          <h3 className="font-semibold">
+                                          <h3 className="font-semibold text-left">
                                             {card.cardName}
                                           </h3>
                                           {card.details.timeEstimate &&
                                           card.details.timeEstimate > 0 ? (
-                                            <p>
+                                            <p className="flex items-center">
+                                              <MdOutlineTimer aria-hidden="true" className="mr-1"/>
                                               {card.details.timeEstimate}{" "}
                                               minutes
                                             </p>
@@ -253,7 +255,8 @@ const BoardComponent: React.FC = () => {
                                           {card.details.checklist &&
                                             card.details.checklist.length >
                                               0 && (
-                                              <p>
+                                              <p className="flex items-center">
+                                                <MdOutlineCheckBox aria-hidden="true" className="mr-1"/>
                                                 {
                                                   card.details.checklist.filter(
                                                     (item) => item.checked

diff --git a/client/src/components/TemplatePreview.tsx b/client/src/components/TemplatePreview.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Template } from "../types";
 import { useTemplates } from "../context/TemplateContext";
 import { useBoard } from "../context/BoardContext";
+import { MdOutlineTimer } from "react-icons/md";
+import { PiDownloadSimple, PiCards, PiUploadSimple } from "react-icons/pi";
 
 interface TemplatePreviewProps {
   template: Template;
@@ -36,10 +38,10 @@ const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template }) => {
         {template.name}
       </h1>
 
-      <p>Total cards: {template.cards!.length - 1}</p>
-      <p># Downloads: {template.downloads}</p>
-      <p>Length: {getTotalLength()} Minutes</p>
-      <p>Author: {template.author}</p>
+      <p className="flex items-center">{<PiCards aria-hidden="true"  className="mr-1"/>}Total cards: {template.cards!.length - 1}</p>
+      <p className="flex items-center">{<PiDownloadSimple aria-hidden="true"  className="mr-1"/>}Downloads: {template.downloads}</p>
+      <p className="flex items-center">{<MdOutlineTimer aria-hidden="true"  className="mr-1"/>}Length: {getTotalLength()} Minutes</p>
+      <p className="flex items-center">{<PiUploadSimple aria-hidden="true"  className="mr-1"/>}Author: {template.author}</p>
     </div>
   );
 };

diff --git a/client/src/hooks/usePostNewTemplate.tsx b/client/src/hooks/usePostNewTemplate.tsx
@@ -8,8 +8,8 @@ const usePostNewTemplate = () => {
   const [error, setError] = useState<Error | null>(null);
   const { user } = useAuth0();
 
-  const email: string = user?.email ?? "anonymous@somethingwentwronghere.com";
-  // const username: string = email.split("@")[0]; // would like to use this instead of email
+  const username: string = user?.given_name ?? user?.nickname ?? "anonymous";
+  // const username: string = email.split("@")[0];
 
   const postNewTemplate = async (template: Board) => {
     setIsLoading(true);
@@ -19,7 +19,7 @@ const usePostNewTemplate = () => {
         `${import.meta.env.VITE_BACKEND_URL}/api/templates`,
         {
           name: template.name,
-          author: email,
+          author: username,
           uuid: template.uuid,
           downloads: 0,
           uploaded_at: new Date(),