Fix profile when user has avatar

code4romania · Nov 22, 2023 · e21e38c · e21e38c · vercel · Nov 22, 2023
1 parent 984718c
commit e21e38c
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 34 deletions.
diff --git a/client/src/components/Avatar/index.tsx b/client/src/components/Avatar/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+const Avatar = ({
+  src,
+  alt,
+  size = "8",
+}: {
+  src: string;
+  alt: string;
+  size?: string | number;
+}) => {
+  return src ? (
+    <img className={`h-${size} w-${size} rounded-full`} src={src} alt={alt} />
+  ) : (
+    <div
+      className={`h-${size} w-${size} overflow-hidden rounded-full bg-gray-100`}
+    >
+      <svg
+        className="h-full w-full text-gray-300"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+    </div>
+  );
+};
+
+export default Avatar;
diff --git a/client/src/components/Form/Avatar.tsx b/client/src/components/Form/Avatar.tsx
diff --git a/client/src/components/Navbar/index.tsx b/client/src/components/Navbar/index.tsx
@@ -132,7 +132,7 @@ const Menu = () => {
   return (
     <ul className="items-center hidden text-sm gap-x-3 lg:flex lg:flex-wrap">
       {menu.map((menuItem) => (
-        <li>
+        <li key={menuItem.link}>
           <NavLink
             target={
               menuItem.link.startsWith("https://crestem.ong")

diff --git a/client/src/components/Table/index.tsx b/client/src/components/Table/index.tsx
@@ -52,11 +52,14 @@ const Table = ({ title, description, button, head, body }: TableProps) => {
                 </thead>
               )}
               <tbody className="bg-white">
-                {body.map((row) => (
-                  <tr key={row[0]} className="even:bg-gray-50">
-                    {row.map((cell) => (
+                {body.map((row, index) => (
+                  <tr
+                    key={typeof row[0] === "string" ? row[0] : index}
+                    className="even:bg-gray-50"
+                  >
+                    {row.map((cell, index) => (
                       <td
-                        key={cell}
+                        key={typeof cell === "string" ? cell : `${index}`}
                         className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
                       >
                         {cell}

diff --git a/client/src/components/UserMenu/index.tsx b/client/src/components/UserMenu/index.tsx
@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from "@/redux/store";
 import { logout } from "@/redux/features/userSlice";
 import { Link } from "react-router-dom";
 import Cookies from "js-cookie";
+import Avatar from "@/components/Avatar";
 
 const classNames = (...classes: string[]) => {
   return classes.filter(Boolean).join(" ");
@@ -56,30 +57,12 @@ const UserMenu = () => {
     <Menu as="div" className="relative ml-3">
       <div className="flex space-x-4">
         <span>{user.ongName}</span>
-        <Menu.Button className="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+        <Menu.Button className="flex rounded-full bg-gray-800 text-sm">
           <span className="sr-only">Open user menu</span>
-          {user?.avatar ? (
-            <img
-              className="h-8 w-8 rounded-full"
-              src={user?.avatar?.url}
-              alt="avatar"
-            />
-          ) : (
-            <div className="relative h-8 w-8 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
-              <svg
-                className="absolute w-6 h-6 text-gray-400 left-1 top-1"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                  clip-rule="evenodd"
-                ></path>
-              </svg>
-            </div>
-          )}
+          <Avatar
+            src={user.avatar?.url}
+            alt={user.ongName || user.firstName || "FDSC"}
+          />
         </Menu.Button>
       </div>
       <Transition

diff --git a/client/src/pages/Profile/index.tsx b/client/src/pages/Profile/index.tsx
@@ -4,13 +4,16 @@ import Section from "@/components/Section";
 import Heading from "@/components/Heading";
 import Table from "@/components/Table";
 import Button from "@/components/Button";
+import Avatar from "@/components/Avatar";
+import { Link } from "react-router-dom";
 
 const Profile = () => {
   const user = useAppSelector((state) => state.userState.user);
   if (!user) {
     return <></>;
   }
 
+  // @ts-ignore
   return (
     <>
       <Section>
@@ -31,21 +34,27 @@ const Profile = () => {
               "Domenii de activitate",
               user.domains?.map((domain) => domain.name)?.join(", "),
             ],
-            ["Cuvinte cheie despre activitate", user.ongName],
-            ["Descriere organizație", user.ongName],
-            ["Website organizație", user.website],
+            user.keywords && ["Cuvinte cheie despre activitate", user.keywords],
+            user.description && ["Descriere organizație", user.description],
+            user.website && [
+              "Website organizație",
+              <Link to={user.website}>{user.website}</Link>,
+            ],
             [
               "Link-uri social media",
               `${user.accountFacebook || ""} ${user.accountInstagram || ""} ${
                 user.accountLinkedin || ""
               } ${user.accountTiktok || ""} ${user.accountTwitter || ""}`,
             ],
-            ["Logo organizație", user.avatar],
+            [
+              "Logo organizație",
+              <Avatar src={user.avatar?.url} alt={user.ongName} />,
+            ],
             ["Nume reprezentant organizație", user.contactFirstName],
             ["Prenume reprezentant organizație", user.contactFirstName],
             ["Email reprezentant organizație", user.contactEmail],
             ["Telefon reprezentant organizație", user.contactPhone],
-          ]}
+          ].filter(Boolean)}
         />
       </Section>
     </>

diff --git a/client/src/redux/api/types.ts b/client/src/redux/api/types.ts
@@ -27,6 +27,7 @@ export interface Quiz {
 }
 
 export interface User {
+  avatar: any;
   id: number;
   createdAt: string;
   userActivities?: Activity[];
@@ -57,7 +58,6 @@ export interface User {
   accountInstagram?: string;
   accountLinkedin?: string;
 
-
   //   Mentor
   firstName: string;
   lastName: string;