link to Edit Profile - Following Tab

codeforboston · Dec 29, 2024 · ca86163 · ca86163
1 parent fafe412
commit ca86163
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 32 deletions.
diff --git a/components/DesktopNav.tsx b/components/DesktopNav.tsx
@@ -11,6 +11,7 @@ import {
   NavbarLinkEditProfile,
   NavbarLinkEffective,
   NavbarLinkFAQ,
+  NavbarLinkFollowTab,
   NavbarLinkGoals,
   NavbarLinkLogo,
   NavbarLinkNewsfeed,
@@ -23,11 +24,16 @@ import {
   NavbarLinkWhyUse
 } from "./NavbarComponents"
 
+import { useEffect, useContext } from "react"
+import { TabContext } from "./shared/ProfileTabsContext"
+
 export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { authenticated } = useAuth()
   const { notifications } = useFlags()
   const { t } = useTranslation(["common", "auth"])
 
+  const { tabStatus, setTabStatus } = useContext(TabContext)
+
   return (
     <Container fluid className={`bg-secondary d-flex py-2 sticky-top`}>
       <NavbarLinkLogo />
@@ -99,7 +105,20 @@ export const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
                 <NavbarLinkViewProfile />
               </NavDropdown.Item>
               <NavDropdown.Item>
-                <NavbarLinkEditProfile />
+                <NavbarLinkEditProfile
+                  handleClick={() => {
+                    setTabStatus("AboutYou")
+                  }}
+                />
+              </NavDropdown.Item>
+              <NavDropdown.Item>
+                <TabContext.Provider value={{ tabStatus, setTabStatus }}>
+                  <NavbarLinkFollowTab
+                    handleClick={() => {
+                      setTabStatus("Following")
+                    }}
+                  />
+                </TabContext.Provider>
               </NavDropdown.Item>
               <NavDropdown.Item>
                 <NavbarLinkSignOut

diff --git a/components/EditProfilePage/EditProfilePage.tsx b/components/EditProfilePage/EditProfilePage.tsx
@@ -26,6 +26,9 @@ import {
 } from "./StyledEditProfileComponents"
 import { TestimoniesTab } from "./TestimoniesTab"
 
+import { TabContext, TabStatus } from "components/shared/ProfileTabsContext"
+import { useEffect, useContext } from "react"
+
 export function EditProfile() {
   const { user } = useAuth()
   const uid = user?.uid
@@ -62,7 +65,7 @@ export function EditProfileForm({
     notificationFrequency: notificationFrequency
   }: Profile = profile
 
-  const [key, setKey] = useState("AboutYou")
+  const { tabStatus, setTabStatus } = useContext(TabContext)
   const [formUpdated, setFormUpdated] = useState(false)
   const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
   const [notifications, setNotifications] = useState<
@@ -144,26 +147,28 @@ export function EditProfileForm({
           uid={uid}
           role={profile.role}
         />
-        <TabContainer
-          defaultActiveKey="AboutYou"
-          activeKey={key}
-          onSelect={(k: any) => setKey(k)}
-        >
-          <TabNavWrapper>
-            {tabs.map((t, i) => (
-              <>
-                <TabNavItem tab={t} i={i} />
-              </>
-            ))}
-          </TabNavWrapper>
-          <StyledTabContent>
-            {tabs.map(t => (
-              <TabPane key={t.eventKey} title={t.title} eventKey={t.eventKey}>
-                {t.content}
-              </TabPane>
-            ))}
-          </StyledTabContent>
-        </TabContainer>
+        <TabContext.Provider value={{ tabStatus, setTabStatus }}>
+          <TabContainer
+            // defaultActiveKey="AboutYou"
+            activeKey={tabStatus}
+            onSelect={(k: any) => setTabStatus(k)}
+          >
+            <TabNavWrapper>
+              {tabs.map((t, i) => (
+                <>
+                  <TabNavItem tab={t} i={i} />
+                </>
+              ))}
+            </TabNavWrapper>
+            <StyledTabContent>
+              {tabs.map(t => (
+                <TabPane key={t.eventKey} title={t.title} eventKey={t.eventKey}>
+                  {t.content}
+                </TabPane>
+              ))}
+            </StyledTabContent>
+          </TabContainer>
+        </TabContext.Provider>
       </Container>
       <ProfileSettingsModal
         actions={actions}

diff --git a/components/NavbarComponents.tsx b/components/NavbarComponents.tsx
@@ -137,6 +137,28 @@ export const NavbarLinkFAQ: React.FC<
   )
 }
 
+export const NavbarLinkFollowTab: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth", "profile"])
+  return (
+    <Nav.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : ""}
+        href="/editprofile"
+        {...other}
+      >
+        {/* {t("navigation.editProfile")} */}
+        {"Follow Tab"}
+      </NavLink>
+    </Nav.Item>
+  )
+}
+
 export const NavbarLinkGoals: React.FC<
   React.PropsWithChildren<{
     handleClick?: any

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -8,6 +8,9 @@ import { DesktopNav } from "./DesktopNav"
 import PageFooter from "./Footer/Footer"
 import { MobileNav } from "./MobileNav"
 
+import { useContext } from "react"
+import { TabContext, TabStatus } from "./shared/ProfileTabsContext"
+
 export const PageContainer: FC<React.PropsWithChildren<unknown>> = ({
   children
 }) => {
@@ -29,6 +32,8 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
     ? `${title} | ${t("maple_abbr")}: ${t("maple_fullName")}`
     : `${t("maple_abbr")}: ${t("maple_fullName")}`
 
+  const [tabStatus, setTabStatus] = useState<TabStatus>("")
+
   // isClient used to prevent hydration issues: quite possibly better solutions exist
 
   const [isClient, setIsClient] = useState(false)
@@ -44,16 +49,18 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
             <title>{formattedTitle}</title>
             <link rel="icon" href="/favicon.ico" />
           </Head>
-          <PageContainer>
-            {isMobile ? <MobileNav /> : <DesktopNav />}
-            <AuthModal />
-            <div className={`col`}>{children}</div>
-            <PageFooter
-              authenticated={authenticated}
-              user={user as any}
-              signOut={signOutAndRedirectToHome}
-            />
-          </PageContainer>
+          <TabContext.Provider value={{ tabStatus, setTabStatus }}>
+            <PageContainer>
+              {isMobile ? <MobileNav /> : <DesktopNav />}
+              <AuthModal />
+              <div className={`col`}>{children}</div>
+              <PageFooter
+                authenticated={authenticated}
+                user={user as any}
+                signOut={signOutAndRedirectToHome}
+              />
+            </PageContainer>
+          </TabContext.Provider>
         </>
       ) : (
         <>

diff --git a/components/shared/ProfileTabsContext.tsx b/components/shared/ProfileTabsContext.tsx
@@ -0,0 +1,13 @@
+import { createContext, Dispatch, SetStateAction } from "react"
+
+export type TabStatus = string | number
+
+interface TabContextType {
+  tabStatus: TabStatus
+  setTabStatus: Dispatch<SetStateAction<string | number>>
+}
+
+export const TabContext = createContext<TabContextType>({
+  tabStatus: "",
+  setTabStatus: () => {}
+})