Merge pull request #67 from Build-Squad/ENG-32-Navbar-Changes

Navbar for business and influencers.
Build-Squad · Jan 5, 2024 · 1a9aae4 · 1a9aae4
2 parents 86aaad3 + 7b95c04
commit 1a9aae4
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 153 deletions.
diff --git a/src/ui/app/business/components/banner/index.tsx b/src/ui/app/business/components/banner/index.tsx
@@ -120,15 +120,15 @@ export default function Banner({}: Props) {
               />
             </Grid>
           </Grid>
-          <Grid container spacing={2} justifyContent={"space-around"}>
+          <Grid container spacing={2} justifyContent={"center"}>
             <Grid item xs={2.5} sm={2.5} md={2.5} lg={2.5}>
               <FiltersComponent
                 formik={formik}
                 type={"PRICE"}
                 data={{ name: "lowerPriceLimit", label: "Min. Price($)" }}
               />
             </Grid>
-            <span style={{ marginTop: "24px" }}>-</span>
+            <span style={{ marginTop: "24px", marginLeft: "10px" }}>-</span>
             <Grid item xs={2.5} sm={2.5} md={2.5} lg={2.5}>
               <FiltersComponent
                 formik={formik}
@@ -143,7 +143,7 @@ export default function Banner({}: Props) {
                 data={{ name: "lowerFollowerLimit", label: "Min. Followers" }}
               />
             </Grid>
-            <span style={{ marginTop: "24px", marginLeft: "8px" }}>-</span>
+            <span style={{ marginTop: "24px", marginLeft: "10px" }}>-</span>
             <Grid item xs={2.5} sm={2.5} md={2.5} lg={2.5}>
               <FiltersComponent
                 formik={formik}

diff --git a/src/ui/app/components/loginMenu/index.tsx b/src/ui/app/components/loginMenu/index.tsx
@@ -1,23 +1,31 @@
 "use client";
 
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import { Button, List, ListItem, Menu } from "@mui/material";
+import { List, ListItem, Menu } from "@mui/material";
 import * as React from "react";
 import ProfileIcon from "@/public/svg/Profile.svg";
 import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import { useAppSelector } from "@/src/hooks/useRedux";
 
 type LoginMenuProps = {
+  logoutTwitterUser: () => {};
+  isTwitterUserLoggedIn: boolean;
   twitterLogin: () => {};
   setEmailOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setWalletOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export default function LoginMenu({
+  logoutTwitterUser,
+  isTwitterUserLoggedIn,
   twitterLogin,
   setEmailOpen,
   setWalletOpen,
 }: LoginMenuProps) {
+  const router = useRouter();
+  const pathname = usePathname();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const currentUser = useAppSelector((state) => state.user?.user);
   const open = Boolean(anchorEl);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -27,26 +35,54 @@ export default function LoginMenu({
     setAnchorEl(null);
   };
 
-  const loginOptions = [
-    {
-      label: "Profile",
-      function: () => {},
-    },
-    {
-      label: "Connect with X",
-      function: twitterLogin,
-    },
-    {
-      label: "Connect with Email",
-      function: () => {
-        setEmailOpen(true);
-      },
-    },
-    {
-      label: "Connect with Wallet",
-      function: () => setWalletOpen(true),
-    },
-  ];
+  const getLoginOptions = () => {
+    let options = [];
+    if (isTwitterUserLoggedIn) {
+      options.push(
+        {
+          label: "My Profile",
+          function: () => {
+            if (pathname.includes("influencer")) {
+              window.location.href = `/influencer/profile/${currentUser?.id}`;
+            }
+          },
+        },
+        {
+          label: "Logout",
+          function: () => {
+            logoutTwitterUser();
+            if (pathname.includes("influencer")) {
+              router.push("/influencer");
+            } else if (pathname.includes("business")) {
+              router.push("/business");
+            } else {
+              router.push("/");
+            }
+          },
+        }
+      );
+    }
+    if (!isTwitterUserLoggedIn) {
+      options.push(
+        {
+          label: "Connect with X",
+          function: twitterLogin,
+        },
+        {
+          label: "Connect with Email",
+          function: () => {
+            setEmailOpen(true);
+          },
+        },
+        {
+          label: "Connect with Wallet",
+          function: () => setWalletOpen(true),
+        }
+      );
+    }
+
+    return options;
+  };
 
   return (
     <>
@@ -72,7 +108,7 @@ export default function LoginMenu({
         }}
       >
         <List>
-          {loginOptions.map((option: any) => (
+          {getLoginOptions().map((option: any) => (
             <ListItem
               key={option.label}
               onClick={() => {