Project screen improvements, date sort, delete

Author: glastonbridge

src/ProjectPageRouting.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react"
 import { useRouterState } from "./router-hooks"
-import ProjectBrowser from "./project-persistence/ProjectBrowser";
+import ProjectBrowser from "./project/ProjectBrowser";
 
 interface ProjectPageRoutingProps {
     children: ReactNode

src/editor/EditorContainer.tsx

@@ -26,23 +26,26 @@ const EditorContainer = ({ selection }: EditorContainerProps) => {
     setSettings({ ...settings, warnForApiUnsupportedByDevice: false });
   }, [setSettings, settings]);
   // Note fileInfo is not updated for ordinary text edits.
-  const [fileInfo, _] = useProjectFileText(selection.file);
+  const [fileInfo, onFileChange] = useProjectFileText(selection.file);
   const { ydoc, getFile } = useProjectStorage();
 
   const ytext = getFile(selection.file);
 
   // TODO: Overengineered until we have sync in mind
   const awareness = useMemo(() => {
     if (!ydoc) return null;
-    return new Awareness(ydoc)
+    return new Awareness(ydoc);
   }, [ydoc]);
 
   if (ytext === null) return null;
   if (fileInfo === undefined) {
     return null;
   }
 
-  awareness!.setLocalStateField("user", { name: "micro:bit tester", color: "yellow" });
+  awareness!.setLocalStateField("user", {
+    name: "micro:bit tester",
+    color: "yellow",
+  });
 
   // TODO: represent fileInfo in project?
 
