Handle deletion of drafts

NEARBuilders · Jan 24, 2024 · cceb7a8 · cceb7a8
1 parent e6921e3
commit cceb7a8
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 31 deletions.
diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
@@ -490,6 +490,7 @@ const LabelSelect = styled.div`
   }
 `;
 
+// To handle ifram refresh in order to trigger initialText change
 const [postUUID, setPostUUID] = useState(generateUID());
 const memoizedPostUUID = useMemo(() => postUUID, [postUUID]);
 
@@ -499,49 +500,122 @@ useEffect(() => {
   }
 }, [postContent]);
 
-const setPostToTest = () => {
-  textareaInputHandler("Test");
-  setPostUUID(generateUID());
+const avatarComponent = useMemo(() => {
+  return (
+    <div className="d-flex align-items-start gap-2">
+      <Avatar accountId={context.accountId} />
+      <div>
+        <p className="mb-0 text-white">{context.accountId}</p>
+      </div>
+    </div>
+  );
+}, [context.accountId]);
+
+// for drafts
+const [showDraftsModal, setShowDraftsModal] = useState(false);
+const [draftEditMode, setDraftEditMode] = useState(false);
+const [checkedDrafts, setCheckDrafts] = useState([]);
+
+// handle deletion of drafts
+const handleDraftDelete = () => {
+  const savedDrafts = Storage.privateGet("savedDrafts") || "";
+  const drafts = JSON.parse(savedDrafts);
+  const newDrafts = drafts.filter((draft, i) => !checkedDrafts.includes(i));
+  Storage.privateSet("savedDrafts", JSON.stringify(newDrafts));
+  setCheckDrafts([]);
 };
 
+// handle draft save
 const onSaveDraft = () => {
   const savedDrafts = Storage.privateGet("savedDrafts") || "";
   const drafts = JSON.parse(savedDrafts) || [];
   drafts.push(postContent);
   Storage.privateSet("savedDrafts", JSON.stringify(drafts));
 };
 
-const renderDrafts = () => {
+const DraftLabel = styled.span`
+  display: inline-flex;
+  padding: 12px;
+  align-items: center;
+  gap: 8px;
+
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 170%; /* 27.2px */
+`;
+
+const DraftItem = ({ draft, checked, isEdit }) => {
+  return (
+    <div
+      style={{
+        cursor: "pointer",
+        borderBottom: "1px solid #414247",
+        color: "#fff",
+      }}
+      className="d-flex align-items-center"
+    >
+      <DraftLabel className="w-100 text-truncate">
+        {isEdit && (
+          <i className={`bi bi-${checked ? "check-square" : "square"}`}></i>
+        )}
+        {draft}
+      </DraftLabel>
+    </div>
+  );
+};
+
+const RenderDrafts = () => {
   const savedDrafts = Storage.privateGet("savedDrafts") || "";
-  const drafts = JSON.parse(savedDrafts) || [];
+  const drafts = JSON.parse(savedDrafts);
+
+  const handleDraftSelect = (draft) => {
+    textareaInputHandler(draft);
+    setPostUUID(generateUID());
+    setShowDraftsModal(false);
+    setView("editor");
+  };
 
   return (
     <div className="d-flex flex-column gap-3">
       {drafts.map((draft, i) => (
-        <div
-          className="w-100 border-light-subtle border-bottom pb-1"
-          key={`draft-${i}`}
-        >
-          {draft}
+        <div key={`draft-${i}`} onClick={() => handleDraftSelect(draft)}>
+          <DraftItem draft={draft} />
         </div>
       ))}
-      {drafts.length === 0 && <p className="text-white">No drafts saved</p>}
+      {drafts.length === 0 && <p style={{ color: "#fff" }}>No drafts saved</p>}
     </div>
   );
 };
 
-const avatarComponent = useMemo(() => {
+const EditDrafts = () => {
+  const savedDrafts = Storage.privateGet("savedDrafts") || "";
+  const drafts = JSON.parse(savedDrafts);
+
+  const handleDraftSelect = (draftIndex) => {
+    if (checkedDrafts.includes(draftIndex)) {
+      setCheckDrafts(checkedDrafts.filter((draft) => draft !== draftIndex));
+    } else {
+      setCheckDrafts([...checkedDrafts, draftIndex]);
+    }
+  };
+
   return (
-    <div className="d-flex align-items-start gap-2">
-      <Avatar accountId={context.accountId} />
-      <div>
-        <p className="mb-0 text-white">{context.accountId}</p>
-      </div>
+    <div className="d-flex flex-column gap-3">
+      {drafts.map((draft, i) => (
+        <div key={`draft-${i}`} onClick={() => handleDraftSelect(i)}>
+          <DraftItem
+            isEdit={true}
+            draft={draft}
+            checked={checkedDrafts.includes(i)}
+          />
+        </div>
+      ))}
+      {drafts.length === 0 && <p style={{ color: "#fff" }}>No drafts saved</p>}
     </div>
   );
-}, [context.accountId]);
-
-const [showDraftsModal, setShowDraftsModal] = useState(false);
+};
 
 return (
   <div className="d-flex flex-column">
@@ -555,11 +629,29 @@ return (
     <DraftModal
       open={showDraftsModal}
       onOpenChange={() => setShowDraftsModal(!showDraftsModal)}
-      children={
-        <div>
-          <renderDrafts />
-        </div>
+      editButton={
+        draftEditMode ? (
+          <div className="d-flex align-items-center gap-3">
+            <Button type="icon" variant="outline" onClick={handleDraftDelete}>
+              <i className="bi bi-trash"></i>
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => setDraftEditMode(!draftEditMode)}
+            >
+              Done
+            </Button>
+          </div>
+        ) : (
+          <Button
+            variant="outline"
+            onClick={() => setDraftEditMode(!draftEditMode)}
+          >
+            Edit
+          </Button>
+        )
       }
+      children={<div>{draftEditMode ? <EditDrafts /> : <RenderDrafts />}</div>}
     />
     <PostCreator>
       <div className="d-flex align-items-center justify-content-between">

diff --git a/apps/builddao/widget/components/Checkbox.jsx b/apps/builddao/widget/components/Checkbox.jsx
@@ -7,6 +7,8 @@ const CheckboxLabel = styled.label`
   padding: 12px;
   align-items: center;
   gap: 8px;
+  cursor: pointer;
+  max-width: 100%;
 
   color: #fff;
   font-size: 16px;
@@ -15,20 +17,20 @@ const CheckboxLabel = styled.label`
   line-height: 170%; /* 27.2px */
 `;
 
-function Checkbox({ value, onChange, label }) {
+function Checkbox({ className, value, onChange, label }) {
   return (
-    <div key={`Checkbox-${label ?? "No-label"}`}>
+    <div key={`Checkbox-${label ?? "No-label"}`} style={{ maxWidth: "100%" }}>
       <CheckboxLabel>
         <CheckboxInput type="checkbox" checked={value} onChange={onChange} />
         {value ? (
-          <i className="bi bi-check-square"></i>
+          <i style={{ cursor: "pointer" }} className="bi bi-check-square"></i>
         ) : (
-          <i className="bi bi-square"></i>
+          <i style={{ cursor: "pointer" }} className="bi bi-square"></i>
         )}
-        {label}
+        <span className={className}>{label}</span>
       </CheckboxLabel>
     </div>
   );
 }
 
-return { Checkbox };
+return { Checkbox };
diff --git a/apps/builddao/widget/components/modals/DraftModal.jsx b/apps/builddao/widget/components/modals/DraftModal.jsx
@@ -25,6 +25,12 @@ const Content = styled.div`
   background: #23242b;
   border-radius: 16px;
   color: white;
+
+  @media screen and (max-width: 768px) {
+    max-width: 90%;
+    min-width: 50%;
+    width: 100%;
+  }
 `;
 
 const NoButton = styled.button`
@@ -52,6 +58,7 @@ function DraftModal({
   onOpenChange,
   toggle,
   toggleContainerProps,
+  editButton,
 }) {
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
@@ -68,7 +75,7 @@ function DraftModal({
                     <i className="bi bi-chevron-left"></i> Drafts
                   </p>
                 </Dialog.Trigger>
-                <Button variant="outline">Edit</Button>
+                {editButton}
               </div>
               {children}
             </Content>