private/shared selector

app/src/components/DraftView.tsx

@@ -20,6 +20,7 @@ import InputModal from './InputModal'
 import DraftMenu from './DraftMenu'
 import { useLocation } from 'wouter'
 import ConfirmModal from './ConfirmModal'
+import ShareSelector from './ShareSelector'
 
 const log = debug('DraftView')
 
@@ -76,6 +77,7 @@ export default function DraftView(props: DraftViewProps) {
   let [hasPendingChanges, setHasPendingChanges] = useState<boolean>(
     draft.id !== 'stack' && upwell.rootDraft.id !== draft.parent_id
   )
+  const [isShared, setIsShared] = useState<boolean>(maybeDraft.shared)
 
   useEffect(() => {
     let upwell = documents.get(id)
@@ -217,6 +219,24 @@ export default function DraftView(props: DraftViewProps) {
     goToDraft('stack')
   }
 
+  const handleShareSelect = () => {
+    const upwell = documents.get(id)
+    let draftInstance = upwell.get(draft.id)
+    draftInstance.shared = true
+    setIsShared(true)
+    documents.save(id)
+    documents.draftChanged(upwell.id, draft.id)
+  }
+
+  const handlePrivateSelect = () => {
+    const upwell = documents.get(id)
+    let draftInstance = upwell.get(draft.id)
+    draftInstance.shared = false
+    setIsShared(false)
+    documents.save(id)
+    documents.draftChanged(upwell.id, draft.id)
+  }
+
   function goToDraft(did: string) {
     documents
       .save(id)
@@ -384,6 +404,11 @@ export default function DraftView(props: DraftViewProps) {
               >
                 Merge
               </Button>
+              <ShareSelector
+                isShared={isShared}
+                onShareSelect={handleShareSelect}
+                onPrivateSelect={handlePrivateSelect}
+              />
               <DraftMenu
                 onEditName={handleEditName}
                 onDelete={handleDeleteDraft}

app/src/components/ShareSelector.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import MenuItem from '@mui/material/MenuItem'
+import FormControl from '@mui/material/FormControl'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+
+enum ShareState {
+  PRIVATE = 'PRIVATE',
+  LISTED = 'LISTED',
+}
+
+type Props = {
+  isShared: boolean
+  onShareSelect: Function
+  onPrivateSelect: Function
+}
+
+export default function ShareSelector({
+  isShared,
+  onShareSelect,
+  onPrivateSelect,
+}: Props) {
+  const [shareState, setShareState] = React.useState(
+    isShared ? ShareState.LISTED : ShareState.PRIVATE
+  )
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const { value } = event.target
+
+    switch (value) {
+      case ShareState.PRIVATE:
+        onPrivateSelect()
+        setShareState(ShareState.PRIVATE)
+        break
+      case ShareState.LISTED:
+        onShareSelect()
+        setShareState(ShareState.LISTED)
+        break
+    }
+  }
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 120, margin: 0 }} size="small">
+        <Select
+          value={shareState}
+          onChange={handleChange}
+          sx={{ height: 36.5 }}
+        >
+          <MenuItem value={ShareState.PRIVATE}>Private</MenuItem>
+          <MenuItem disabled>Share with...</MenuItem>
+          <MenuItem value={ShareState.LISTED}>Shared</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+  )
+}