@@ -52,6 +55,7 @@ const EditorContainer = ({ selection }: EditorContainerProps) => {
   ) : (
     <Editor
       selection={selection}
+      onChange={onFileChange}
       fontSize={settings.fontSize}
       codeStructureOption={settings.codeStructureHighlight}
       parameterHelpOption={settings.parameterHelp}

src/editor/codemirror/CodeMirror.tsx

@@ -47,6 +47,7 @@ import { yCollab } from "y-codemirror.next";
 
 interface CodeMirrorProps {
   className?: string;
+  onChange: (doc: string) => void;
   text: Y.Text;
   awareness: Awareness;
   selection: WorkbenchSelection;
@@ -67,6 +68,7 @@ interface CodeMirrorProps {
  */
 const CodeMirror = ({
   className,
+  onChange,
   text,
   awareness,
   selection,
@@ -121,6 +123,7 @@ const CodeMirror = ({
       textRef.current = text;
       const notify = EditorView.updateListener.of((update) => {
         if (update.docChanged) {
+          onChange(update.state.sliceDoc(0));
           setEditorInfo({
             undo: undoDepth(view.state),
             redo: redoDepth(view.state),
@@ -182,6 +185,7 @@ const CodeMirror = ({
     client,
     intl,
     logging,
+    onChange,
     options,
     setActiveEditor,
     setEditorInfo,
@@ -192,7 +196,7 @@ const CodeMirror = ({
     apiReferenceMap,
     device,
     disableV2OnlyFeaturesWarning,
-    text
+    text,
   ]);
   useEffect(() => {
     // Do this separately as we don't want to destroy the view whenever options needed for initialization change.
@@ -242,7 +246,7 @@ const CodeMirror = ({
     uri,
     apiReferenceMap,
     device,
-    disableV2OnlyFeaturesWarning
+    disableV2OnlyFeaturesWarning,
   ]);
 
   const { location } = selection;

src/project-persistence/ProjectBrowser.tsx

@@ -0,0 +1,74 @@
+import { CloseButton, GridItem, Heading, HStack, Text } from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { ProjectEntry } from "./project-list-db";
+import { timeAgo } from "./utils";
+
+interface ProjectItemProps {
+    project: ProjectEntry;
+    loadProject: (projectId: string) => void;
+    deleteProject: (projectId: string) => void;
+}
+
+interface ProjectItemBaseProps {
+  children: ReactNode;
+  onClick: () => void;
+}
+
+const ProjectItemBase = ({ onClick, children }: ProjectItemBaseProps) => (
+  <GridItem
+    role="button"
+    bgColor="white"
+    display="block"
+    position="relative"
+    mx={[0, 2, 5]}
+    my={[0, 2, 10]}
+    borderRadius={[0, "20px"]}
+    borderWidth={[null, 1]}
+    borderBottomWidth={1}
+    borderColor={[null, "gray.300"]}
+    py={[5, 8]}
+    px={[3, 5, 8]}
+    w="21rem"
+    h="15rem"
+    alignItems="stretch"
+    onClick={onClick}
+  >
+    {children}
+  </GridItem>
+);
+
+export const ProjectItem = ({project, loadProject, deleteProject}: ProjectItemProps) => (
+    <ProjectItemBase onClick={() => loadProject(project.id)}>
+          <HStack justifyContent="space-between" w="100%">
+            <Heading as="h2" isTruncated>
+              {project.projectName}
+            </Heading>
+          </HStack>
+          <Text size="lg">{timeAgo(new Date(project.modifiedDate))}</Text>
+
+          <CloseButton
+            position="absolute"
+            right={4}
+            top={4}
+            onClick={(e) => {
+              deleteProject(project.id);
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          />
+        </ProjectItemBase>
+)
+
+interface AddProjectItemProps {
+    newProject: () => void;
+}
+
+export const AddProjectItem = ({newProject}: AddProjectItemProps) =>
+    <ProjectItemBase
+        onClick={newProject}
+      >
+        <HStack justifyContent="space-between" w="100%">
+          <Heading as="h2">New project</Heading>
+        </HStack>
+        <Text size="lg">Click to create</Text>
+      </ProjectItemBase>

src/project-persistence/ProjectItem.tsx

@@ -26,6 +26,7 @@ interface ProjectContextValue {
   projectList: ProjectList | null;
   newStoredProject: () => Promise<NewStoredDoc>;
   restoreStoredProject: (id: string) => Promise<RestoredStoredDoc>;
+  deleteProject: (id: string) => Promise<void>;
   ydoc: Y.Doc | null;
   awareness: Awareness | null;
   getFile: (filename: string) => Y.Text | null;
@@ -54,7 +55,9 @@ export function ProjectStorageProvider({
     projectId: string
   ) => Promise<RestoredStoredDoc> = useCallback(
     async (projectId: string) => {
-      const newProjectStore = new ProjectStore(projectId);
+      const newProjectStore = new ProjectStore(projectId, () =>
+        modifyProject(projectId)
+      );
       await newProjectStore.init();
       setProjectStore(newProjectStore);
       return {
@@ -77,33 +80,46 @@ export function ProjectStorageProvider({
         });
         return Promise.resolve();
       });
-      const newProjectStore = new ProjectStore(newProjectId);
+      const newProjectStore = new ProjectStore(newProjectId, () =>
+        modifyProject(newProjectId)
+      );
       await newProjectStore.init();
       setProjectStore(newProjectStore);
       return { ydoc: newProjectStore.ydoc, id: newProjectId };
     }, []);
 
+  const deleteProject: (id: string) => Promise<void> = useCallback(
+    async (id) => {
+      await withProjectDb("readwrite", async (store) => {
+        store.delete(id);
+        return refreshProjects();
+      });
+    },
+    []
+  );
+
   // TODO: Get rid of debug hooks
   (window as unknown as any).projectList = projectList;
   (window as unknown as any).newProjectStore = newStoredProject;
   (window as unknown as any).restoreProjectStore = restoreStoredProject;
+  (window as unknown as any).deleteProject = deleteProject;
+
+  const refreshProjects = async () => {
+    const projectList = await withProjectDb("readonly", async (store) => {
+      const projectList = await new Promise((res, rej) => {
+        const query = store.index("modifiedDate").getAll();
+        query.onsuccess = () => res(query.result);
+      });
+      return projectList;
+    });
+    setProjectList((projectList as ProjectList).reverse());
+  };
 
   useEffect(() => {
     if (window.navigator.storage?.persist) {
       window.navigator.storage.persist();
     }
-    const getProjectsAsync = async () => {
-      const projectList = await withProjectDb("readonly", async (store) => {
-        const projectList = await new Promise((res, rej) => {
-          const query = store.index("modifiedDate").getAll();
-          query.onsuccess = () => res(query.result);
-          query.onerror = rej;
-        });
-        return projectList;
-      });
-      setProjectList((projectList as ProjectList).reverse());
-    };
-    void getProjectsAsync();
+    void refreshProjects();
   }, []);
 
   // Helper to access files
@@ -116,6 +132,24 @@ export function ProjectStorageProvider({
     return files.get(filename)!;
   };
 
+  const modifyProject = useCallback(
+    async (id: string) => {
+      await withProjectDb("readwrite", async (store) => {
+        await new Promise((res, rej) => {
+          const getQuery = store.get(id);
+          getQuery.onsuccess = () => {
+            const putQuery = store.put({
+              ...getQuery.result,
+              modifiedDate: new Date().valueOf(),
+            });
+            putQuery.onsuccess = () => res(getQuery.result);
+          };
+        });
+      });
+    },
+    [projectStore]
+  );
+
   const setProjectName = useCallback(
     async (id: string, projectName: string) => {
       await withProjectDb("readwrite", async (store) => {
@@ -126,7 +160,6 @@ export function ProjectStorageProvider({
             modifiedDate: new Date().valueOf(),
           });
           query.onsuccess = () => res(query.result);
-          query.onerror = rej;
         });
       });
     },
@@ -143,6 +176,7 @@ export function ProjectStorageProvider({
         getFile,
         newStoredProject,
         restoreStoredProject,
+        deleteProject,
         setProjectName,
       }}
     >