From fec617d2099ceb705053b33395ba4192c907f8d6 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 18 Aug 2023 17:25:41 +0200 Subject: [PATCH 1/9] fix moderation modal state --- src/components/modals/ModerationModal.jsx | 12 ++++++++++-- .../styled/modals/SettingsModal.styled.jsx | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/modals/ModerationModal.jsx b/src/components/modals/ModerationModal.jsx index 0c560045..a2b3c223 100755 --- a/src/components/modals/ModerationModal.jsx +++ b/src/components/modals/ModerationModal.jsx @@ -22,9 +22,9 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { const comment = useComment({commentCid: moderatingCommentCid}); - const [pin, setPin] = useState(comment?.pinned); + const [pin, setPin] = useState(comment.pinned); const [deleteThread, setDeleteThread] = useState(deletePost); - const [close, setClose] = useState(comment?.locked); + const [close, setClose] = useState(comment.locked); const [reason, setReason] = useState(''); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); @@ -32,16 +32,24 @@ const ModerationModal = ({ isOpen, closeModal, deletePost }) => { const [, setNewSuccessMessage] = useSuccess(); + useEffect(() => { + setPin(comment.pinned); + setClose(comment.locked); + }, [comment]); + + useEffect(() => { setDeleteThread(deletePost); }, [deletePost]); + useEffect(() => { if (!isOpen) { setDeleteThread(deletePost); } }, [isOpen, deletePost]); + const handleCloseModal = () => { setDeleteThread(false); closeModal(); diff --git a/src/components/styled/modals/SettingsModal.styled.jsx b/src/components/styled/modals/SettingsModal.styled.jsx index fdac0d80..04497b40 100644 --- a/src/components/styled/modals/SettingsModal.styled.jsx +++ b/src/components/styled/modals/SettingsModal.styled.jsx @@ -82,7 +82,7 @@ export const StyledModal = styled(Modal)` } .settings-cat { - display: ${({ expanded }) => index => (expanded.includes(index) ? "block" : "none")}; + display: ${({ expanded }) => index => (expanded?.includes(index) ? "block" : "none")}; margin: 5px; } From e524ba4a67bf48dbacfe19885de569a96ecb4537 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 18 Aug 2023 20:46:32 +0200 Subject: [PATCH 2/9] fix StateLabel flickering --- src/components/StateLabel.jsx | 40 ++++++++++++++++------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/StateLabel.jsx b/src/components/StateLabel.jsx index 46c5924b..57e436f7 100644 --- a/src/components/StateLabel.jsx +++ b/src/components/StateLabel.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import { useAccountComment } from "@plebbit/plebbit-react-hooks"; import useStateString from "../hooks/useStateString"; @@ -6,31 +6,27 @@ const StateLabel = ({ commentIndex, className }) => { const comment = useAccountComment({commentIndex: commentIndex}); const stateString = useStateString(comment); - const [isLoading, setIsLoading] = useState(true); + if (comment.updatedAt !== undefined) { + return null; + } - useEffect(() => { - const timer = setTimeout(() => setIsLoading(false), 2000); - return () => clearTimeout(timer); - }, [commentIndex]); + if (comment.state === "failed") { + return null; + } + + if (!stateString) { + return null; + } return ( - commentIndex !== undefined && stateString !== "Succeeded" ? ( - (comment.state === "failed") ? ( - null - ) : ( - stateString === undefined && !isLoading && comment.cid === undefined ? ( - null - ) : ( - -
- ( - - {stateString} - - ) + +
+ ( + + {stateString} - )) - ) : null + ) + ); }; From ee00f605bb0392ac470bce3c6784f51b76ef09bc Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 19 Aug 2023 15:05:16 +0200 Subject: [PATCH 3/9] add board settings UI and base logic --- src/components/BoardSettings.jsx | 161 ++++++++++++++++++ .../styled/modals/ModerationModal.styled.jsx | 67 +++++++- src/components/views/Board.jsx | 4 + src/components/views/Catalog.jsx | 4 + 4 files changed, 230 insertions(+), 6 deletions(-) create mode 100644 src/components/BoardSettings.jsx diff --git a/src/components/BoardSettings.jsx b/src/components/BoardSettings.jsx new file mode 100644 index 00000000..49ceb085 --- /dev/null +++ b/src/components/BoardSettings.jsx @@ -0,0 +1,161 @@ +import React, { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import { StyledModal } from './styled/modals/ModerationModal.styled'; +import useError from "../hooks/useError"; +import useSuccess from "../hooks/useSuccess"; +import useGeneralStore from '../hooks/stores/useGeneralStore'; + +const BoardSettings = ({ subplebbit }) => { + const generateSettingsFromSubplebbit = (subplebbitData) => ({ + address: subplebbitData.address, + apiUrl: subplebbitData.apiUrl, + description: subplebbitData.description, + pubsubTopic: subplebbitData.pubsubTopic, + settings: { + fetchThumbnailUrls: subplebbitData.settings?.fetchThumbnailUrls, + fetchThumbnailUrlsProxyUrl: subplebbitData.settings?.fetchThumbnailUrlsProxyUrl, + }, + roles: subplebbitData.roles, + rules: subplebbitData.rules, + suggested: { + avatarUrl: subplebbitData.suggested?.avatarUrl, + backgroundUrl: subplebbitData.suggested?.backgroundUrl, + bannerUrl: subplebbitData.suggested?.bannerUrl, + language: subplebbitData.suggested?.language, + primaryColor: subplebbitData.suggested?.primaryColor, + secondaryColor: subplebbitData.suggested?.secondaryColor, + }, + title: subplebbitData.title, + }); + + const initialSettings = generateSettingsFromSubplebbit(subplebbit); + const { selectedStyle } = useGeneralStore(state => state); + const [isModalOpen, setIsModalOpen] = useState(false); + const [boardSettingsJson, setBoardSettingsJson] = useState(JSON.stringify(initialSettings, null, 2)); + + const [, setNewErrorMessage] = useError(); + const [, setNewSuccessMessage] = useSuccess(); + + + useEffect(() => { + setBoardSettingsJson(JSON.stringify(generateSettingsFromSubplebbit(subplebbit), null, 2)); + }, [subplebbit]); + + + function validateSettings(updatedSettings, allowedSettings) { + for (let key in updatedSettings) { + if (!allowedSettings.hasOwnProperty(key)) { + throw new Error(`Unexpected setting: ${key}`); + } + + if (typeof updatedSettings[key] === 'object' && updatedSettings[key] !== null) { + validateSettings(updatedSettings[key], allowedSettings[key]); + } + } + } + + // TODO: add API logic + const handleSaveChanges = async () => { + try { + const updatedSettings = JSON.parse(boardSettingsJson); + validateSettings(updatedSettings, initialSettings); + + + + setNewSuccessMessage("Changes saved successfully"); + } catch (error) { + setNewErrorMessage(`Error saving changes: `, error) + } + }; + + + const handleResetChanges = () => { + setBoardSettingsJson(JSON.stringify(initialSettings, null, 2)); + }; + // TODO: add API logic + + + function generateSettingsList(settingsObj, parentKey = '') { + let result = []; + + for (let key in settingsObj) { + if (typeof settingsObj[key] === 'object' && settingsObj[key] !== null) { + const nestedItems = generateSettingsList(settingsObj[key], `${parentKey}${key}.`); + if (nestedItems.length > 1) { + result.push(`${parentKey}${key}: { ${nestedItems.join(', ')} }`); + } else { + result.push(...nestedItems); + } + } else { + result.push(`${parentKey}${key}`); + } + } + + return result; + } + + + const possibleSettingsList = generateSettingsList(initialSettings); + + + const handleCloseModal = () => { + setIsModalOpen(false); + }; + + + return ( + <> + +
+
+ Board Settings + + + +
+
+
+ Allowed settings: + + {`{ ${possibleSettingsList.join(', ')} }`} + +
+ API docs: https://github.com/plebbit/plebbit-js#readme +
+