added FollowedContent and YourTestimonies buttons

codeforboston · Dec 30, 2024 · d5e1ac5 · d5e1ac5
1 parent 5a62c41
commit d5e1ac5
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 47 deletions.
diff --git a/components/EditProfilePage/EditProfileHeader.tsx b/components/EditProfilePage/EditProfileHeader.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next"
 import { Role } from "../auth"
 import { Col, Row } from "../bootstrap"
 import { FillButton, GearIcon, OutlineButton } from "../buttons"
+import { ProfileEditToggle } from "components/ProfilePage/ProfileButtons"
 
 export const EditProfileHeader = ({
   formUpdated,
@@ -28,15 +29,7 @@ export const EditProfileHeader = ({
           Icon={GearIcon}
           onClick={() => onSettingsModalOpen()}
         />
-        <FillButton
-          disabled={!!formUpdated}
-          href={`/profile?id=${uid}`}
-          label={
-            role === "organization" || role === "pendingUpgrade"
-              ? t("viewOrgProfile")
-              : t("viewMyProfile")
-          }
-        />
+        <ProfileEditToggle formUpdated={formUpdated} role={role} uid={uid} />
       </Col>
     </Row>
   )

diff --git a/components/ProfilePage/ProfileButtons.tsx b/components/ProfilePage/ProfileButtons.tsx
@@ -1,13 +1,16 @@
-import { Role } from "components/auth/types"
 import { useTranslation } from "next-i18next"
-import { Button } from "../bootstrap"
+import React, { useContext, useState } from "react"
 import styled from "styled-components"
+import { useAuth } from "../auth"
+import { Button } from "../bootstrap"
+import { Role } from "components/auth/types"
 import { FillButton, GearButton, ToggleButton } from "components/buttons"
-import { Internal } from "components/links"
 import { useProfile, ProfileHook } from "components/db"
 import { useFlags } from "components/featureFlags"
+import { Internal } from "components/links"
 import { FollowUserButton } from "components/shared/FollowButton"
-import { useAuth } from "../auth"
+
+import { TabContext } from "components/shared/ProfileTabsContext"
 
 export const StyledButton = styled(Button).attrs(props => ({
   className: `col-12 d-flex align-items-center justify-content-center py-3 text-nowrap`,
@@ -33,28 +36,39 @@ export const ProfileEditToggle = ({ formUpdated, uid, role }: Props) => {
   const { t } = useTranslation(["editProfile"])
   return (
     <FillButton
-      className={`py-1 ml-2 text-decoration-none`}
       disabled={!!formUpdated}
-      href={`/ profile ? id = ${uid} `}
-      label={role !== "organization" ? t("viewMyProfile") : t("viewOrgProfile")}
+      href={`/profile?id=${uid}`}
+      label={
+        role === "organization" || role === "pendingUpgrade"
+          ? t("viewOrgProfile")
+          : t("viewMyProfile")
+      }
     />
   )
 }
 
-export const EditProfileButton = ({ className }: { className?: string }) => {
+export const EditProfileButton = ({
+  className,
+  handleClick,
+  tab
+}: {
+  className?: string
+  handleClick?: any
+  tab: string
+}) => {
   const { t } = useTranslation("profile")
 
   return (
     <Internal
       href="/editprofile"
       className={`text-decoration-none text-white d-flex justify-content-center align-items-center col-12 ${className}`}
     >
-      <FillButton label={t("button.editProfile")} />
+      <FillButton label={t(tab)} onClick={handleClick} />
     </Internal>
   )
 }
 
-export function ProfileButtonsUser({
+export function ProfileButtons({
   isProfilePublic,
   onProfilePublicityChanged,
   isUser,
@@ -80,11 +94,27 @@ export function ProfileButtonsUser({
     await updateIsPublic(!isProfilePublic)
     onProfilePublicityChanged(!isProfilePublic)
   }
+
+  const { tabStatus, setTabStatus } = useContext(TabContext)
+
   return (
     <>
       {isUser ? (
         <div className={`d-grid gap-2 col-12 m-3`}>
-          <EditProfileButton className={`py-1`} />
+          <EditProfileButton
+            className={`py-1`}
+            handleClick={() => {
+              setTabStatus("Following")
+            }}
+            tab={"button.followedContent"}
+          />
+          <EditProfileButton
+            className={`py-1`}
+            handleClick={() => {
+              setTabStatus("Testimonies")
+            }}
+            tab={"button.yourTestimonies"}
+          />
           <ToggleButton
             toggleState={isProfilePublic || false}
             stateTrueLabel={t("forms.makePrivate")}
@@ -97,21 +127,3 @@ export function ProfileButtonsUser({
     </>
   )
 }
-
-export function ProfileButtonsOrg({
-  profileId,
-  isUser
-}: {
-  profileId: string
-  isUser: boolean
-}) {
-  const { followOrg } = useFlags()
-  const { user } = useAuth()
-  return (
-    <>
-      {followOrg && user && !isUser ? (
-        <FollowUserButton profileId={profileId} />
-      ) : null}
-    </>
-  )
-}
diff --git a/components/ProfilePage/ProfileHeader.tsx b/components/ProfilePage/ProfileHeader.tsx
@@ -1,9 +1,11 @@
-import { Header, ProfileDisplayName } from "./StyledProfileComponents"
-import { ProfileIcon } from "./StyledUserIcons"
-
 import { useTranslation } from "next-i18next"
+import { useMediaQuery } from "usehooks-ts"
+import { useAuth } from "../auth"
 import { Profile } from "../db"
-import { ProfileButtonsOrg, ProfileButtonsUser } from "./ProfileButtons"
+import { EditProfileButton, ProfileButtons } from "./ProfileButtons"
+import { Header, ProfileDisplayName } from "./StyledProfileComponents"
+import { ProfileIcon } from "./StyledUserIcons"
+import { FollowUserButton } from "components/shared/FollowButton"
 
 export const ProfileHeader = ({
   profileId,
@@ -22,6 +24,8 @@ export const ProfileHeader = ({
 }) => {
   const { t } = useTranslation("profile")
   const { role } = profile // When we have more types of profile than org and user, we will need to use the actual role from the profile, and move away from isOrg boolean.
+  const { user } = useAuth()
+  const isLg = useMediaQuery("(max-width: 992px)")
 
   return (
     <Header>
@@ -33,13 +37,19 @@ export const ProfileHeader = ({
           <ProfileDisplayName className={`col-3 col-md-auto`}>
             {profile.fullName}
           </ProfileDisplayName>
-          <ProfileButtonsOrg profileId={profileId} isUser={isUser} />
+          {user && !isUser ? (
+            <FollowUserButton profileId={profileId} />
+          ) : (
+            <EditProfileButton className={`py-1`} tab="button.editProfile" />
+          )}
         </div>
       </div>
       <div
-        className={`col-12 col-md-2 d-flex justify-content-center justify-content-md-end align-items-center ms-md-auto`}
+        className={`col-12 d-flex justify-content-center justify-content-md-end align-items-center ms-md-auto ${
+          isLg ? `col-md-3` : `col-md-2`
+        }`}
       >
-        <ProfileButtonsUser
+        <ProfileButtons
           isProfilePublic={isProfilePublic}
           onProfilePublicityChanged={onProfilePublicityChanged}
           isUser={isUser}

diff --git a/components/shared/FollowButton.tsx b/components/shared/FollowButton.tsx
@@ -89,7 +89,13 @@ export const ButtonWithCheckmark = ({
   )
 }
 
-export function FollowUserButton({ profileId }: { profileId: string }) {
+export function FollowUserButton({
+  className,
+  profileId
+}: {
+  className?: string
+  profileId: string
+}) {
   const { user } = useAuth()
   const uid = user?.uid
   const topicName = `testimony-${profileId}`

diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -9,7 +9,9 @@
     "editProfile": "Edit\u00A0Profile",    
     "notficationFrequencyDropdown": "open envelope with letter, toggles update frequency options",
     "follow" : "Follow",
-    "following" : "Following"
+    "followedContent": "Followed Content",
+    "following" : "Following",
+    "yourTestimonies": "Your Testimonies"
   },
   "content": {
     "viewingProfile": "Currently viewing your profile",