Fold delete

firestore.rules

@@ -45,7 +45,7 @@ service cloud.firestore {
 
     match /folds/{foldId} {
       allow read;
-      allow update: if request.auth.uid == resource.data.curatorId;
+      allow update, delete: if request.auth.uid == resource.data.curatorId;
     }
 
     match /folds/{foldId}/followers/{userId} {

functions/src/index.ts

@@ -12,6 +12,7 @@ export * from './create-contract'
 export * from './create-user'
 export * from './create-fold'
 export * from './on-fold-follow'
+export * from './on-fold-delete'
 export * from './unsubscribe'
 export * from './update-contract-metrics'
 export * from './update-user-metrics'

functions/src/on-fold-delete.ts

@@ -0,0 +1,10 @@
+import * as functions from 'firebase-functions'
+
+export const onFoldDelete = functions.firestore
+  .document('folds/{foldId}')
+  .onDelete(async (change, context) => {
+    const snapshot = await change.ref.collection('followers').get()
+
+    // Delete followers sub-collection.
+    await Promise.all(snapshot.docs.map((doc) => doc.ref.delete()))
+  })

web/components/edit-fold-button.tsx

@@ -5,13 +5,16 @@ import { PencilIcon } from '@heroicons/react/outline'
 
 import { Fold } from '../../common/fold'
 import { parseWordsAsTags } from '../../common/util/parse'
-import { updateFold } from '../lib/firebase/folds'
+import { deleteFold, updateFold } from '../lib/firebase/folds'
 import { toCamelCase } from '../lib/util/format'
 import { Spacer } from './layout/spacer'
 import { TagsList } from './tags-list'
+import { useRouter } from 'next/router'
 
 export function EditFoldButton(props: { fold: Fold; className?: string }) {
   const { fold, className } = props
+  const router = useRouter()
+
   const [name, setName] = useState(fold.name)
   const [about, setAbout] = useState(fold.about ?? '')
 
@@ -106,6 +109,20 @@ export function EditFoldButton(props: { fold: Fold; className?: string }) {
           <Spacer h={4} />
 
           <div className="modal-action">
+            <label
+              htmlFor="edit"
+              onClick={() => {
+                if (confirm('Are you sure you want to delete this fold?')) {
+                  deleteFold(fold)
+                  router.replace('/folds')
+                }
+              }}
+              className={clsx(
+                'btn btn-sm btn-outline hover:bg-red-500 hover:border-red-500 mr-auto self-center'
+              )}
+            >
+              Delete
+            </label>
             <label htmlFor="edit" className={clsx('btn')}>
               Cancel
             </label>

web/lib/firebase/folds.ts

@@ -26,6 +26,10 @@ export function updateFold(fold: Fold, updates: Partial<Fold>) {
   return updateDoc(doc(foldCollection, fold.id), updates)
 }
 
+export function deleteFold(fold: Fold) {
+  return deleteDoc(doc(foldCollection, fold.id))
+}
+
 export async function listAllFolds() {
   return getValues<Fold>(foldCollection)
 }