Merge pull request #22 from Abh1noob/master

hh

devsoc24-portal-fe/src/app/page.tsx

@@ -9,6 +9,7 @@ import TeamCard from "@/components/teamCard";
 import axios, { type AxiosResponse } from "axios";
 import {
   useIdeaStore,
+  useLeaderStore,
   useTeamDataStore,
   useTeamStore,
   useUserStore,
@@ -58,7 +59,7 @@ export default function HomePage() {
   const { user, setUser } = useUserStore();
   const [getIdea, SetIdea] = useState("");
   const { teamData, setTeamData } = useTeamDataStore();
-  const [isLeader, setIsLeader] = useState(false);
+  const { isLeader, setIsLeader } = useLeaderStore();
 
   const logout = async () => {
     try {

devsoc24-portal-fe/src/components/teamCard.tsx

@@ -5,8 +5,16 @@ import { Button } from "@/components/ui/button";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { teamDataProps, userProps } from "@/interfaces";
 import axios, { AxiosResponse } from "axios";
-import { useIdeaStore, useTeamStore, useUserStore } from "@/store/store";
+import {
+  useIdeaStore,
+  useLeaderStore,
+  useTeamEditStore,
+  useTeamStore,
+  useUserStore,
+} from "@/store/store";
 import { useRouter } from "next/navigation";
+import editImg from "@/assets/images/edit.svg";
+import Image from "next/image";
 
 interface keyProps {
   message: string;
@@ -20,6 +28,8 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
   const { team, setTeam } = useTeamStore();
   const { user, setUser } = useUserStore();
   const { idea, setIdea } = useIdeaStore();
+  const { edit, setEdit } = useTeamEditStore();
+  const { isLeader, setIsLeader } = useLeaderStore();
 
   const router = useRouter();
 
@@ -68,7 +78,7 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
         },
       );
       setTeam(false);
-      fetchTeam();
+      void fetchTeam();
     } catch (e) {
       if (axios.isAxiosError(e)) {
         switch (e.response?.status) {
@@ -90,12 +100,33 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
     }
   }, [props.team]);
 
+  const toggleEdit = () => {
+    setEdit(!edit);
+  };
+
   return (
     <>
       <div>
         <div className="h-fit w-full rounded-xl bg-white md:w-[32vw]">
-          <div className="pl-6 pt-4 font-semibold text-[#45464E]">
-            Your Devsoc Team
+          <div className="flex w-full items-center justify-between pl-6 pt-4 font-semibold text-[#45464E]">
+            <p>Your Devsoc Team</p>
+            {isLeader ? (
+              <div
+                className="mx-2 flex flex-row items-center justify-between gap-3 rounded-lg border-2 border-[#53545C] px-2 py-1 transition-all duration-150 ease-in-out hover:cursor-pointer hover:bg-black/10"
+                onClick={toggleEdit}
+              >
+                <Image
+                  src={editImg}
+                  alt="edit"
+                  height={0}
+                  width={0}
+                  className="h-fit w-fit"
+                />
+                Edit
+              </div>
+            ) : (
+              <></>
+            )}
           </div>
           <div className="flex flex-col items-center justify-center p-8">
             <p className="text-2xl font-semibold">{props.team?.team_name}</p>

devsoc24-portal-fe/src/store/store.tsx

@@ -26,6 +26,26 @@ export const useTeamStore = create<teamStore>((set) => ({
   setTeam: (team: boolean) => set({ team }),
 }));
 
+interface leaderStore {
+  isLeader: boolean;
+  setIsLeader: (isLeader: boolean) => void;
+}
+
+export const useLeaderStore = create<leaderStore>((set) => ({
+  isLeader: false,
+  setIsLeader: (isLeader: boolean) => set({ isLeader }),
+}));
+
+interface teamEditStore {
+  edit: boolean;
+  setEdit: (setTeam: boolean) => void;
+}
+
+export const useTeamEditStore = create<teamEditStore>((set) => ({
+  edit: false,
+  setEdit: (edit: boolean) => set({ edit }),
+}));
+
 interface userStore {
   user: userProps;
   setUser: (setUser: userProps) => void;