mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
style: run prettier
This commit is contained in:
Esteban Abaroa
@@ -1,8 +1,10 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAccount, useCreateSubplebbit,
|
||||
import {
|
||||
useAccount,
|
||||
useCreateSubplebbit,
|
||||
// useSubplebbits, useAccountSubplebbits
|
||||
} from '@plebbit/plebbit-react-hooks';
|
||||
} from '@plebbit/plebbit-react-hooks';
|
||||
import { StyledModal } from '../styled/modals/CreateBoardModal.styled';
|
||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||
import Modal from 'react-modal';
|
||||
@@ -10,7 +12,7 @@ import useError from '../../hooks/useError';
|
||||
import useSuccess from '../../hooks/useSuccess';
|
||||
|
||||
const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
const { selectedStyle } = useGeneralStore(state => state);
|
||||
const { selectedStyle } = useGeneralStore((state) => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
@@ -29,7 +31,6 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
const [rules, setRules] = useState([]);
|
||||
const [editIndex, setEditIndex] = useState(-1);
|
||||
|
||||
|
||||
const handleAddRule = () => {
|
||||
if (rule.trim() === '') {
|
||||
setNewErrorMessage('Rule field is empty');
|
||||
@@ -41,15 +42,14 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if(editIndex > -1){
|
||||
setRules(rules.map((r, i) => i === editIndex ? rule : r));
|
||||
if (editIndex > -1) {
|
||||
setRules(rules.map((r, i) => (i === editIndex ? rule : r)));
|
||||
setEditIndex(-1);
|
||||
} else {
|
||||
setRules([...rules, rule]);
|
||||
}
|
||||
setRule('');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (ruleInputRef.current) {
|
||||
@@ -57,40 +57,35 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
}
|
||||
}, [rules]);
|
||||
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleAddRule();
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleEditRule = (index) => {
|
||||
setRule(rules[index]);
|
||||
setEditIndex(index);
|
||||
ruleInputRef.current.focus();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleDeleteRule = (index) => {
|
||||
if (index === editIndex) {
|
||||
setEditIndex(-1);
|
||||
}
|
||||
setRules(rules.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const createSubplebbitOptions = {
|
||||
title: title || undefined,
|
||||
description: description || undefined,
|
||||
suggested: {
|
||||
avatarUrl : avatar || undefined,
|
||||
avatarUrl: avatar || undefined,
|
||||
},
|
||||
roles: moderators || undefined,
|
||||
rules: rules || undefined,
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const resetFields = () => {
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
@@ -98,23 +93,21 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
setModerators('');
|
||||
setRule('');
|
||||
setRules([]);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const { createdSubplebbit, createSubplebbit } = useCreateSubplebbit(createSubplebbitOptions);
|
||||
|
||||
|
||||
const handleCreateBoard = async () => {
|
||||
let moderatorAddresses = moderators.trim() ? moderators.split(',').map(addr => addr.trim()) : [];
|
||||
let invalidAddresses = moderatorAddresses.filter(addr => !(addr.endsWith('.eth') || (addr.startsWith('12D3KooW') && addr.length === 52)));
|
||||
let moderatorAddresses = moderators.trim() ? moderators.split(',').map((addr) => addr.trim()) : [];
|
||||
let invalidAddresses = moderatorAddresses.filter((addr) => !(addr.endsWith('.eth') || (addr.startsWith('12D3KooW') && addr.length === 52)));
|
||||
|
||||
if (invalidAddresses.length > 0) {
|
||||
setNewErrorMessage("Invalid moderator addresses: " + invalidAddresses.join(", "));
|
||||
setNewErrorMessage('Invalid moderator addresses: ' + invalidAddresses.join(', '));
|
||||
return;
|
||||
}
|
||||
|
||||
const roles = {};
|
||||
moderatorAddresses.forEach(addr => {
|
||||
moderatorAddresses.forEach((addr) => {
|
||||
roles[addr] = { role: 'moderator' };
|
||||
});
|
||||
roles[account.author.address] = { role: 'admin' };
|
||||
@@ -133,27 +126,27 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
|
||||
if (avatar) {
|
||||
createSubplebbitOptions.suggested = {
|
||||
avatarUrl : avatar,
|
||||
avatarUrl: avatar,
|
||||
};
|
||||
}
|
||||
|
||||
if (rules.length > 0) {
|
||||
createSubplebbitOptions.rules = rules;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
await createSubplebbit(createSubplebbitOptions);
|
||||
} catch (error) {
|
||||
setNewErrorMessage(error.message);
|
||||
}
|
||||
|
||||
|
||||
if (createdSubplebbit) {
|
||||
resetFields();
|
||||
closeModal();
|
||||
setNewSuccessMessage('Board created successfully, address: ' + createdSubplebbit.address);
|
||||
navigate(`/p/${createdSubplebbit.address}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// remove after testing:
|
||||
// const {accountSubplebbits} = useAccountSubplebbits()
|
||||
@@ -165,114 +158,68 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
<StyledModal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={closeModal}
|
||||
contentLabel="Create Board"
|
||||
contentLabel='Create Board'
|
||||
selectedStyle={selectedStyle}
|
||||
style={{ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}}
|
||||
style={{ overlay: { backgroundColor: 'rgba(0,0,0,.25)' } }}
|
||||
>
|
||||
<div className="modal-content" ref={nodeRef}>
|
||||
<div className="modal-header">
|
||||
<div className='modal-content' ref={nodeRef}>
|
||||
<div className='modal-header'>
|
||||
Create Board
|
||||
<button className="icon" onClick={() => closeModal()} title="close" />
|
||||
<button className='icon' onClick={() => closeModal()} title='close' />
|
||||
</div>
|
||||
<ul id="form">
|
||||
<div id="explaination">NOTE: plebbit is P2P, your board will stay online for as long as you leave the plebchan desktop app (full node) connected to the Internet.</div>
|
||||
<li className='settings-option disc'>
|
||||
Title
|
||||
</li>
|
||||
<div className='settings-tip'>
|
||||
Optional, useful to describe the board next to its p/address.
|
||||
<ul id='form'>
|
||||
<div id='explaination'>
|
||||
NOTE: plebbit is P2P, your board will stay online for as long as you leave the plebchan desktop app (full node) connected to the Internet.
|
||||
</div>
|
||||
<li className='settings-option disc'>Title</li>
|
||||
<div className='settings-tip'>Optional, useful to describe the board next to its p/address.</div>
|
||||
<div className='settings-input'>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Board Title"
|
||||
/>
|
||||
</div>
|
||||
<li className='settings-option disc'>
|
||||
Description
|
||||
</li>
|
||||
<div className='settings-tip'>
|
||||
Optional, displayed as sticky with the board's avatar if set.
|
||||
<input id='name' type='text' value={title} onChange={(e) => setTitle(e.target.value)} placeholder='Board Title' />
|
||||
</div>
|
||||
<li className='settings-option disc'>Description</li>
|
||||
<div className='settings-tip'>Optional, displayed as sticky with the board's avatar if set.</div>
|
||||
<div className='settings-input'>
|
||||
<textarea
|
||||
id="description"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description"
|
||||
/>
|
||||
</div>
|
||||
<li className='settings-option disc'>
|
||||
Avatar
|
||||
</li>
|
||||
<div className='settings-tip'>
|
||||
Optional, set an image that represents your board.
|
||||
<textarea id='description' type='text' value={description} onChange={(e) => setDescription(e.target.value)} placeholder='Add a description' />
|
||||
</div>
|
||||
<li className='settings-option disc'>Avatar</li>
|
||||
<div className='settings-tip'>Optional, set an image that represents your board.</div>
|
||||
<div className='settings-input'>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={avatar}
|
||||
onChange={(e) => setAvatar(e.target.value)}
|
||||
placeholder="https://example.com/image.png"
|
||||
/>
|
||||
</div>
|
||||
<li className='settings-option disc'>
|
||||
Moderators
|
||||
</li>
|
||||
<div className='settings-tip'>
|
||||
Optional, let other users help you moderate your board.
|
||||
<input id='name' type='text' value={avatar} onChange={(e) => setAvatar(e.target.value)} placeholder='https://example.com/image.png' />
|
||||
</div>
|
||||
<li className='settings-option disc'>Moderators</li>
|
||||
<div className='settings-tip'>Optional, let other users help you moderate your board.</div>
|
||||
<div className='settings-input'>
|
||||
<textarea
|
||||
id="name"
|
||||
type="text"
|
||||
value={moderators}
|
||||
onChange={(e) => setModerators(e.target.value)}
|
||||
placeholder='username.eth, 12D3KooW..., username2.eth'
|
||||
/>
|
||||
</div>
|
||||
<li className='settings-option disc'>
|
||||
Rules
|
||||
</li>
|
||||
<div className='settings-tip'>
|
||||
Optional, listed in a sticky on top. Maximum 15 rules.
|
||||
<textarea id='name' type='text' value={moderators} onChange={(e) => setModerators(e.target.value)} placeholder='username.eth, 12D3KooW..., username2.eth' />
|
||||
</div>
|
||||
<li className='settings-option disc'>Rules</li>
|
||||
<div className='settings-tip'>Optional, listed in a sticky on top. Maximum 15 rules.</div>
|
||||
<div className='settings-input'>
|
||||
<input
|
||||
ref={ruleInputRef}
|
||||
id="rule"
|
||||
type="text"
|
||||
value={rule}
|
||||
onChange={(e) => setRule(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Add a rule"
|
||||
/>
|
||||
<input ref={ruleInputRef} id='rule' type='text' value={rule} onChange={(e) => setRule(e.target.value)} onKeyDown={handleKeyDown} placeholder='Add a rule' />
|
||||
</div>
|
||||
<button style={{display: rules.length > 0 ? 'none' : 'block'}} id="rule-btn" className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
|
||||
{editIndex > -1 ? "Update Rule" : "Add Rule"}
|
||||
<button style={{ display: rules.length > 0 ? 'none' : 'block' }} id='rule-btn' className={rules.length > 0 ? 'relative' : ''} onClick={handleAddRule}>
|
||||
{editIndex > -1 ? 'Update Rule' : 'Add Rule'}
|
||||
</button>
|
||||
{rules.length > 0 && (
|
||||
<fieldset>
|
||||
<legend>
|
||||
<button className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
|
||||
{editIndex > -1 ? "Update Rule" : "Add Rule"}
|
||||
<button className={rules.length > 0 ? 'relative' : ''} onClick={handleAddRule}>
|
||||
{editIndex > -1 ? 'Update Rule' : 'Add Rule'}
|
||||
</button>
|
||||
</legend>
|
||||
{rules.map((rule, index) => (
|
||||
<div key={index} className="rule-item">
|
||||
<p>{index+1}. {rule}</p>
|
||||
<div key={index} className='rule-item'>
|
||||
<p>
|
||||
{index + 1}. {rule}
|
||||
</p>
|
||||
<button onClick={() => handleEditRule(index)}>Edit</button>
|
||||
<button onClick={() => handleDeleteRule(index)}>Delete</button>
|
||||
</div>
|
||||
))}
|
||||
</fieldset>
|
||||
)}
|
||||
<button onClick={handleCreateBoard} id="create-board-btn">Create Board</button>
|
||||
<button onClick={handleCreateBoard} id='create-board-btn'>
|
||||
Create Board
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
</StyledModal>
|
||||
@@ -281,4 +228,4 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
|
||||
|
||||
Modal.setAppElement('#root');
|
||||
|
||||
export default CreateBoardModal;
|
||||
export default CreateBoardModal;
|
||||
|
||||
Reference in New Issue
Block a user