Merge pull request #1 from mertbagt/following-tab

Following tab
codeforboston · Jan 13, 2023 · 3dd063a · 3dd063a
2 parents 6d4a738 + 7c282cc
commit 3dd063a
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 161 deletions.
diff --git a/components/ProfilePage/AboutMeEditForm.tsx b/components/ProfilePage/AboutMeEditForm.tsx
@@ -16,7 +16,6 @@ type UpdateProfileData = {
   aboutYou: string
   twitter: string
   linkedIn: string
-  public: boolean
   organization: boolean
   profileImage: any
 }
@@ -33,15 +32,9 @@ async function updateProfile(
   { profile, actions, uid }: Props,
   data: UpdateProfileData
 ) {
-  const {
-    updateIsPublic,
-    updateSocial,
-    updateAbout,
-    updateDisplayName,
-    updateFullName
-  } = actions
+  const { updateSocial, updateAbout, updateDisplayName, updateFullName } =
+    actions
 
-  await updateIsPublic(data.public)
   await updateSocial("linkedIn", data.linkedIn)
   await updateSocial("twitter", data.twitter)
   await updateAbout(data.aboutYou)
@@ -62,14 +55,8 @@ export function AboutMeEditForm({
     handleSubmit
   } = useForm<UpdateProfileData>()
 
-  const {
-    displayName,
-    about,
-    organization,
-    public: isPublic,
-    social,
-    profileImage
-  }: Profile = profile
+  const { displayName, about, organization, social, profileImage }: Profile =
+    profile
 
   const { updateIsOrganization } = actions
 
@@ -97,22 +84,7 @@ export function AboutMeEditForm({
   return (
     <TitledSectionCard className={className}>
       <Form onSubmit={onSubmit}>
-        <Header
-          title={"About You"}
-          bug={
-            <Row className={`justify-content-center align-items-center`}>
-              <Form.Check
-                {...register("public")}
-                className={`col-auto about-me-checkbox`}
-                type="checkbox"
-                defaultChecked={isPublic}
-              />
-              <Form.Label htmlFor="public" className={`col my-1`}>
-                Allow others to see your profile
-              </Form.Label>
-            </Row>
-          }
-        ></Header>
+        <Header title={"About You"}></Header>
         <div className={`mx-4 mt-3 d-flex flex-column gap-3`}>
           {/* <Form.FloatingLabel label="User Type" className="mb-3">
             <Form.Select

diff --git a/components/ProfilePage/EditProfilePage.tsx b/components/ProfilePage/EditProfilePage.tsx
@@ -13,6 +13,7 @@ import {
 import { Internal } from "../links"
 import ViewTestimony from "../UserTestimonies/ViewTestimony"
 import { AboutMeEditForm } from "./AboutMeEditForm"
+import { FollowingTab } from "./FollowingTab"
 import NotificationSettingsModal from "./NotificationSettingsModal"
 import {
   Header,
@@ -43,9 +44,28 @@ export function EditProfileForm({
   actions: ProfileHook
   uid: string
 }) {
+  const {
+    public: isPublic,
+    notificationFrequency: notificationFrequency
+  }: Profile = profile
+
   const [key, setKey] = useState("AboutYou")
   const [formUpdated, setFormUpdated] = useState(false)
   const [settingsModal, setSettingsModal] = useState<"show" | null>(null)
+  const [notifications, setNotifications] = useState<
+    "Daily" | "Weekly" | "Monthly" | "None"
+  >(notificationFrequency ? notificationFrequency : "Monthly")
+  const [isProfilePublic, setIsProfilePublic] = useState<false | true>(
+    isPublic ? isPublic : false
+  )
+
+  const onSettingsModalOpen = () => {
+    setSettingsModal("show")
+    setNotifications(notificationFrequency ? notificationFrequency : "Monthly")
+    setIsProfilePublic(isPublic ? isPublic : false)
+  }
+
+  const close = () => setSettingsModal(null)
 
   const testimony = usePublishedTestimonyListing({
     uid: uid
@@ -82,11 +102,22 @@ export function EditProfileForm({
           className="mt-3 mb-4"
         />
       )
+    },
+    {
+      title: "Following",
+      eventKey: "Following",
+      content: (
+        <FollowingTab
+          profile={profile}
+          actions={actions}
+          uid={uid}
+          setFormUpdated={setFormUpdated}
+          className="mt-3 mb-4"
+        />
+      )
     }
   ]
 
-  const close = () => setSettingsModal(null)
-
   return (
     <Container>
       <Header>
@@ -99,12 +130,15 @@ export function EditProfileForm({
                */
               className={`btn btn-lg btn-outline-secondary me-4 invisible`}
               disabled={!!formUpdated}
-              onClick={() => setSettingsModal("show")}
+              onClick={() => onSettingsModalOpen()}
             >
               {"Settings"}
             </GearButton>
           </Internal>
-          <Internal className={`ml-2`} href={`/profile?id=${uid}`}>
+          <Internal
+            className={`ml-2`}
+            href={!!formUpdated ? `javascript:void(0)` : `/profile?id=${uid}`}
+          >
             <Button className={`btn btn-lg`} disabled={!!formUpdated}>
               {!profile.organization
                 ? "View your profile"
@@ -135,9 +169,14 @@ export function EditProfileForm({
         </StyledTabContent>
       </TabContainer>
       <NotificationSettingsModal
-        show={settingsModal === "show"}
+        actions={actions}
+        isProfilePublic={isProfilePublic}
+        setIsProfilePublic={setIsProfilePublic}
+        notifications={notifications}
+        setNotifications={setNotifications}
         onHide={close}
-        onClickCloseModal={() => setSettingsModal(null)}
+        onSettingsModalClose={() => setSettingsModal(null)}
+        show={settingsModal === "show"}
       />
     </Container>
   )

diff --git a/components/ProfilePage/FollowingTab.tsx b/components/ProfilePage/FollowingTab.tsx
@@ -0,0 +1,37 @@
+import clsx from "clsx"
+import { ChangeEvent, useEffect, useState } from "react"
+import { FormCheck, FormControlProps } from "react-bootstrap"
+import { useForm } from "react-hook-form"
+import { Button, Form, Image, Row, Col } from "../bootstrap"
+import { Profile, ProfileHook } from "../db"
+import Input from "../forms/Input"
+import { TitledSectionCard } from "../shared"
+import { Header } from "../shared/TitledSectionCard"
+import { ImageInput } from "./ImageInput"
+import { YourLegislators } from "./YourLegislators"
+import { Internal } from "../links"
+
+type Props = {
+  profile: Profile
+  actions: ProfileHook
+  uid?: string
+  setFormUpdated?: any
+  className?: string
+}
+
+export function FollowingTab({
+  profile,
+  actions,
+  uid,
+  className,
+  setFormUpdated
+}: Props) {
+  return (
+    <TitledSectionCard className={className}>
+      <Header title={"Following"} />
+      <div className={`mx-4 mt-3 d-flex flex-column gap-3`}>
+        {"Bills You Follow"}
+      </div>
+    </TitledSectionCard>
+  )
+}