From 877a8ae252eeba9423888b704939af3d1ca95aad Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 28 Jun 2023 15:25:28 +0200 Subject: [PATCH] add board admins list modal --- src/components/modals/AdminListModal.jsx | 82 ++++++++++++++++++++++++ src/components/views/Board.jsx | 47 ++++++++++---- src/components/views/Description.jsx | 17 ++++- src/components/views/Rules.jsx | 17 ++++- yarn.lock | 15 ----- 5 files changed, 145 insertions(+), 33 deletions(-) create mode 100644 src/components/modals/AdminListModal.jsx diff --git a/src/components/modals/AdminListModal.jsx b/src/components/modals/AdminListModal.jsx new file mode 100644 index 00000000..1b598878 --- /dev/null +++ b/src/components/modals/AdminListModal.jsx @@ -0,0 +1,82 @@ +import React, { useEffect, useState, useRef } from 'react'; +import Modal from 'react-modal'; +import Draggable from 'react-draggable'; +import { StyledModal } from '../styled/modals/ReplyModal.styled'; +import useGeneralStore from '../../hooks/stores/useGeneralStore'; +import { BoardForm } from '../styled/views/Board.styled' +import { Link } from 'react-router-dom'; + + + +const AdminListModal = ({ isOpen, closeModal, roles }) => { + const { + selectedAddress, + selectedStyle, + selectedTitle, + } = useGeneralStore(state => state); + + const [isMobile, setIsMobile] = useState(window.innerWidth <= 480); + const nodeRef = useRef(null); + const rolesList = roles + ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) + : []; + + useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth <= 480); + window.addEventListener('resize', handleResize); + + // Cleanup function + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [setIsMobile]); + + + return ( + + +
+
+ Admins for {selectedTitle ?? selectedAddress} +
+
+ + {rolesList.map(({ address, role }, index) => ( +

+ • {}} className="quote-link">u/{address}: {role} +

+ ))} + +
+
+ + + ); +}; + +Modal.setAppElement('#root'); + +export default AdminListModal; \ No newline at end of file diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 6e9d0bac..e0451dcc 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -14,6 +14,7 @@ import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import EditModal from '../modals/EditModal'; import EditLabel from '../EditLabel'; import ImageBanner from '../ImageBanner'; +import AdminListModal from '../modals/AdminListModal'; import ModerationModal from '../modals/ModerationModal'; import OfflineIndicator from '../OfflineIndicator'; import PendingLabel from '../PendingLabel'; @@ -100,6 +101,7 @@ const Board = () => { const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress}); const stateString = useStateString(subplebbit); + const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [isReplyOpen, setIsReplyOpen] = useState(false); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [originalCommentContent, setOriginalCommentContent] = useState(null); @@ -610,6 +612,21 @@ const Board = () => { {((selectedTitle ? selectedTitle : selectedAddress) + " - plebchan")} + setIsAdminListOpen(false)} + roles={subplebbit.roles} /> + setIsEditModalOpen(false)} + originalCommentContent={originalCommentContent} /> + {setIsModerationOpen(false); setDeletePost(false)}} + deletePost={deletePost} /> { selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} /> - {setIsModerationOpen(false); setDeletePost(false)}} - deletePost={deletePost} /> - setIsEditModalOpen(false)} - originalCommentContent={originalCommentContent} /> <> @@ -822,7 +829,10 @@ const Board = () => { Rules   - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   {getDate(subplebbit.createdAt)}   @@ -894,7 +904,10 @@ const Board = () => { - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   @@ -961,7 +974,10 @@ const Board = () => { Welcome to {subplebbit.title || subplebbit.address}   - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   {getDate(subplebbit.createdAt)}   @@ -1031,7 +1047,10 @@ const Board = () => { - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx index c61204fa..745f66ca 100644 --- a/src/components/views/Description.jsx +++ b/src/components/views/Description.jsx @@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/ import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import ImageBanner from '../ImageBanner'; +import AdminListModal from '../modals/AdminListModal'; import OfflineIndicator from '../OfflineIndicator'; import SettingsModal from '../modals/SettingsModal'; import getDate from '../../utils/getDate'; @@ -35,6 +36,7 @@ const Description = () => { const postMenuRef = useRef(null); const postMenuCatalogRef = useRef(null); + const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); @@ -123,6 +125,11 @@ const Description = () => { + setIsAdminListOpen(false)} + roles={subplebbit.roles} /> { Welcome to {subplebbit.title || subplebbit.address}   - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   {getDate(subplebbit.createdAt)}   @@ -362,7 +372,10 @@ const Description = () => { - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx index ceb2fdfb..8bb86f05 100644 --- a/src/components/views/Rules.jsx +++ b/src/components/views/Rules.jsx @@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/ import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import ImageBanner from '../ImageBanner'; +import AdminListModal from '../modals/AdminListModal'; import OfflineIndicator from '../OfflineIndicator'; import SettingsModal from '../modals/SettingsModal'; import getDate from '../../utils/getDate'; @@ -34,6 +35,7 @@ const Rules = () => { const postMenuRef = useRef(null); const postMenuCatalogRef = useRef(null); + const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); @@ -122,6 +124,11 @@ const Rules = () => { + setIsAdminListOpen(false)} + roles={subplebbit.roles} /> { Rules   - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   {getDate(subplebbit.createdAt)}   @@ -342,7 +352,10 @@ const Rules = () => { - ## Board Admins + {setIsAdminListOpen(!isAdminListOpen)}} + >## Board Admins   diff --git a/yarn.lock b/yarn.lock index 10ff9117..e1ae8c3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2722,21 +2722,6 @@ uuid "8.3.2" zustand "4.0.0" -"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#efa802a1af8c75362e0d9a9afe1bc769f54e34cd": - version "0.0.1" - resolved "https://github.com/plebbit/plebbit-react-hooks.git#efa802a1af8c75362e0d9a9afe1bc769f54e34cd" - dependencies: - "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#77a05093408982086c02afea24e1d1923e1ae8a8" - "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" - assert "2.0.0" - ethers "5.6.9" - localforage "1.10.0" - lodash.isequal "4.5.0" - memoizee "0.4.15" - quick-lru "5.1.1" - uuid "8.3.2" - zustand "4.0.0" - "@pmmmwh/react-refresh-webpack-plugin@^0.5.3": version "0.5.10" resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"