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 +
+