Remix projects pending operations (#4970)

* add motion

* fetcher with operation

* operation

* use the new fetchers

* split storage

* active operation divs

* cleanup operations

* types

* op with key

* use v3_fetcherPersist

* no need to check null

* separate operation component

* update naming

* flip sorting

Author: ruggi

utopia-remix/app/components/projectActionContextMenu.tsx

@@ -1,12 +1,12 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
-import { useFetcher } from '@remix-run/react'
 import React from 'react'
 import { useProjectsStore } from '../store'
 import { contextMenuDropdown, contextMenuItem } from '../styles/contextMenu.css'
 import { sprinkles } from '../styles/sprinkles.css'
-import { ProjectWithoutContent } from '../types'
+import { ProjectWithoutContent, operation } from '../types'
 import { assertNever } from '../util/assertNever'
 import { projectEditorLink } from '../util/links'
+import { useFetcherWithOperation } from '../hooks/useFetcherWithOperation'
 
 type ContextMenuEntry =
   | {
@@ -16,41 +16,51 @@ type ContextMenuEntry =
   | 'separator'
 
 export const ProjectContextMenu = React.memo(({ project }: { project: ProjectWithoutContent }) => {
-  const fetcher = useFetcher()
+  const deleteFetcher = useFetcherWithOperation(operation(project, 'delete'))
+  const destroyFetcher = useFetcherWithOperation(operation(project, 'destroy'))
+  const restoreFetcher = useFetcherWithOperation(operation(project, 'restore'))
+  const renameFetcher = useFetcherWithOperation(operation(project, 'rename'))
+
   const selectedCategory = useProjectsStore((store) => store.selectedCategory)
 
   const deleteProject = React.useCallback(
     (projectId: string) => {
-      fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/delete` })
+      deleteFetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/delete` })
     },
-    [fetcher],
+    [deleteFetcher],
   )
 
   const destroyProject = React.useCallback(
     (projectId: string) => {
       const ok = window.confirm('Are you sure? The project contents will be deleted permanently.')
       if (ok) {
-        fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/destroy` })
+        destroyFetcher.submit(
+          {},
+          { method: 'POST', action: `/internal/projects/${projectId}/destroy` },
+        )
       }
     },
-    [fetcher],
+    [destroyFetcher],
   )
 
   const restoreProject = React.useCallback(
     (projectId: string) => {
-      fetcher.submit({}, { method: 'POST', action: `/internal/projects/${projectId}/restore` })
+      restoreFetcher.submit(
+        {},
+        { method: 'POST', action: `/internal/projects/${projectId}/restore` },
+      )
     },
-    [fetcher],
+    [restoreFetcher],
   )
 
   const renameProject = React.useCallback(
     (projectId: string, newTitle: string) => {
-      fetcher.submit(
+      renameFetcher.submit(
         { title: newTitle },
         { method: 'POST', action: `/internal/projects/${projectId}/rename` },
       )
     },
-    [fetcher],
+    [renameFetcher],
   )
 
   const menuEntries = React.useMemo((): ContextMenuEntry[] => {

utopia-remix/app/hooks/useFetcherWithOperation.tsx

@@ -0,0 +1,44 @@
+import { useFetcher, useFetchers } from '@remix-run/react'
+import React from 'react'
+import { useProjectsStore } from '../store'
+import { Operation } from '../types'
+
+const operationFetcherKeyPrefix = 'operation-'
+
+/**
+ * This is a specialized that returns a fetcher that also updates a given project operation.
+ */
+export function useFetcherWithOperation(operation: Operation) {
+  const key = `operation-${operation.projectId}-${operation.type}`
+
+  const fetcher = useFetcher({ key: key })
+  const addOperation = useProjectsStore((store) => store.addOperation)
+
+  const submit = React.useCallback(
+    (data: any, options: { method: 'GET' | 'PUT' | 'POST' | 'DELETE'; action: string }) => {
+      addOperation(operation, key)
+      fetcher.submit(data, options)
+    },
+    [fetcher, addOperation],
+  )
+
+  return {
+    ...fetcher,
+    submit: submit,
+  }
+}
+
+export function useCleanupOperations() {
+  const fetchers = useFetchers()
+  const removeOperation = useProjectsStore((store) => store.removeOperation)
+
+  React.useEffect(() => {
+    for (const fetcher of fetchers) {
+      const isOperationFetcher = fetcher.key.startsWith(operationFetcherKeyPrefix)
+      const isNotSubmitting = fetcher.data != null && fetcher.state !== 'submitting'
+      if (isOperationFetcher && isNotSubmitting) {
+        removeOperation(fetcher.key)
+      }
+    }
+  }, [fetchers])
+}

utopia-remix/app/routes/projects.tsx

@@ -3,20 +3,22 @@ import {
   Trigger as DropdownMenuTrigger,
 } from '@radix-ui/react-dropdown-menu'
 import {
+  CubeIcon,
   DashboardIcon,
   DotsHorizontalIcon,
   HamburgerMenuIcon,
   MagnifyingGlassIcon,
   TrashIcon,
-  CubeIcon,
 } from '@radix-ui/react-icons'
-import React from 'react'
 import { LoaderFunctionArgs, json } from '@remix-run/node'
 import { useFetcher, useLoaderData } from '@remix-run/react'
+import { motion } from 'framer-motion'
 import moment from 'moment'
 import { UserDetails } from 'prisma-client'
+import React from 'react'
 import { ProjectContextMenu } from '../components/projectActionContextMenu'
 import { SortingContextMenu } from '../components/sortProjectsContextMenu'
+import { useCleanupOperations } from '../hooks/useFetcherWithOperation'
 import { useIsDarkMode } from '../hooks/useIsDarkMode'
 import { listDeletedProjects, listProjects } from '../models/project.server'
 import { getCollaborators } from '../models/projectCollaborators.server'
@@ -25,14 +27,14 @@ import { button } from '../styles/button.css'
 import { newProjectButton } from '../styles/newProjectButton.css'
 import { projectCategoryButton, userName } from '../styles/sidebarComponents.css'
 import { sprinkles } from '../styles/sprinkles.css'
-import { Collaborator, CollaboratorsByProject, ProjectWithoutContent } from '../types'
+import { Collaborator, CollaboratorsByProject, Operation, ProjectWithoutContent } from '../types'
 import { requireUser } from '../util/api.server'
 import { assertNever } from '../util/assertNever'
+import { auth0LoginURL } from '../util/auth0.server'
 import { projectEditorLink } from '../util/links'
 import { when } from '../util/react-conditionals'
 import { UnknownPlayerName, multiplayerInitialsFromName } from '../util/strings'
 import { useProjectMatchesQuery, useSortCompareProject } from '../util/use-sort-compare-project'
-import { auth0LoginURL } from '../util/auth0.server'
 
 const SortOptions = ['title', 'dateCreated', 'dateModified'] as const
 export type SortCriteria = (typeof SortOptions)[number]
@@ -74,6 +76,8 @@ export async function loader(args: LoaderFunctionArgs) {
 }
 
 const ProjectsPage = React.memo(() => {
+  useCleanupOperations()
+
   const data = useLoaderData() as unknown as {
     projects: ProjectWithoutContent[]
     user: UserDetails
@@ -134,6 +138,7 @@ const ProjectsPage = React.memo(() => {
         <TopActionBar />
         <ProjectsHeader projects={filteredProjects} />
         <Projects projects={filteredProjects} collaborators={data.collaborators} />
+        <ActiveOperations />
       </div>
     </div>
   )
@@ -205,12 +210,11 @@ const Sidebar = React.memo(({ user }: { user: UserDetails }) => {
             flexDirection: 'row',
             alignItems: 'center',
             border: `1px solid ${isSearchFocused ? '#0075F9' : 'transparent'}`,
-            borderBottomColor: isSearchFocused ? '#0075F9' : 'gray',
+            borderBottom: `1px solid ${isSearchFocused ? '#0075F9' : 'gray'}`,
             borderRadius: isSearchFocused ? 3 : undefined,
             overflow: 'visible',
             padding: '0px 14px',
             gap: 10,
-            borderBottom: '1px solid gray',
           }}
         >
           <MagnifyingGlassIcon />
@@ -819,3 +823,78 @@ const ProjectCardActions = React.memo(({ project }: { project: ProjectWithoutCon
   )
 })
 ProjectCardActions.displayName = 'ProjectCardActions'
+
+const ActiveOperations = React.memo(() => {
+  const operations = useProjectsStore((store) =>
+    store.operations.sort((a, b) => b.startedAt - a.startedAt),
+  )
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: 0,
+        right: 0,
+        margin: 10,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 10,
+      }}
+    >
+      {operations.map((operation) => {
+        return <ActiveOperation operation={operation} key={operation.key} />
+      })}
+    </div>
+  )
+})
+ActiveOperations.displayName = 'ActiveOperations'
+
+const ActiveOperation = React.memo(({ operation }: { operation: Operation }) => {
+  function getOperationVerb(op: Operation) {
+    switch (op.type) {
+      case 'delete':
+        return 'Deleting'
+      case 'destroy':
+        return 'Destroying'
+      case 'rename':
+        return 'Renaming'
+      case 'restore':
+        return 'Restoring'
+      default:
+        assertNever(op.type)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        padding: 10,
+        display: 'flex',
+        gap: 10,
+        alignItems: 'center',
+        animation: 'spin 2s linear infinite',
+      }}
+      className={sprinkles({
+        boxShadow: 'shadow',
+        borderRadius: 'small',
+        backgroundColor: 'primary',
+        color: 'white',
+      })}
+    >
+      <motion.div
+        style={{
+          width: 8,
+          height: 8,
+        }}
+        className={sprinkles({ backgroundColor: 'white' })}
+        initial={{ rotate: 0 }}
+        animate={{ rotate: 100 }}
+        transition={{ ease: 'linear', repeatType: 'loop', repeat: Infinity }}
+      />
+      <div>
+        {getOperationVerb(operation)} project {operation.projectName}
+      </div>
+    </div>
+  )
+})
+ActiveOperation.displayName = 'ActiveOperation'