Merge pull request #1210 from Ekep-Obasi/fix/error-on-initial-loading…

…-for-new-graph

fix: corrected computation of `splashDataLoaded`

src/components/App/AppBar/index.tsx

@@ -9,6 +9,10 @@ import { media } from '~/utils/media'
 export const AppBar = () => {
   const appMetaData = useAppStore((s) => s.appMetaData)
 
+  if (!appMetaData) {
+    return null
+  }
+
   return (
     <Header>
       <TitleWrapper>

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

@@ -18,6 +18,10 @@ export const About = () => {
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const appMetaData = useAppStore((s) => s.appMetaData)
 
+  if (!appMetaData) {
+    return null
+  }
+
   return (
     <Wrapper align="stretch" direction="column" justify="flex-end">
       <Heading align="center" direction="row" justify="space-between">

src/components/App/Splash/constants.ts

@@ -1,12 +1,5 @@
 import { TAboutParams } from '~/network/fetchSourcesData'
 
-export const initialAboutState = {
-  description: '',
-  mission_statement: '',
-  search_term: '',
-  title: '',
-}
-
 export const initialMessageData = [
   {
     label: 'New Content',

src/components/App/Splash/index.tsx

@@ -1,15 +1,13 @@
 /* eslint-disable react/display-name */
 import { LinearProgress } from '@mui/material'
-import { memo, PropsWithChildren, useEffect, useMemo, useState } from 'react'
+import { memo, PropsWithChildren, useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { StatsConfig } from '~/components/Stats'
-import { getAboutData, getStats, TStatParams } from '~/network/fetchSourcesData'
+import { getAboutData, getStats } from '~/network/fetchSourcesData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
-import { TStats } from '~/types'
-import { colors, formatNumberWithCommas } from '~/utils'
+import { colors, formatSplashMessage, formatStatsResponse } from '~/utils'
 import { AnimatedTextContent } from './animated'
 import { initialMessageData, Message } from './constants'
 import { SphereAnimation } from './SpiningSphere'
@@ -21,81 +19,62 @@ export const Splash = memo(({ children }: PropsWithChildren) => {
   const { appMetaData, setAppMetaData } = useAppStore((s) => s)
   const { stats, setStats, isFetching } = useDataStore((s) => s)
 
-  useEffect(() => {
-    const run = async () => {
-      try {
+  const fetchData = useCallback(async () => {
+    try {
+      if (!appMetaData) {
         const aboutResponse = await getAboutData()
 
         setAppMetaData(aboutResponse)
-      } catch (error) {
-        setProgress(100)
-
-        setIsLoading(false)
       }
-    }
-
-    run()
-  }, [setIsLoading, setAppMetaData, stats])
-
-  useEffect(() => {
-    const run = async () => {
-      const statsReponse = await getStats()
 
-      const updatedStats: TStats = {}
+      if (!stats) {
+        const statsResponse = await getStats()
 
-      StatsConfig.forEach(({ key, dataKey }) => {
-        updatedStats[key as keyof TStats] = formatNumberWithCommas(statsReponse[dataKey as keyof TStatParams] ?? 0)
-      })
+        const updatedStats = formatStatsResponse(statsResponse)
 
-      setStats(updatedStats)
+        setStats(updatedStats)
 
-      const messageData = initialMessageData.map(({ dataKey, ...rest }) => ({
-        ...rest,
-        value: formatNumberWithCommas(statsReponse[dataKey as keyof TStatParams] ?? 0),
-      }))
+        const messageData = formatSplashMessage(statsResponse)
 
-      setMessage(messageData)
-    }
+        setMessage(messageData)
+      }
+    } catch {
+      setIsLoading(false)
 
-    if (!stats) {
-      run()
+      setProgress(100)
     }
-  }, [stats, setMessage, setStats])
-
-  const splashDataLoaded = useMemo(
-    () => Object.values(appMetaData).some((value) => !!value) && message.some(({ value }) => !!value),
-    [appMetaData, message],
-  )
+  }, [appMetaData, setAppMetaData, setStats, stats])
 
   useEffect(() => {
+    fetchData()
+
     let timeoutId: NodeJS.Timeout
+    let intervalId: NodeJS.Timer
+
+    if (!isFetching && message && appMetaData) {
+      // increase progress fro 0 to 50% after all data is fetched
+      setProgress((prev) => (!prev ? 50 : prev))
 
-    if (!isFetching && splashDataLoaded) {
-      setProgress(50)
+      intervalId = setInterval(() => {
+        setProgress((prev) => (prev >= 100 ? 100 : prev + Math.floor(Math.random() * 4)))
+      }, 100)
 
       timeoutId = setTimeout(() => setIsLoading(false), 5000)
     }
 
-    return () => clearTimeout(timeoutId)
-  }, [isFetching, setIsLoading, splashDataLoaded])
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (splashDataLoaded) {
-        setProgress((prev) => (prev >= 100 ? 100 : prev + Math.floor(Math.random() * 4)))
-      }
-    }, 100)
-
-    return () => clearInterval(intervalId)
-  }, [splashDataLoaded])
+    return () => {
+      clearTimeout(timeoutId)
+      clearInterval(intervalId)
+    }
+  }, [appMetaData, fetchData, isFetching, message, stats])
 
-  if (!splashDataLoaded) {
+  if (!message.some(({ value }) => !!value) || !appMetaData) {
     return null
   }
 
   return (
     <SplashWrapper>
-      {isLoading && splashDataLoaded ? (
+      {isLoading ? (
         <Wrappper align="center" direction="row" justify="center">
           <SphereAnimation />
           <Flex style={{ color: colors.white }}>

src/components/AppNew/AppBar/index.tsx

@@ -9,6 +9,10 @@ import { media } from '~/utils/media'
 export const AppBar = () => {
   const appMetaData = useAppStore((s) => s.appMetaData)
 
+  if (!appMetaData) {
+    return null
+  }
+
   return (
     <Header>
       <TitleWrapper>

src/components/AppNew/ModalsContainer/SettingsModal/SettingsView/index.tsx

@@ -89,7 +89,7 @@ export const SettingsView: React.FC<Props> = ({ onClose }) => {
       {isAdmin && (
         <>
           <TabPanel index={0} value={value}>
-            <General initialValues={appMetaData} />
+            {appMetaData && <General initialValues={appMetaData} />}
           </TabPanel>
         </>
       )}

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

@@ -18,6 +18,10 @@ export const About = () => {
   const [isAdmin] = useUserStore((s) => [s.isAdmin])
   const appMetaData = useAppStore((s) => s.appMetaData)
 
+  if (!appMetaData) {
+    return null
+  }
+
   return (
     <Wrapper align="stretch" direction="column" justify="flex-end">
       <Heading align="center" direction="row" justify="space-between">

src/components/AppNew/Splash/index.tsx

@@ -87,7 +87,7 @@ export const Splash = memo(({ handleLoading }: Props) => {
       <SphereAnimation />
       <Flex style={{ color: colors.white }}>
         <TitleWrapper>
-          {appMetaData.title && <Text className="title">{appMetaData.title}</Text>}
+          {appMetaData && <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/index.tsx

@@ -85,7 +85,7 @@ export const SettingsView: React.FC<Props> = ({ onClose }) => {
       </SettingsHeader>
       {tabs.map((tab, index) => (
         <TabPanel key={tab.label} index={index} value={value}>
-          <tab.component initialValues={appMetaData} onClose={onClose} />
+          {appMetaData && <tab.component initialValues={appMetaData} onClose={onClose} />}
         </TabPanel>
       ))}
     </Wrapper>

src/components/Stats/index.tsx

@@ -10,13 +10,21 @@ import { TStatParams, getStats } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useUserStore } from '~/stores/useUserStore'
 import { TStats } from '~/types'
-import { formatBudget, formatNumberWithCommas } from '~/utils'
+import { formatBudget, formatStatsResponse } from '~/utils'
 import { colors } from '~/utils/colors'
 import DocumentIcon from '../Icons/DocumentIcon'
 import EpisodeIcon from '../Icons/EpisodeIcon'
 import { Flex } from '../common/Flex'
 
-export const StatsConfig = [
+interface StatConfigItem {
+  name: string
+  icon: JSX.Element
+  key: keyof TStats
+  dataKey: keyof TStatParams
+  mediaType: string
+}
+
+export const StatsConfig: StatConfigItem[] = [
   {
     name: 'Nodes',
     icon: <NodesIcon />,
@@ -75,11 +83,7 @@ export const Stats = () => {
         const data = await getStats()
 
         if (data) {
-          const updatedStats: TStats = {}
-
-          StatsConfig.forEach(({ key, dataKey }) => {
-            updatedStats[key as keyof TStats] = formatNumberWithCommas(data[dataKey as keyof TStatParams] ?? 0)
-          })
+          const updatedStats = formatStatsResponse(data)
 
           setStats(updatedStats)
         }

src/network/fetchSourcesData/index.ts

@@ -35,6 +35,8 @@ export type TStatParams = {
   num_tweet: number
   num_twitter_space: number
   num_video: number
+  num_documents: number
+  [key: string]: number
 }
 
 export type TPriceParams = {

src/stores/useAppStore/index.ts

@@ -1,5 +1,4 @@
 import { create } from 'zustand'
-import { initialAboutState } from '~/components/App/Splash/constants'
 import { TAboutParams } from '~/network/fetchSourcesData'
 
 export type SecondarySidebarActiveTab = '' | 'sentiment' | 'sources' | 'about'
@@ -14,7 +13,7 @@ export type AppStore = {
   transcriptIsOpen: boolean
   flagErrorIsOpen: boolean
   relevanceIsSelected: boolean
-  appMetaData: TAboutParams
+  appMetaData: TAboutParams | null
   clearSearch: () => void
   setCurrentSearch: (_: string) => void
   setSearchFormValue: (_: string) => void
@@ -36,7 +35,7 @@ const defaultData = {
   sidebarIsOpen: true,
   theme: 'light' as const,
   transcriptIsOpen: false,
-  appMetaData: initialAboutState,
+  appMetaData: null,
 }
 
 export const useAppStore = create<AppStore>((set, get) => ({

src/utils/index.ts

@@ -21,6 +21,7 @@ import { extractUuidAndHost } from './auth'
 import { formatDate } from './formatDate'
 import { formatNumberWithCommas } from './formatStats'
 import { generateAuthQueryParam, getSignedMessageFromRelay } from './getSignedMessage'
+import { formatSplashMessage, formatStatsResponse } from './splash'
 import { getTrendingTopic, showPlayButton } from './trending'
 import { videoTimeToSeconds } from './videoTimetoSeconds'
 
@@ -38,6 +39,8 @@ export {
   formatDate,
   formatDescription,
   formatNumberWithCommas,
+  formatSplashMessage,
+  formatStatsResponse,
   formatTimestamp,
   generateAuthQueryParam,
   getLSat,

src/utils/splash/index.ts

@@ -0,0 +1,32 @@
+import { initialMessageData } from '~/components/App/Splash/constants'
+import { StatsConfig } from '~/components/Stats'
+import { TStatParams } from '~/network/fetchSourcesData'
+import { TStats } from '~/types'
+import { formatNumberWithCommas } from '../formatStats'
+
+/**
+ * Formats the statistics response object.
+ * @param statsRespons {TStatParams} The statistics response object from /stats to format.
+ * @returns {TStats} The formatted statistics object.
+ */
+
+export const formatStatsResponse = (statsResponse: TStatParams): TStats =>
+  StatsConfig.reduce((updatedStats: TStats, { key, dataKey }) => {
+    const formattedValue = formatNumberWithCommas(statsResponse[dataKey] ?? 0)
+
+    return { ...updatedStats, [key]: formattedValue }
+  }, {})
+
+/**
+ * Formats the splash message based on the statistics response.
+ * @param statsRespons {TStatParams} The statistics response object from /stats to format.
+ * @returns The formatted splash message array.
+ */
+
+export const formatSplashMessage = (statsResponse: TStatParams) =>
+  // Map over initialMessageData to format each message
+  initialMessageData.map(({ dataKey, ...rest }) => ({
+    // Spread the rest of the properties and add the formatted value
+    ...rest,
+    value: formatNumberWithCommas(statsResponse[dataKey] ?? 0),
+  }))