mirror of
https://github.com/yzernik/squeaknode.git
synced 2026-08-18 13:09:08 +02:00
Show modal for delete squeak (#2125)
* Got delete modal working for squeak card * Got delete squeak modal working in squeak page * Update frontend build
This commit is contained in:
Jonathan Zernik
GitHub
parent
78275176d4
commit
fd3d4229fb
10 changed files with 155 additions and 40 deletions
|
|
@ -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}
|
||||
|
|
|
|||
68
frontend/src/features/squeaks/DeleteSqueak.js
Normal file
68
frontend/src/features/squeaks/DeleteSqueak.js
Normal file
|
|
@ -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)
|
||||
|
|
@ -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 ?
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue