extract useLocalProjects

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<Project[]>([]);
+  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<boolean> {
     try {
       await Project.createProject(name);

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<Project[]>([]);
+
+  function refreshProjects() {
+    setProjects(Project.getProjects());
+  }
+
+  React.useEffect(() => {
+    refreshProjects();
+  }, []);
+
+  return [projects, refreshProjects];
+}