refactor state management

src/renderer/src/components/LogViewer.hooks.ts

@@ -1,19 +1,17 @@
 import { useCallback, useEffect, useState } from 'react'
 
 import { logService } from '../services/index.js'
-import { useCatchError } from '../store/hooks/globalHooks.js'
+import { useDataStore } from '../store/store.js'
 
 export function useLogs(): string | null {
   const [logs, setLogs] = useState<string | null>(null)
-  const catchError = useCatchError()
+  const tryRun = useDataStore((s) => s.tryRun)
   const getLogs = useCallback(async () => {
-    try {
+    await tryRun(async () => {
       const l = await logService.getLogs()
       setLogs(l)
-    } catch (ex) {
-      await catchError(`Failed to load logs. ${ex}`)
-    }
-  }, [setLogs, catchError])
+    })
+  }, [setLogs, tryRun])
 
   useEffect(() => {
     void getLogs()

src/renderer/src/components/LoginVerification.tsx

@@ -1,7 +1,7 @@
 import type { Verification } from '@octokit/auth-oauth-device/dist-types/types.js'
 import { FC, useCallback, useEffect, useState } from 'react'
 
-import { useFinishLoginFlow } from '../store/hooks/userHooks.js'
+import { useDataStore } from '../store/store.js'
 import { useMessageStyles } from '../styles/index.js'
 import { useLoginVerificationStyle } from './LoginVerification.styles.js'
 import { Message } from './Message.js'
@@ -18,7 +18,7 @@ export const LoginVerification: FC<LoginVerificationProps> =
     const [loginErrors, setLoginErrors] = useState<string[] | null>([])
     const [internalVerification, setInternalVerification] =
       useState<Verification | null>(null)
-    const finishLoginFlow = useFinishLoginFlow()
+    const finishLoginFlow = useDataStore((s) => s.userInfo.finishLoginFlow)
 
     useEffect(() => {
       setInternalVerification(verification)

src/renderer/src/components/RequireAuth.tsx

@@ -2,19 +2,15 @@ import { FC, PropsWithChildren } from 'react'
 import { Navigate } from 'react-router-dom'
 
 import { routes } from '../App/index.js'
-import { useCommunity } from '../store/hooks/communityHooks.js'
-import { useUser, useUserLoaded } from '../store/hooks/userHooks.js'
+import { useDataStore } from '../store/store.js'
 
 export const RequireAuth: FC<PropsWithChildren> = function RequireAuth({
   children,
 }) {
-  const user = useUser()
-  const isUserLoaded = useUserLoaded()
-  const community = useCommunity()
+  const user = useDataStore((s) => s.userInfo.user)
+  const community = useDataStore((s) => s.communityInfo.selectedCommunity)
 
-  if (!isUserLoaded) {
-    return <></>
-  } else if (user == null || community == null || !community.isMember) {
+  if (user == null || community == null || !community.isMember) {
     return <Navigate to={routes.settings.path} />
   } else {
     return children

src/renderer/src/pages/about/About.tsx

@@ -10,21 +10,19 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { LogViewer } from '../../components/index.js'
 import { logService } from '../../services/LogService.js'
-import { useCatchError } from '../../store/hooks/globalHooks.js'
+import { useDataStore } from '../../store/store.js'
 import { LicenseViewer } from './LicenseViewer.js'
 
 export const AboutPage = function AboutPage() {
   const [version, setVersion] = useState('')
-  const catchError = useCatchError()
+  const tryRun = useDataStore((s) => s.tryRun)
 
   const getVersion = useCallback(async () => {
-    try {
+    await tryRun(async () => {
       const ver = await logService.getAppVersion()
       setVersion(ver)
-    } catch (ex) {
-      await catchError(`Failed to load app version. ${ex}`)
-    }
-  }, [setVersion, catchError])
+    })
+  }, [setVersion, tryRun])
 
   useEffect(() => {
     void getVersion()

src/renderer/src/pages/dashboard/Dashboard.tsx

@@ -5,7 +5,7 @@ import {
   useGlobalSettingsErrors,
   useSetGlobalSettingsError,
 } from '../../store/hooks/globalHooks.js'
-import { useUser } from '../../store/hooks/userHooks.js'
+import { useDataStore } from '../../store/store.js'
 import { useMessageStyles } from '../../styles/index.js'
 import { DashboardCommunity } from './community/DashboardCommunity.js'
 import { DashboardUser } from './user/DashboardUser.js'
@@ -14,7 +14,7 @@ export const Dashboard = function Dashboard() {
   const configErrors = useGlobalSettingsErrors()
   const setConfigErrors = useSetGlobalSettingsError()
   const messageStyles = useMessageStyles()
-  const user = useUser()
+  const user = useDataStore((s) => s.userInfo.user)
 
   const onClose = useCallback(() => {
     setConfigErrors([])

src/renderer/src/pages/dashboard/community/CommunityTable.tsx

@@ -1,5 +1,5 @@
 import {
   Button,
   Checkbox,
   Table,
   TableBody,
@@ -11,47 +11,52 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 
 import type { Community } from '../../../../../electron/db/schema.js'
-import {
-  useCommunites,
-  useCommunity,
-  useSelectCommunity,
-  useSelectedCommunityUrl,
-  useSetCommunityDashboardState,
-  useSetSelectedCommunityToManage,
-  useSetSelectedCommunityUrl,
-} from '../../../store/hooks/communityHooks.js'
+import { useDataStore } from '../../../store/store.js'
 import { useCommunityTableStyle } from './CommunityTable.styles.js'
 
 export const CommunityTable: FC = function CommunityTable() {
-  const communities = useCommunites()
-  const selectedCommunity = useCommunity()
-  const selectedCommunityUrl = useSelectedCommunityUrl()
-  const setSelectedCommunityUrl = useSetSelectedCommunityUrl()
+  const communities = useDataStore((s) => s.communityInfo.communities)
+  const selectedCommunity = useDataStore(
+    (s) => s.communityInfo.selectedCommunity,
+  )
+  const [selectedCommunityUrl, setSelectedCommunityUrl] = useState(
+    selectedCommunity?.url ?? '',
+  )
   const [communityPages, setCommunityPages] = useState<Record<string, string>>(
     {},
   )
   const styles = useCommunityTableStyle()
-  const selectCommunity = useSelectCommunity()
+  const _selectCommunity = useDataStore((s) => s.communityInfo.selectCommunity)
+
+  const selectCommunity = useCallback(
+    async (url: string) => {
+      setSelectedCommunityUrl(url)
+      await _selectCommunity(url)
+    },
+    [_selectCommunity, setSelectedCommunityUrl],
+  )
 
   useEffect(() => {
     setSelectedCommunityUrl(selectedCommunity?.url ?? '')
   }, [selectedCommunity, setSelectedCommunityUrl])
 
   useEffect(() => {
-    for (const c of communities) {
-      const l = `<a href="${c.projectUrl}" target="_blank">${c.name}</a>`
-      setCommunityPages((p) => {
-        return {
-          ...p,
-          [c.url]: l,
-        }
-      })
+    if (communities != null) {
+      for (const c of communities) {
+        const l = `<a href="${c.projectUrl}" target="_blank">${c.name}</a>`
+        setCommunityPages((p) => {
+          return {
+            ...p,
+            [c.url]: l,
+          }
+        })
+      }
     }
   }, [communities, setCommunityPages])
 
   return (
     <>
-      {communities.length > 0 && (
+      {communities != null && communities.length > 0 && (
         <Table>
           <TableHeader>
             <TableRow>
@@ -124,10 +129,14 @@
 
 const CommunityAction: FC<CommunityMembersipStatusProps> =
   function CommunityAction({ community }) {
-    const setCommunityDashboardState = useSetCommunityDashboardState()
-    const setManagedCommunity = useSetSelectedCommunityToManage()
+    const setCommunityDashboardState = useDataStore(
+      (s) => s.communityDashboard.setState,
+    )
+    const setManagedCommunity = useDataStore(
+      (s) => s.communityManage.setCommunity,
+    )
 
     const manage = useCallback(() => {
       setManagedCommunity(community)
       setCommunityDashboardState('manage')
     }, [setCommunityDashboardState, setManagedCommunity, community])

src/renderer/src/pages/dashboard/community/DashboardCommunity.tsx

@@ -1,16 +1,9 @@
 import { Button, Card } from '@fluentui/react-components'
 import { Add32Filled, People32Filled } from '@fluentui/react-icons'
-import { FC, memo, useCallback, useMemo } from 'react'
+import { FC, memo, useMemo } from 'react'
 
-import { Message } from '../../../components/Message.js'
-import {
-  useCommunityDashboardState,
-  useCommunityJoinErrors,
-  useSetCommunityDashboardState,
-  useSetCommunityJoinErrors,
-} from '../../../store/hooks/communityHooks.js'
+import { useDataStore } from '../../../store/store.js'
 import { useCardStyles, useHeadingsStyles } from '../../../styles/index.js'
-import { useMessageStyles } from '../../../styles/messages.js'
 import { CommunityTable } from './CommunityTable.js'
 import { useDashboardCommunityStyle } from './DashboardCommunity.styles.js'
 import { CommunityDeploy } from './deploy/CommunityDeploy.js'
@@ -19,11 +12,10 @@ import { ManageCommunity } from './manage/ManageCommunity.js'
 
 export const DashboardCommunity: FC = memo(function DashboardCommunity() {
   const headerStyles = useHeadingsStyles()
-  const communityErrors = useCommunityJoinErrors()
-  const setCommunityErrors = useSetCommunityJoinErrors()
-  const messageStyles = useMessageStyles()
   const cardStyles = useCardStyles()
-  const communityDashboardState = useCommunityDashboardState()
+  const communityDashboardState = useDataStore(
+    (s) => s.communityDashboard.state,
+  )
 
   const Component: FC = useMemo(() => {
     switch (communityDashboardState) {
@@ -38,21 +30,10 @@ export const DashboardCommunity: FC = memo(function DashboardCommunity() {
     }
   }, [communityDashboardState])
 
-  const dismissError = useCallback(() => {
-    setCommunityErrors([])
-  }, [setCommunityErrors])
-
   return (
     <>
       <h2 className={headerStyles.pageHeading}>Communities</h2>
       <Card className={cardStyles.primary}>
-        {communityErrors.length > 0 && (
-          <Message
-            messages={communityErrors}
-            onClose={dismissError}
-            className={messageStyles.error}
-          />
-        )}
         <CommunityTable />
         <br />
         <Component />
@@ -64,7 +45,9 @@ export const DashboardCommunity: FC = memo(function DashboardCommunity() {
 export const DashboardCommunityButtons: FC = memo(
   function DashboardCommunityButtons() {
     const styles = useDashboardCommunityStyle()
-    const setCommunityDashboardState = useSetCommunityDashboardState()
+    const setCommunityDashboardState = useDataStore(
+      (s) => s.communityDashboard.setState,
+    )
 
     return (
       <div className={styles.buttonRow}>

src/renderer/src/pages/dashboard/community/deploy/CommunityDeploy.tsx

@@ -1,14 +1,14 @@
 import { FC, memo, useMemo } from 'react'
 
-import { useCommunityDeployState } from '../../../../store/hooks/communityHooks.js'
+import { useDataStore } from '../../../../store/store.js'
 import { Nav } from './Nav.js'
 import { ReviewDeploy } from './ReviewDeploy.js'
 import { SelectOrg } from './SelectOrg.js'
 import { SelectRepo } from './SelectRepo.js'
 import { Token } from './Token.js'
 
 export const CommunityDeploy: FC = memo(function CommunityDeploy() {
-  const state = useCommunityDeployState()
+  const state = useDataStore((s) => s.communityDeploy.state)
 
   const Component: FC = useMemo(() => {
     switch (state) {

src/renderer/src/pages/dashboard/community/deploy/Nav.tsx

@@ -6,14 +6,11 @@ import {
 } from '@fluentui/react-components'
 import { FC, memo } from 'react'
 
-import {
-  useCommunityDeployState,
-  useSetCommunityDeployState,
-} from '../../../../store/hooks/communityHooks.js'
+import { useDataStore } from '../../../../store/store.js'
 
 export const Nav: FC = memo(function Nav() {
-  const state = useCommunityDeployState()
-  const setState = useSetCommunityDeployState()
+  const state = useDataStore((s) => s.communityDeploy.state)
+  const setState = useDataStore((s) => s.communityDeploy.setState)
 
   return (
     <Breadcrumb>

src/renderer/src/pages/dashboard/community/deploy/ReviewDeploy.tsx

@@ -2,22 +2,20 @@ import { Button } from '@fluentui/react-components'
 import { FC, memo, useCallback, useState } from 'react'
 
 import { Message } from '../../../../components/Message.js'
-import {
-  useCommunityDeployOrg,
-  useCommunityDeployRepo,
-  useDeployCommunity,
-  useSetCommunityDashboardState,
-  useSetCommunityDeployState,
-} from '../../../../store/hooks/communityHooks.js'
+import { useDataStore } from '../../../../store/store.js'
 import { useMessageStyles } from '../../../../styles/index.js'
 
 export const ReviewDeploy: FC = memo(function ReviewDeploy() {
   const [loading, setLoading] = useState(false)
-  const setCommunityDashboardState = useSetCommunityDashboardState()
-  const setCommunityDeployState = useSetCommunityDeployState()
-  const selectedOrg = useCommunityDeployOrg()
-  const selectedRepo = useCommunityDeployRepo()
-  const deployCommunity = useDeployCommunity()
+  const setCommunityDashboardState = useDataStore(
+    (s) => s.communityDashboard.setState,
+  )
+  const setCommunityDeployState = useDataStore(
+    (s) => s.communityDeploy.setState,
+  )
+  const selectedOrg = useDataStore((s) => s.communityDeploy.selectedOrg)
+  const selectedRepo = useDataStore((s) => s.communityDeploy.selectedRepo)
+  const deployCommunity = useDataStore((s) => s.communityDeploy.deployCommunity)
   const messageStyles = useMessageStyles()
   const [successMessage, setSuccessMessage] = useState('')
 

src/renderer/src/pages/dashboard/community/deploy/SelectOrg.tsx

@@ -15,31 +15,27 @@ import { FC, memo, useCallback, useEffect, useState } from 'react'
 
 import { Loader } from '../../../../components/Loader.js'
 import { LoginVerification } from '../../../../components/LoginVerification.js'
-import {
-  useCommunityDeployFetchOrgs,
-  useCommunityDeployOrg,
-  useCommunityDeployOrgs,
-  useSetCommunityDashboardState,
-  useSetCommunityDeployOrg,
-  useSetCommunityDeployState,
-} from '../../../../store/hooks/communityHooks.js'
-import { useStartLoginFlow } from '../../../../store/hooks/userHooks.js'
+import { useDataStore } from '../../../../store/store.js'
 import { useButtonStyles } from '../../../../styles/index.js'
 import { useCommunityDeployStyle } from './styles.js'
 
 export const SelectOrg: FC = memo(function SelectOrg() {
   const buttonStyles = useButtonStyles()
-  const orgs = useCommunityDeployOrgs()
-  const getOrgs = useCommunityDeployFetchOrgs()
-  const selectedOrg = useCommunityDeployOrg()
-  const setSelectedOrg = useSetCommunityDeployOrg()
+  const orgs = useDataStore((s) => s.communityDeploy.orgs)
+  const getOrgs = useDataStore((s) => s.communityDeploy.fetchOrgs)
+  const selectedOrg = useDataStore((s) => s.communityDeploy.selectedOrg)
+  const setSelectedOrg = useDataStore((s) => s.communityDeploy.selectOrg)
   const styles = useCommunityDeployStyle()
-  const setCommunityDashboardState = useSetCommunityDashboardState()
-  const setCommunityDeployState = useSetCommunityDeployState()
+  const setCommunityDashboardState = useDataStore(
+    (s) => s.communityDashboard.setState,
+  )
+  const setCommunityDeployState = useDataStore(
+    (s) => s.communityDeploy.setState,
+  )
   const [dataLoading, setDataLoading] = useState(false)
   const [verification, setVerification] = useState<Verification | null>(null)
   const [vericationLoading, setVerificationLoading] = useState(false)
-  const startLoginFlow = useStartLoginFlow()
+  const startLoginFlow = useDataStore((s) => s.userInfo.startLoginFlow)
 
   const loadData = useCallback(async () => {
     setDataLoading(true)