diff --git a/src/components/projects/ProjectList/ProjectList.js b/src/components/projects/ProjectList/ProjectList.js index 4b2fb100..0dc6b8d1 100644 --- a/src/components/projects/ProjectList/ProjectList.js +++ b/src/components/projects/ProjectList/ProjectList.js @@ -43,6 +43,7 @@ import useCreateProjectDialog from './useCreateProjectDialog'; import useDeleteProjectDialog from './useDeleteProjectDialog'; import useRenameProjectDialog from './useRenameProjectDialog'; import useProjectIndex from './useProjectIndex'; +import useLocalProjects from './useLocalProjects'; import { type Projects } from './__generated__/Projects'; import { @@ -156,7 +157,7 @@ function ProjectList(_props: Props) { const auth = useAuth(); const intl = useIntl(); - const [projects, setProjects] = hooks.useAsyncState([]); + const [projects, refreshProjects] = useLocalProjects(); const remoteProjectsQuery = useProjectsQuery(); const remoteProjects = remoteProjectsQuery.data?.projects ?? []; @@ -183,14 +184,6 @@ function ProjectList(_props: Props) { }); } - function refreshProjects() { - setProjects(Project.getProjects()); - } - - React.useEffect(() => { - refreshProjects(); - }, []); - async function confirmCreateProject(name: string): Promise { try { await Project.createProject(name); diff --git a/src/components/projects/ProjectList/useLocalProjects.js b/src/components/projects/ProjectList/useLocalProjects.js new file mode 100644 index 00000000..8de6a172 --- /dev/null +++ b/src/components/projects/ProjectList/useLocalProjects.js @@ -0,0 +1,21 @@ +// @flow + +import * as React from 'react'; + +import * as hooks from '../../misc/hooks'; + +import { Project } from '../../../core/store/projects'; + +export default function useLocalProjects(): [Project[], () => void] { + const [projects, setProjects] = hooks.useAsyncState([]); + + function refreshProjects() { + setProjects(Project.getProjects()); + } + + React.useEffect(() => { + refreshProjects(); + }, []); + + return [projects, refreshProjects]; +}