Merge pull request #691 from Ekep-Obasi/update-frontend-title-about-e…

…ndpoint

feat: Update frontend title after endpoint

src/components/App/AppBar/index.tsx

@@ -1,43 +1,21 @@
-import { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { Stats } from '~/components/Stats'
-import { getAboutData, TAboutParams } from '~/network/fetchSourcesData'
+import { useAppStore } from '~/stores/useAppStore'
 import { colors } from '~/utils/colors'
 import { media } from '~/utils/media'
 
-const defaultData = {
-  description: '',
-  mission_statement: '',
-  search_term: '',
-  title: '',
-}
-
 export const AppBar = () => {
-  const [initialValues, setInitialValues] = useState<TAboutParams>(defaultData)
-
-  useEffect(() => {
-    const init = async () => {
-      try {
-        const response = await getAboutData()
-
-        setInitialValues(response)
-      } catch (error) {
-        console.warn(error)
-      }
-    }
-
-    init()
-  }, [])
+  const appMetaData = useAppStore((s) => s.appMetaData)
 
   return (
     <Header>
       <TitleWrapper>
         <>
-          {initialValues.title && (
+          {appMetaData.title && (
             <Text className="title" color="white">
-              {initialValues.title}
+              {appMetaData.title}
             </Text>
           )}
         </>

src/components/App/SecondarySidebar/About/index.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useState } from 'react'
-import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { getAboutData, TAboutParams } from '~/network/fetchSourcesData'
+import { useAppStore } from '~/stores/useAppStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { AboutAdminView } from './AdminView'
@@ -16,50 +14,18 @@ export const requiredRule = {
   },
 }
 
-const defaultData = {
-  description: '',
-  mission_statement: '',
-  search_term: '',
-  title: '',
-}
-
 export const About = () => {
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
-  const [loading, setLoading] = useState(false)
-  const [initialValues, setInitialValues] = useState<TAboutParams>(defaultData)
-
-  useEffect(() => {
-    const init = async () => {
-      setLoading(true)
-
-      try {
-        const response = await getAboutData()
-
-        setInitialValues(response)
-      } catch (error) {
-        console.warn(error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    init()
-  }, [])
+  const appMetaData = useAppStore((s) => s.appMetaData)
 
   return (
     <Wrapper align="stretch" direction="column" justify="flex-end">
       <Heading align="center" direction="row" justify="space-between">
         <Text className="title">About</Text>
       </Heading>
-      {loading ? (
-        <ContentWrapper align="center" justify="center">
-          <ClipLoader />
-        </ContentWrapper>
-      ) : (
-        <ContentWrapper align="stretch" justify="flex-start">
-          {!isAdmin ? <CommonView initialValues={initialValues} /> : <AboutAdminView initialValues={initialValues} />}
-        </ContentWrapper>
-      )}
+      <ContentWrapper align="stretch" justify="flex-start">
+        {!isAdmin ? <CommonView initialValues={appMetaData} /> : <AboutAdminView initialValues={appMetaData} />}
+      </ContentWrapper>
     </Wrapper>
   )
 }

src/components/App/Splash/index.tsx

@@ -5,19 +5,20 @@ import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
 import { TAboutParams, getAboutData, getStats } from '~/network/fetchSourcesData'
+import { useAppStore } from '~/stores/useAppStore'
 import { colors } from '~/utils'
 import { SphereAnimation } from './SpiningSphere'
 import { AnimatedTextContent } from './animated'
-import { Message, initialAboutState, initialMessageData } from './constants'
+import { Message, initialMessageData } from './constants'
 
 type Props = {
   handleLoading: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export const Splash = memo(({ handleLoading }: Props) => {
-  const [about, setAbout] = useState<TAboutParams>(initialAboutState)
   const [message, setMessage] = useState<Message>(initialMessageData)
   const [progress, setProgress] = useState(0)
+  const [appMetaData, setAppMetaData] = [useAppStore((s) => s.appMetaData), useAppStore((s) => s.setAppMetaData)]
 
   useEffect(() => {
     let timeoutId: NodeJS.Timeout
@@ -34,7 +35,7 @@ export const Splash = memo(({ handleLoading }: Props) => {
 
         setProgress((prev) => prev + 15)
 
-        setAbout(aboutResponse)
+        setAppMetaData(aboutResponse)
 
         setMessage(
           initialMessageData.map(({ key, ...rest }) => ({
@@ -75,7 +76,7 @@ export const Splash = memo(({ handleLoading }: Props) => {
       <SphereAnimation />
       <Flex style={{ color: colors.white }}>
         <TitleWrapper>
-          {about.title && <Text className="title">{about.title}</Text>}
+          {appMetaData.title && <Text className="title">{appMetaData.title}</Text>}
           <Text className="subtitle">Second Brain</Text>
         </TitleWrapper>
         <LinearProgress color="inherit" sx={{ my: 1.75, height: '2px' }} value={progress} variant="determinate" />

src/components/SettingsModal/SettingsView/General/index.tsx

@@ -7,6 +7,7 @@ import { Flex } from '~/components/common/Flex'
 import { TextInput } from '~/components/common/TextInput'
 import { requiredRule } from '~/constants'
 import { TAboutParams, postAboutData } from '~/network/fetchSourcesData'
+import { useAppStore } from '~/stores/useAppStore'
 import { colors } from '~/utils/colors'
 
 type Props = {
@@ -16,10 +17,15 @@ type Props = {
 export const General: FC<Props> = ({ initialValues }) => {
   const form = useForm<TAboutParams>({ defaultValues: initialValues, mode: 'onSubmit' })
   const { isSubmitting } = form.formState
+  const setAppMetaData = useAppStore((s) => s.setAppMetaData)
 
   const onSubmit = form.handleSubmit(async (data) => {
     try {
-      await postAboutData(data)
+      const res = (await postAboutData(data)) as Awaited<{ status: string }>
+
+      if (res.status === 'success') {
+        setAppMetaData(data)
+      }
     } catch (error) {
       console.warn(error)
     }

src/components/SettingsModal/SettingsView/index.tsx

@@ -2,11 +2,11 @@
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import * as React from 'react'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
+import { useAppStore } from '~/stores/useAppStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { UserPermissions } from '../UserPermissions'
@@ -19,13 +19,6 @@ interface TabPanelProps {
   value: number
 }
 
-const defaultData = {
-  description: '',
-  mission_statement: '',
-  search_term: '',
-  title: '',
-}
-
 const TabPanel = (props: TabPanelProps) => {
   const { children, value, index, ...other } = props
 
@@ -55,39 +48,33 @@ type Props = {
 
 export const SettingsView: React.FC<Props> = ({ onClose }) => {
   const [value, setValue] = useState(0)
-  const [isAdmin] = useUserStore((s) => [s.isAdmin])
-  const [loading, setLoading] = useState(false)
-  const [initialValues, setInitialValues] = useState<TAboutParams>(defaultData)
-
-  useEffect(() => {
-    const init = async () => {
-      setLoading(true)
-
-      try {
-        const response = await getAboutData()
-
-        setInitialValues(response)
-      } catch (error) {
-        console.warn(error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    init()
-  }, [])
+  const [isAdmin, pubKey] = useUserStore((s) => [s.isAdmin, s.setPubKey, s.pubKey])
+  const appMetaData = useAppStore((s) => s.appMetaData)
 
   const getSettingsLabel = () => (isAdmin ? 'Admin Settings' : 'Settings')
 
   const SettingsHeader = ({ children }: { children: React.ReactNode }) => (
     <StyledHeader>
       <Flex direction="row" pt={3}>
         <StyledText>{getSettingsLabel()}</StyledText>
+        {resolveAdminActions()}
       </Flex>
       {children}
     </StyledHeader>
   )
 
+  const resolveAdminActions = () => {
+    if (!pubKey) {
+      return null
+    }
+
+    if (isAdmin) {
+      return null
+    }
+
+    return <></>
+  }
+
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue)
   }
@@ -101,14 +88,16 @@ export const SettingsView: React.FC<Props> = ({ onClose }) => {
           {isAdmin && <StyledTab disableRipple label="User Permissions" {...a11yProps(2)} />}
         </StyledTabs>
       </SettingsHeader>
-
-      <TabPanel index={0} value={value}>
-        {!loading ? <General initialValues={initialValues} /> : <></>}
-      </TabPanel>
-      <TabPanel index={2} value={value}>
-        {!loading ? <UserPermissions initialValues={initialValues} /> : <></>}
-      </TabPanel>
-
+      {isAdmin && (
+        <>
+          <TabPanel index={0} value={value}>
+            <General initialValues={appMetaData} />
+          </TabPanel>
+          <TabPanel index={2} value={value}>
+            <UserPermissions initialValues={appMetaData} />
+          </TabPanel>
+        </>
+      )}
       <TabPanel index={isAdmin ? 1 : 0} value={value}>
         <Appearance onClose={onClose} />
       </TabPanel>

src/stores/useAppStore/index.ts

@@ -1,4 +1,6 @@
 import create from 'zustand'
+import { initialAboutState } from '~/components/App/Splash/constants'
+import { TAboutParams } from '~/network/fetchSourcesData'
 
 export type SecondarySidebarActiveTab = '' | 'sentiment' | 'sources' | 'about'
 
@@ -11,13 +13,15 @@ type AppStore = {
   transcriptIsOpen: boolean
   flagErrorIsOpen: boolean
   relevanceIsSelected: boolean
+  appMetaData: TAboutParams
   clearSearch: () => void
   setCurrentSearch: (_: string) => void
   setRelevanceSelected: (_: boolean) => void
   setSecondarySidebarActiveTab: (_: SecondarySidebarActiveTab) => void
   setSidebarOpen: (_: boolean) => void
   setTranscriptOpen: (_: boolean) => void
   setFlagErrorOpen: (_: boolean) => void
+  setAppMetaData: (val: TAboutParams) => void
 }
 
 const defaultData = {
@@ -29,6 +33,7 @@ const defaultData = {
   sidebarIsOpen: true,
   theme: 'light' as const,
   transcriptIsOpen: false,
+  appMetaData: initialAboutState,
 }
 
 export const useAppStore = create<AppStore>((set, get) => ({
@@ -47,4 +52,5 @@ export const useAppStore = create<AppStore>((set, get) => ({
       transcriptIsOpen: !sidebarIsOpen ? false : get().transcriptIsOpen,
     }),
   setTranscriptOpen: (transcriptIsOpen) => set({ transcriptIsOpen }),
+  setAppMetaData: (appMetaData) => set({ appMetaData }),
 }))