Show modal for delete squeak (#2125)

* Got delete modal working for squeak card * Got delete squeak modal working in squeak page * Update frontend build
2026-08-13 12:33:25 +02:00 · 2022-04-12 03:26:05 -04:00 · 2022-04-12 03:26:05 -04:00 · fd3d4229fb
commit fd3d4229fb
parent 78275176d4
10 changed files with 155 additions and 40 deletions
--- a/frontend/src/components/SqueakCard/index.js
+++ b/frontend/src/components/SqueakCard/index.js
@ -10,17 +10,18 @@ import { ICON_REPLY, ICON_RETWEET,
 import axios from 'axios'
 import {API_URL} from '../../config'
 import MakeSqueak from '../../features/squeaks/MakeSqueak'
+import DeleteSqueak from '../../features/squeaks/DeleteSqueak'
 import ContentEditable from 'react-contenteditable'

 import {
  setLikeSqueak,
  setUnlikeSqueak,
-  setDeleteSqueak,
 } from '../../features/squeaks/squeaksSlice'


 const SqueakCard = React.memo(function SqueakCard(props) {
-    const [modalOpen, setModalOpen] = useState(false)
+    const [replyModalOpen, setModalOpen] = useState(false)
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false)
    const [parent, setParent] = useState(false)
    const [styleBody, setStyleBody] = useState(false)
    const dispatch = useDispatch()
@ -47,22 +48,27 @@ const SqueakCard = React.memo(function SqueakCard(props) {
        alert('Re-Squeak not yet implemented!');
    }

-    const deleteSqueak = (e,id) => {
-        e.preventDefault();
-        e.stopPropagation();
-        dispatch(setDeleteSqueak(id));
-    }
-
-    const toggleModal = (e, type) => {
+    const toggleReplyModal = (e, type) => {
        if(e){
            e.preventDefault();
            e.stopPropagation();
        }
        setStyleBody(!styleBody)
        if(type === 'parent'){setParent(true)}else{setParent(false)}
-        setTimeout(()=>{ setModalOpen(!modalOpen) },20)
+        setTimeout(()=>{ setModalOpen(!replyModalOpen) },20)
    }

+    const toggleDeleteModal = (e, type) => {
+        if(e){
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        setStyleBody(!styleBody)
+        if(type === 'parent'){setParent(true)}else{setParent(false)}
+        setTimeout(()=>{ setDeleteModalOpen(!deleteModalOpen) },20)
+    }
+
+
    const handleModalClick = (e) => {
        e.stopPropagation()
    }
@ -82,7 +88,7 @@ const SqueakCard = React.memo(function SqueakCard(props) {
        if (isInitialMount.current){ isInitialMount.current = false;}
        else if(document.getElementById("replyBox")) {
          document.getElementById("replyBox").focus(); }
-      }, [modalOpen])
+      }, [replyModalOpen])

    const goToUser = (e,username) => {
        e.stopPropagation()
@ -142,7 +148,7 @@ const SqueakCard = React.memo(function SqueakCard(props) {
                  }

                  <div className="card-buttons-wrapper">
-                      <div onClick={(e)=>toggleModal(e)} className="card-button-wrap reply-wrap">
+                      <div onClick={(e)=>toggleReplyModal(e)} className="card-button-wrap reply-wrap">
                          <div className="card-icon reply-icon">
                              <ICON_REPLY styles={{fill:'rgb(101, 119, 134)'}}/>
                          </div>
@ -170,7 +176,7 @@ const SqueakCard = React.memo(function SqueakCard(props) {
                              <ICON_HEART styles={{fill:'rgb(101, 119, 134)'}}/>}
                          </div>
                      </div>
-                      <div onClick={(e)=>deleteSqueak(e,props.id)} className="card-button-wrap">
+                      <div onClick={(e)=>toggleDeleteModal(e)} className="card-button-wrap">
                          <div className="card-icon share-icon">
                              <ICON_DELETE styles={{fill:'rgb(101, 119, 134)'}} />
                          </div>
@ -193,21 +199,40 @@ const SqueakCard = React.memo(function SqueakCard(props) {

        </Link>

-        {/* squeak modal */}
+        {/* reply modal */}
        {props.squeak ?
-            <div onClick={()=>toggleModal()} style={{display: modalOpen ? 'block' : 'none'}} className="modal-edit">
-            {modalOpen ?
+            <div onClick={()=>toggleReplyModal()} style={{display: replyModalOpen ? 'block' : 'none'}} className="modal-edit">
+            {replyModalOpen ?
            <div style={{minHeight: '350px', height: 'initial'}} onClick={(e)=>handleModalClick(e)} className="modal-content">
                <div className="modal-header">
                    <div className="modal-closeIcon">
-                        <div onClick={()=>toggleModal()} className="modal-closeIcon-wrap">
+                        <div onClick={()=>toggleReplyModal()} className="modal-closeIcon-wrap">
                            <ICON_CLOSE />
                        </div>
                    </div>
                    <p className="modal-title">Reply</p>
                </div>
                <div style={{marginTop:'5px'}} className="modal-body">
-                  <MakeSqueak replyToSqueak={props.squeak} submittedCallback={toggleModal} />
+                  <MakeSqueak replyToSqueak={props.squeak} submittedCallback={toggleReplyModal} />
+                </div>
+            </div> : null}
+        </div> : null}
+
+        {/* delete modal */}
+        {props.squeak ?
+            <div onClick={()=>toggleDeleteModal()} style={{display: deleteModalOpen ? 'block' : 'none'}} className="modal-edit">
+            {deleteModalOpen ?
+            <div style={{minHeight: '350px', height: 'initial'}} onClick={(e)=>handleModalClick(e)} className="modal-content">
+                <div className="modal-header">
+                    <div className="modal-closeIcon">
+                        <div onClick={()=>toggleDeleteModal()} className="modal-closeIcon-wrap">
+                            <ICON_CLOSE />
+                        </div>
+                    </div>
+                    <p className="modal-title">Delete Squeak</p>
+                </div>
+                <div style={{marginTop:'5px'}} className="modal-body">
+                  <DeleteSqueak squeakHash={props.id} submittedCallback={toggleDeleteModal} />
                </div>
            </div> : null}
        </div> : null}
--- a/frontend/src/features/squeaks/DeleteSqueak.js
+++ b/frontend/src/features/squeaks/DeleteSqueak.js
@ -0,0 +1,68 @@
+import React, { useEffect, useState, useContext, useRef } from 'react'
+import { withRouter } from 'react-router-dom'
+import { unwrapResult } from '@reduxjs/toolkit'
+
+import moment from 'moment'
+import ContentEditable from 'react-contenteditable'
+import { Link } from 'react-router-dom'
+import { getProfileImageSrcString } from '../../squeakimages/images';
+import Loader from '../../components/Loader'
+
+import { Form, Input, Select, Checkbox, Relevant, Debug, TextArea, Option } from 'informed';
+
+import { useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
+
+
+import {
+  setDeleteSqueak,
+} from '../squeaks/squeaksSlice'
+
+const DeleteSqueak = (props) => {
+  const dispatch = useDispatch();
+
+  const deleteSqueak = () => {
+    console.log('deleteSqueak');
+    dispatch(setDeleteSqueak(props.squeakHash));
+    if (props.submittedCallback) {
+      props.submittedCallback();
+    }
+  }
+
+  // TODO: Show profile image for selected signing profile.
+  // <div className="Squeak-profile-wrapper">
+  //   {signingProfile && <img alt="" style={{ borderRadius: '50%', minWidth: '49px' }} width="100%" height="49px" src={`${getProfileImageSrcString(signingProfile)}`} />}
+  // </div>
+
+  const author = props.replyToSqueak && props.replyToSqueak.getAuthor();
+
+  const DeleteSqueakForm = () => (
+    <Form onSubmit={deleteSqueak} className="Squeak-input-side">
+      <div className="inner-input-links">
+        <div className="input-links-side">
+        </div>
+        <div className="squeak-btn-holder">
+          <div style={{ fontSize: '13px', color: null }}>
+          </div>
+          <button type="submit" className={'squeak-btn-side squeak-btn-active'}>
+            Delete
+          </button>
+        </div>
+      </div>
+    </Form>
+  );
+
+
+  return (
+    <>
+
+      {/* New squeak content input. */}
+      <div className="Squeak-input-wrapper">
+        <DeleteSqueakForm />
+      </div>
+
+      </>
+  )
+}
+
+export default withRouter(DeleteSqueak)
--- a/frontend/src/features/squeaks/Squeak.js
+++ b/frontend/src/features/squeaks/Squeak.js
@ -13,6 +13,7 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
  import SqueakCard from '../../components/SqueakCard'
  import Loader from '../../components/Loader'
  import MakeSqueak from '../squeaks/MakeSqueak'
+  import DeleteSqueak from '../../features/squeaks/DeleteSqueak'

  import { unwrapResult } from '@reduxjs/toolkit'

@ -35,7 +36,6 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
    selectReplySqueaks,
    selectReplySqueaksStatus,
    clearReplies,
-    setDeleteSqueak,
    selectSqueakOffers,
    fetchSqueakOffers,
    setBuySqueak,
@ -65,7 +65,8 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
    const paymentSummary = useSelector(selectPaymentSummaryForSqueak)
    const dispatch = useDispatch();

-    const [modalOpen, setModalOpen] = useState(false)
+    const [replyModalOpen, setModalOpen] = useState(false)
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false)
    const [buyModalOpen, setBuyModalOpen] = useState(false)
    const [spendingModalOpen, setSpendingModalOpen] = useState(false)
    const [tab, setTab] = useState('Sent Payments')
@ -86,11 +87,18 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
      dispatch(fetchPaymentSummaryForSqueak({squeakHash: props.id}));
    }, [props.id])

-    const toggleModal = (e, type) => {
+    const toggleReplyModal = (e, type) => {
      if(e){ e.stopPropagation() }
      // if(param === 'edit'){setSaved(false)}
      // if(type === 'parent'){setParent(true)}else{setParent(false)}
-      setModalOpen(!modalOpen)
+      setModalOpen(!replyModalOpen)
+    }
+
+    const toggleDeleteModal = (e, type) => {
+      if(e){ e.stopPropagation() }
+      // if(param === 'edit'){setSaved(false)}
+      // if(type === 'parent'){setParent(true)}else{setParent(false)}
+      setDeleteModalOpen(!deleteModalOpen)
    }

    const toggleBuyModal = () => {
@ -131,10 +139,6 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
      dispatch(setLikeSqueak(props.id));
    }

-    const deleteSqueak = (id) => {
-      dispatch(setDeleteSqueak(props.id));
-    }
-
    const downloadSqueak = (id) => {
      dispatch(setDownloadSqueak(props.id));
    }
@ -250,7 +254,7 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
              </div>
            </div>
            <div className="squeak-interactions">
-              <div onClick={()=>toggleModal()} className="squeak-int-icon">
+              <div onClick={()=>toggleReplyModal()} className="squeak-int-icon">
                <div className="card-icon reply-icon"> <ICON_REPLY /> </div>
              </div>
              <div onClick={()=>resqueak(squeak.getSqueakHash())} className="squeak-int-icon">
@ -267,7 +271,7 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
                  {squeak.getLikedTimeMs() ? <ICON_HEARTFULL styles={{fill:'rgb(224, 36, 94)'}}
                  /> : <ICON_HEART/>} </div>
              </div>
-              <div onClick={()=>deleteSqueak(squeak.getSqueakHash())} className="squeak-int-icon">
+              <div onClick={()=>toggleDeleteModal()} className="squeak-int-icon">
                <div className="card-icon delete-icon">
                  <ICON_DELETE styles={{fill:'rgb(101, 119, 134)'}} />
                </div>
@ -338,23 +342,41 @@ import { ICON_ARROWBACK, ICON_HEART, ICON_REPLY, ICON_RETWEET, ICON_HEARTFULL,
    </div>

    {squeak ?
-      <div onClick={()=>toggleModal()} style={{display: modalOpen ? 'block' : 'none'}} className="modal-edit">
-        {modalOpen ?
+      <div onClick={()=>toggleReplyModal()} style={{display: replyModalOpen ? 'block' : 'none'}} className="modal-edit">
+        {replyModalOpen ?
          <div style={{minHeight: '379px', height: 'initial'}} onClick={(e)=>handleModalClick(e)} className="modal-content">
            <div className="modal-header">
              <div className="modal-closeIcon">
-                <div onClick={()=>toggleModal()} className="modal-closeIcon-wrap">
+                <div onClick={()=>toggleReplyModal()} className="modal-closeIcon-wrap">
                  <ICON_CLOSE />
                </div>
              </div>
              <p className="modal-title">Reply</p>
            </div>
            <div style={{marginTop:'5px'}} className="modal-body">
-              <MakeSqueak replyToSqueak={squeak} submittedCallback={toggleModal} />
+              <MakeSqueak replyToSqueak={squeak} submittedCallback={toggleReplyModal} />
            </div>
          </div> : null}
        </div>:null}

+        {squeak ?
+          <div onClick={()=>toggleDeleteModal()} style={{display: deleteModalOpen ? 'block' : 'none'}} className="modal-edit">
+            {deleteModalOpen ?
+              <div style={{minHeight: '379px', height: 'initial'}} onClick={(e)=>handleModalClick(e)} className="modal-content">
+                <div className="modal-header">
+                  <div className="modal-closeIcon">
+                    <div onClick={()=>toggleDeleteModal()} className="modal-closeIcon-wrap">
+                      <ICON_CLOSE />
+                    </div>
+                  </div>
+                  <p className="modal-title">Delete Squeak</p>
+                </div>
+                <div style={{marginTop:'5px'}} className="modal-body">
+                  <DeleteSqueak squeakHash={squeak.getSqueakHash()} submittedCallback={toggleDeleteModal} />
+                </div>
+              </div> : null}
+            </div>:null}
+
        {squeak ?
          <div onClick={()=>toggleBuyModal()} style={{display: buyModalOpen ? 'block' : 'none'}} className="modal-edit">
            {buyModalOpen ?
--- a/squeaknode/admin/webapp/static/build/asset-manifest.json
+++ b/squeaknode/admin/webapp/static/build/asset-manifest.json
@ -1,7 +1,7 @@
 {
  "files": {
    "main.css": "/static/css/main.206389cd.css",
-    "main.js": "/static/js/main.8639e5b0.js",
+    "main.js": "/static/js/main.1826f135.js",
    "static/css/306.7f7715a0.chunk.css": "/static/css/306.7f7715a0.chunk.css",
    "static/js/306.dc556745.chunk.js": "/static/js/306.dc556745.chunk.js",
    "static/css/900.1c240409.chunk.css": "/static/css/900.1c240409.chunk.css",
@ -11,7 +11,7 @@
    "static/media/icon.svg": "/static/media/icon.982210ec9275956e4d3cc77fa90167fd.svg",
    "index.html": "/index.html",
    "main.206389cd.css.map": "/static/css/main.206389cd.css.map",
-    "main.8639e5b0.js.map": "/static/js/main.8639e5b0.js.map",
+    "main.1826f135.js.map": "/static/js/main.1826f135.js.map",
    "306.7f7715a0.chunk.css.map": "/static/css/306.7f7715a0.chunk.css.map",
    "306.dc556745.chunk.js.map": "/static/js/306.dc556745.chunk.js.map",
    "900.1c240409.chunk.css.map": "/static/css/900.1c240409.chunk.css.map",
@ -21,6 +21,6 @@
  },
  "entrypoints": [
    "static/css/main.206389cd.css",
-    "static/js/main.8639e5b0.js"
+    "static/js/main.1826f135.js"
  ]
 }
--- a/squeaknode/admin/webapp/static/build/index.html
+++ b/squeaknode/admin/webapp/static/build/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.8639e5b0.js"></script><link href="/static/css/main.206389cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><script defer="defer" src="/static/js/main.1826f135.js"></script><link href="/static/css/main.206389cd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js
+++ b/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js
--- a/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js.LICENSE.txt
+++ b/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js.LICENSE.txt
--- a/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js.map
+++ b/squeaknode/admin/webapp/static/build/static/js/main.1826f135.js.map
--- a/squeaknode/admin/webapp/static/build/static/js/main.8639e5b0.js
+++ b/squeaknode/admin/webapp/static/build/static/js/main.8639e5b0.js
--- a/squeaknode/admin/webapp/static/build/static/js/main.8639e5b0.js.map
+++ b/squeaknode/admin/webapp/static/build/static/js/main.8639e5b0.js.map