External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #189 from plebbit/development

Browse Source 
Development
This commit is contained in:
plebeius.eth
2023-08-14 16:59:20 +02:00
committed by GitHub
parent ceb3d55f31 f4d2366b4a
commit 352ded6591
21 changed files with 384 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StateLabel.jsx
+2 -4
View File
@@ -11,12 +11,10 @@ const StateLabel = ({ commentIndex, className }) => {
useEffect(() => {
const timer = setTimeout(() => setIsLoading(false), 2000);
return () => clearTimeout(timer);
}, []);
if (commentIndex === undefined) return null;
}, [commentIndex]);
return (
commentIndex && stateString !== "Succeeded" ? (
commentIndex !== undefined && stateString !== "Succeeded" ? (
(comment.state === "failed") ? (
null
) : (
src/components/modals/CaptchaModal.jsx
+10 -3
View File
@@ -20,6 +20,7 @@ const CaptchaModal = () => {
} = useGeneralStore(state => state);
const [imageSources, setImageSources] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
const [totalChallenges, setTotalChallenges] = useState(0);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
@@ -49,7 +50,8 @@ const CaptchaModal = () => {
useEffect(() => {
if (challengesArray) {
if (isCaptchaOpen && challengesArray) {
setIsLoading(true);
const challenges = challengesArray.challenges;
const decryptedChallenges = [];
@@ -61,8 +63,9 @@ const CaptchaModal = () => {
setImageSources(decryptedChallenges);
setTotalChallenges(decryptedChallenges.length);
setIsLoading(false);
}
}, [challengesArray]);
}, [challengesArray, isCaptchaOpen]);
const handleKeyDown = (event) => {
@@ -157,7 +160,11 @@ const CaptchaModal = () => {
ref={responseRef}
onKeyDown={handleKeyDown}
autoFocus />
<img src={imageSources[currentChallengeIndex]} alt="captcha" />
{isLoading ? (
<img src="" alt="loading..." style={{ visibility: "hidden" }} />
) : (
imageSources[currentChallengeIndex] && <img src={imageSources[currentChallengeIndex]} alt="captcha" />
)}
</div>
<div>
<span style={{lineHeight: '1.7'}}>
src/components/modals/SettingsModal.jsx
+81 -28
View File
@@ -1,14 +1,15 @@
import React, { useState, useEffect, useRef } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import Modal from "react-modal";
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
import { confirmAlert } from "react-confirm-alert";
import { deleteAccount, deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
import { StyledModal } from "../styled/modals/SettingsModal.styled";
import useError from "../../hooks/useError";
import useSuccess from "../../hooks/useSuccess";
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const SettingsModal = ({ isOpen, closeModal }) => {
@@ -21,7 +22,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const navigate = useNavigate();
const location = useLocation();
const [expanded, setExpanded] = useState([]);
const [accountJson, setAccountJson] = useState(null);
const [accountJson, setAccountJson] = useState("");
const [copyStatus, setCopyStatus] = useState(false);
const [ensName, setEnsName] = useState('');
const [checkedENS, setCheckedENS] = useState(false);
@@ -42,10 +43,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const nameRef = useRef();
const ensRef = useRef();
const isElectron = window.electron && window.electron.isElectron;
const author = {...account?.author, address: ensName};
const { resolvedAddress, state } = useResolvedAuthorAddress({ author, cache: false });
const isElectron = window.electron && window.electron.isElectron;
const defaultGatewayUrls = isElectron ? undefined : [
'https://ipfs.io',
@@ -70,6 +71,23 @@ const SettingsModal = ({ isOpen, closeModal }) => {
];
useEffect(() => {
if (account) {
const fetchAccountData = async () => {
const data = await exportAccount();
setAccountJson(data);
};
fetchAccountData();
}
}, [account]);
const handleAccountJsonChange = (e) => {
setAccountJson(e.target.value);
};
useEffect(() => {
if (checkedENS && resolvedAddress && state === 'succeeded') {
setCheckedENS(false);
@@ -302,8 +320,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const handleCloseModal = () => {
setAccountJson(null);
if (location.pathname.endsWith("/settings")) {
const newPath = location.pathname.slice(0, -9);
closeModal();
@@ -344,13 +360,31 @@ const SettingsModal = ({ isOpen, closeModal }) => {
}, [setNewSuccessMessage]);
const handleExport = async () => {
const activeAccountJson = await exportAccount();
setAccountJson(activeAccountJson);
const handleSaveAccount = async () => {
try {
const parsedJson = JSON.parse(accountJson);
await setAccount(parsedJson);
setNewSuccessMessage("Account Data Saved Successfully");
} catch (error) {
setNewErrorMessage("Error saving account data: " + error.message);
console.error(error);
}
};
const handleImport = async () => {
const handleResetAccount = async () => {
try {
const data = await exportAccount();
setAccountJson(data);
setNewSuccessMessage("Account Data Reset Successfully");
} catch (error) {
setNewErrorMessage("Error resetting account data: " + error.message);
console.error(error);
}
};
const handleImportAccount = async () => {
const accountJson = importRef.current.value;
try {
@@ -364,6 +398,21 @@ const SettingsModal = ({ isOpen, closeModal }) => {
}
};
const handleDeleteAccount = async () => {
if (window.confirm("Are you sure you want to delete this account?")) {
try {
await deleteAccount(account?.name);
localStorage.setItem("successToast", "Account Deleted Successfully");
window.location.reload();
} catch (error) {
setNewErrorMessage("Error deleting account: " + error.message);
console.error(error);
}
}
};
const handleAccountChange = (e) => {
setActiveAccount(e.target.value);
};
@@ -427,15 +476,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<span className="settings-pointer" style={{cursor: "pointer"}}
onClick={() => toggleExpanded(1)}
>Account</span>
<div className="plebbit-options-buttons"
style={{ display: expanded.includes(1) ? 'block' : 'none' }}
>
<button className="save-button"
onClick={handleExport}>Export</button>
<button className="reset-button"
onClick={handleImport}
>Import</button>
</div>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
<li className="anon-off">
@@ -458,14 +498,27 @@ const SettingsModal = ({ isOpen, closeModal }) => {
Account Data
</li>
<li className="settings-tip">
To export, click "Export", then save your account data displayed below in a safe place. To import, paste your account data into the box below, then click "Import".
To save manual changes, click "Save". To undo changes, click "Reset". To delete the account and create a new one, click "Delete". To add another account, paste its data and click "Import".
</li>
<div className="settings-input">
{accountJson ? (
<textarea value={accountJson} readOnly />
): (
<textarea ref={importRef} />
)}
<textarea id="account-data-text"
value={accountJson}
ref={importRef}
onChange={handleAccountJsonChange} />
<div className="account-buttons">
<button onClick={handleSaveAccount}>
Save
</button>
<button onClick={handleResetAccount}>
Reset
</button>
<button onClick={handleImportAccount}>
Import
</button>
<button onClick={handleDeleteAccount}>
Delete
</button>
</div>
</div>
<li className="settings-option disc">
Account Address: u/{account?.author.shortAddress}
@@ -634,14 +687,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
ref={ethereumRpcRef}
/>
</div>
{/* <li className="settings-option disc">Polygon RPC</li>
<li className="settings-option disc">Polygon RPC</li>
<li className="settings-tip">Needed for XPLEB NFTs.</li>
<div className="settings-input">
<textarea placeholder="Polygon RPC URLs"
defaultValue={account?.plebbitOptions?.chainProviders?.['matic']?.urls.join("\n")}
ref={polygonRpcRef}
/>
</div> */}
</div>
</ul>
</ul>
<div>
src/components/styled/modals/AlertModal.styled.jsx
+77
View File
@@ -0,0 +1,77 @@
import styled from 'styled-components';
export const AlertModal = styled.div`
.author-delete-alert {
padding: 20px;
border: 1px solid #ccc;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.author-delete-buttons {
display: flex;
justify-content: center;
& > button {
margin-top: 10px;
}
& > button:first-child {
margin-right: 20px;
}
}
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
.author-delete-alert {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
}`;
case 'Yotsuba-B':
return `
.author-delete-alert {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
}`;
case 'Futaba':
return `
.author-delete-alert {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
}`;
case 'Burichan':
return `
.author-delete-alert {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
}`;
case 'Tomorrow':
return `
.author-delete-alert {
background-color: #282a2e;
border: 1px solid #111;
}`;
case 'Photon':
return `
.author-delete-alert {
background-color: #ddd;
border: 1px solid #ccc;
}`;
default:
return '';
}
}}
`;
src/components/styled/modals/CaptchaModal.styled.jsx
+1
View File
@@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)`
position: relative;
clear: both;
width: 302px;
height: 100px;
overflow: hidden;
margin-bottom: 3px;
}
src/components/styled/modals/SettingsModal.styled.jsx
+17 -2
View File
@@ -87,9 +87,24 @@ export const StyledModal = styled(Modal)`
}
textarea {
width: 80%;
margin-left: 7%;
min-width: 80%;
min-height: 50px;
margin-left: 7%;
}
#account-data-text {
min-width: 70%;
min-height: 105px;
}
.account-buttons {
display: inline-block;
position: absolute;
margin: 5px 5px 5px 10px;
button {
margin-bottom: 5px;
}
}
.all-div {
src/components/styled/views/Catalog.styled.jsx
+18
View File
@@ -23,6 +23,11 @@ export const Threads = styled.div`
max-height: 150px;
}
.file-thumb {
background-color: rgba(0, 0, 0, 0.05);
display: inline-block;
}
.card {
display: inline;
margin: auto;
@@ -87,6 +92,19 @@ export const Threads = styled.div`
display: block;
padding: 0 15px;
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Tomorrow':
return `
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}
`;
default:
return '';
}
}}
`;
export const PostMenuCatalog = styled.div`
src/components/styled/views/Thread.styled.jsx
-76
View File
@@ -3235,82 +3235,6 @@ export const Footer = styled.div`
}
}`;
default:
return '';
}
}}
`;
export const AuthorDeleteAlert = styled.div`
.author-delete-alert {
padding: 20px;
border: 1px solid #ccc;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.author-delete-buttons {
display: flex;
justify-content: center;
& > button {
margin-top: 10px;
}
& > button:first-child {
margin-right: 20px;
}
}
}
${({ selectedStyle }) => {
switch (selectedStyle) {
case 'Yotsuba':
return `
.author-delete-alert {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
}`;
case 'Yotsuba-B':
return `
.author-delete-alert {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
}`;
case 'Futaba':
return `
.author-delete-alert {
background-color: #f0e0d6;
border: 1px solid #d9bfb7;
}`;
case 'Burichan':
return `
.author-delete-alert {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
}`;
case 'Tomorrow':
return `
.author-delete-alert {
background-color: #282a2e;
border: 1px solid #111;
}`;
case 'Photon':
return `
.author-delete-alert {
background-color: #ddd;
border: 1px solid #ccc;
}`;
default:
return '';
}
src/components/views/All.jsx
+6 -5
View File
@@ -9,8 +9,9 @@ import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubp
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
import { Footer } from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner';
@@ -40,8 +41,8 @@ import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
let lastVirtuosoStates = {};
@@ -419,7 +420,7 @@ const All = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -442,7 +443,7 @@ const All = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
src/components/views/AllCatalog.jsx
+35 -17
View File
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -27,9 +28,9 @@ import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess';
import useWindowWidth from '../../hooks/useWindowWidth';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
let lastVirtuosoStates = {}
import packageJson from '../../../package.json';
const {version} = packageJson;
let lastVirtuosoStates = {};
const CatalogPost = ({post}) => {
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
@@ -265,6 +266,17 @@ const CatalogPost = ({post}) => {
}, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
let displayWidth, displayHeight;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '150px';
displayHeight = '150px';
}
return (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
@@ -274,26 +286,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
src/components/views/Board.jsx
+6 -5
View File
@@ -9,7 +9,8 @@ import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishC
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -42,8 +43,8 @@ import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
let lastVirtuosoStates = {};
@@ -573,7 +574,7 @@ const Board = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -596,7 +597,7 @@ const Board = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
src/components/views/Catalog.jsx
+38 -21
View File
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishComment, usePublishCommentEdit, useSubpl
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -30,9 +31,9 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useFeedRows from '../../hooks/useFeedRows';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import useWindowWidth from '../../hooks/useWindowWidth';
import packageJson from '../../../package.json'
const {version} = packageJson
let lastVirtuosoStates = {}
import packageJson from '../../../package.json';
const {version} = packageJson;
let lastVirtuosoStates = {};
const CatalogPost = ({post}) => {
@@ -111,7 +112,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -134,7 +135,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
@@ -254,6 +255,16 @@ const CatalogPost = ({post}) => {
};
let displayWidth, displayHeight;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '150px';
displayHeight = '150px';
}
if (post.type === 'rules') {
return (
@@ -452,26 +463,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<video className="card" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
src/components/views/Description.jsx
+2 -2
View File
@@ -18,8 +18,8 @@ import getDate from '../../utils/getDate';
import handleImageClick from '../../utils/handleImageClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const Description = () => {
src/components/views/Home.jsx
+4 -4
View File
@@ -7,9 +7,9 @@ import BoardAvatar from '../BoardAvatar';
import OfflineIndicator from '../OfflineIndicator';
import CreateBoardModal from '../modals/CreateBoardModal';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
import packageJson from '../../../package.json';
import { Tooltip } from 'react-tooltip';
const {version} = packageJson
const {version} = packageJson;
// show commit ref on netlify to know which commit is being served for debugging
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''
@@ -85,7 +85,7 @@ const Home = () => {
(event) => {
if (event.key === "Enter") {
event.preventDefault();
const address = inputRef.current.value;
const address = inputRef.current.value.toLowerCase();;
if (address) {
setSelectedAddress(address);
navigate(`/p/${address}`)
@@ -94,7 +94,7 @@ const Home = () => {
}} />
<input type="submit" value="Search" onClick={
() => {
const address = inputRef.current.value;
const address = inputRef.current.value.toLowerCase();;
if (address) {
setSelectedAddress(address);
navigate(`/p/${address}`)
src/components/views/NotFound.jsx
+2 -2
View File
@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { Link } from "react-router-dom";
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const NotFound = () => {
src/components/views/Pending.jsx
+2 -2
View File
@@ -18,8 +18,8 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const Pending = () => {
src/components/views/Rules.jsx
+2 -2
View File
@@ -16,8 +16,8 @@ import SettingsModal from '../modals/SettingsModal';
import getDate from '../../utils/getDate';
import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const Rules = () => {
src/components/views/Subscriptions.jsx
+6 -5
View File
@@ -10,7 +10,8 @@ import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/util
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled';
import { AuthorDeleteAlert, Footer } from '../styled/views/Thread.styled';
import { Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -40,8 +41,8 @@ import useError from '../../hooks/useError';
import useFeedStateString from '../../hooks/useFeedStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
let lastVirtuosoStates = {};
@@ -421,7 +422,7 @@ const Subscriptions = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -444,7 +445,7 @@ const Subscriptions = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
src/components/views/SubscriptionsCatalog.jsx
+39 -19
View File
@@ -9,7 +9,8 @@ import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbi
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
import { TopBar, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { TopBar, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import CatalogLoader from '../CatalogLoader';
import EditModal from '../modals/EditModal';
import ImageBanner from '../ImageBanner';
@@ -28,8 +29,8 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import useSuccess from '../../hooks/useSuccess';
import useWindowWidth from '../../hooks/useWindowWidth';
import packageJson from '../../../package.json';
const {version} = packageJson
let lastVirtuosoStates = {}
const {version} = packageJson;
let lastVirtuosoStates = {};
const CatalogPost = ({post}) => {
@@ -116,7 +117,7 @@ const CatalogPost = ({post}) => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -139,7 +140,7 @@ const CatalogPost = ({post}) => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
@@ -265,6 +266,17 @@ const CatalogPost = ({post}) => {
}, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
let displayWidth, displayHeight;
if (thread.linkWidth && thread.linkHeight) {
let scale = Math.min(1, 150 / Math.max(thread.linkWidth, thread.linkHeight));
displayWidth = `${thread.linkWidth * scale}px`;
displayHeight = `${thread.linkHeight * scale}px`;
} else {
displayWidth = '150px';
displayHeight = '150px';
}
return (
<div key={`thread-`} className="thread"
onMouseOver={() => {setIsHoveringOnThread(thread.cid)}}
@@ -274,26 +286,32 @@ const CatalogPost = ({post}) => {
onClick={() => setSelectedThread(thread.cid)}>
{commentMediaInfo?.type === "webpage" ? (
thread.thumbnailUrl ? (
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;
}} />
</span>
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
) : null}
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<img className="card" key={`img-`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
</span>
) : null}
{commentMediaInfo?.type === "video" ? (
<span className="file-thumb" style={{width: displayWidth, height: displayHeight}}>
<video className="card" key={`fti-`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{commentMediaInfo?.type === "audio" ? (
<audio className="card" controls
@@ -729,7 +747,7 @@ const SubscriptionsCatalog = () => {
</TopBar>
<Tooltip id="tooltip" className="tooltip" />
<Threads selectedStyle={selectedStyle}>
{feed.length > 1 ? (
{account.subscriptions.length > 0 ? (
<Virtuoso
increaseViewportBy={{bottom: 600, top: 600}}
totalCount={rows?.length || 0}
@@ -743,7 +761,9 @@ const SubscriptionsCatalog = () => {
restoreStateFrom={lastVirtuosoState}
initialScrollTop={lastVirtuosoState?.scrollTop}
/>
) : (<CatalogLoader />)}
) : (
account.subscriptions.length !== 0 ?
<CatalogLoader /> : null)}
</Threads>
<Footer selectedStyle={selectedStyle}>
<Break id="break" selectedStyle={selectedStyle} style={{
src/components/views/Thread.jsx
+6 -5
View File
@@ -8,7 +8,8 @@ import { useAccount, useAccountComments, useComment, usePublishComment, usePubli
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer, AuthorDeleteAlert } from '../styled/views/Thread.styled';
import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled';
import { AlertModal } from '../styled/modals/AlertModal.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel';
@@ -40,8 +41,8 @@ import useStateString from '../../hooks/useStateString';
import useSuccess from '../../hooks/useSuccess';
import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'
const {version} = packageJson
import packageJson from '../../../package.json';
const {version} = packageJson;
const Thread = () => {
@@ -513,7 +514,7 @@ const Thread = () => {
confirmAlert({
customUI: ({ onClose }) => {
return (
<AuthorDeleteAlert selectedStyle={selectedStyle}>
<AlertModal selectedStyle={selectedStyle}>
<div className='author-delete-alert'>
<p>Are you sure you want to delete this post?</p>
<div className="author-delete-buttons">
@@ -536,7 +537,7 @@ const Thread = () => {
</button>
</div>
</div>
</AuthorDeleteAlert>
</AlertModal>
);
}
});
yarn.lock
+30 -30
View File
@@ -1445,10 +1445,10 @@
resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.1":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.1.tgz#18d635e24ad35f7276e8a49d135c7d3ca6a46f93"
integrity sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==
"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.2":
version "2.1.2"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
dependencies:
ajv "^6.12.4"
debug "^4.3.2"
@@ -1465,10 +1465,10 @@
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
"@eslint/js@^8.46.0":
version "8.46.0"
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
"@eslint/js@^8.47.0":
version "8.47.0"
resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
"@ethersproject/abi@5.6.4":
version "5.6.4"
@@ -3391,9 +3391,9 @@
form-data "^3.0.0"
"@types/node@*", "@types/node@>=13.7.0":
version "20.4.9"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.9.tgz#c7164e0f8d3f12dfae336af0b1f7fdec8c6b204f"
integrity sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==
version "20.4.10"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.10.tgz#73c9480791e3ddeb4887a660fc93a7f59353ad45"
integrity sha512-vwzFiiy8Rn6E0MtA13/Cxxgpan/N6UeNYR9oUu6kuJWxu6zCk98trcDp8CBhbtaeuq9SykCmXkFr2lWLoPcvLg==
"@types/node@18.15.13":
version "18.15.13"
@@ -4963,9 +4963,9 @@ caniuse-api@^3.0.0:
lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001517:
version "1.0.30001519"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601"
integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==
version "1.0.30001520"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz#62e2b7a1c7b35269594cf296a80bdf8cb9565006"
integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
captcha-canvas@3.2.1:
version "3.2.1"
@@ -6854,10 +6854,10 @@ eslint-visitor-keys@^2.1.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.2:
version "3.4.2"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz#8c2095440eca8c933bedcadf16fefa44dbe9ba5f"
integrity sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==
eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
version "3.4.3"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
eslint-webpack-plugin@^3.1.1:
version "3.2.0"
@@ -6917,14 +6917,14 @@ eslint@8.36.0:
text-table "^0.2.0"
eslint@^8.3.0:
version "8.46.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.46.0.tgz#a06a0ff6974e53e643acc42d1dcf2e7f797b3552"
integrity sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==
version "8.47.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.47.0.tgz#c95f9b935463fb4fad7005e626c7621052e90806"
integrity sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==
dependencies:
"@eslint-community/eslint-utils" "^4.2.0"
"@eslint-community/regexpp" "^4.6.1"
"@eslint/eslintrc" "^2.1.1"
"@eslint/js" "^8.46.0"
"@eslint/eslintrc" "^2.1.2"
"@eslint/js" "^8.47.0"
"@humanwhocodes/config-array" "^0.11.10"
"@humanwhocodes/module-importer" "^1.0.1"
"@nodelib/fs.walk" "^1.2.8"
@@ -6935,7 +6935,7 @@ eslint@^8.3.0:
doctrine "^3.0.0"
escape-string-regexp "^4.0.0"
eslint-scope "^7.2.2"
eslint-visitor-keys "^3.4.2"
eslint-visitor-keys "^3.4.3"
espree "^9.6.1"
esquery "^1.4.2"
esutils "^2.0.2"
@@ -7753,9 +7753,9 @@ globals@^11.1.0:
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
globals@^13.19.0:
version "13.20.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
version "13.21.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-13.21.0.tgz#163aae12f34ef502f5153cfbdd3600f36c63c571"
integrity sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==
dependencies:
type-fest "^0.20.2"
@@ -12118,9 +12118,9 @@ proto-list@~1.2.1:
integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
protobufjs@^6.10.2, protobufjs@^6.11.2:
version "6.11.3"
resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.3.tgz#637a527205a35caa4f3e2a9a4a13ddffe0e7af74"
integrity sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==
version "6.11.4"
resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.4.tgz#29a412c38bf70d89e537b6d02d904a6f448173aa"
integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
dependencies:
"@protobufjs/aspromise" "^1.1.2"
"@protobufjs/base64" "^1.1.2"