diff --git a/src/App.js b/src/App.js index 9b9ab199..f95e6737 100755 --- a/src/App.js +++ b/src/App.js @@ -22,8 +22,9 @@ import CaptchaModal from './components/modals/CaptchaModal'; import { importAll } from './components/ImageBanner'; import preloadImages from './utils/preloadImages'; import useError from "./hooks/useError"; +import useInfo from "./hooks/useInfo"; import useSuccess from "./hooks/useSuccess"; - +import packageJson from '../package.json'; export default function App() { const { @@ -41,21 +42,48 @@ export default function App() { const [, setNewErrorMessage] = useError(); const [, setNewSuccessMessage] = useSuccess(); + const [, setNewInfoMessage] = useInfo(); useEffect(() => { const successToast = localStorage.getItem("successToast"); const errorToast = localStorage.getItem("errorToast"); + const infoToast = localStorage.getItem("infoToast"); if (successToast) { setNewSuccessMessage(successToast); localStorage.removeItem("successToast"); } else if (errorToast) { setNewErrorMessage(errorToast); localStorage.removeItem("errorToast"); + } else if (infoToast) { + setNewInfoMessage(infoToast); + localStorage.removeItem("infoToast"); } else { return; } - }, [setNewErrorMessage, setNewSuccessMessage]); + }, [setNewErrorMessage, setNewSuccessMessage, setNewInfoMessage]); + + + // check for new version + useEffect(() => { + const fetchVersionInfo = async () => { + try { + const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' }); + const packageData = await packageRes.json(); + + if (packageJson.version !== packageData.version) { + const newVersionInfo = `New version available, plebchan v${packageData.version}. Refresh the page to update.`; + localStorage.setItem('infoToast', newVersionInfo);; + } + } catch (error) { + console.error('Failed to fetch latest version info:', error); + } + }; + + fetchVersionInfo(); + }, [setNewInfoMessage]); + + // preload banners useEffect(() => { diff --git a/src/components/BoardStats.jsx b/src/components/BoardStats.jsx index 1994b148..05851879 100644 --- a/src/components/BoardStats.jsx +++ b/src/components/BoardStats.jsx @@ -33,13 +33,13 @@ const BoardStats = ({ subplebbitAddress }) => { {showStats && ( - In the past hour, {stats.hourActiveUserCount} {pluralize(stats.hourActiveUserCount, 'user', 'users')} made {stats.hourPostCount} {pluralize(stats.hourPostCount, 'post', 'posts')} — in the past day, {stats.dayActiveUserCount} {pluralize(stats.dayActiveUserCount, 'user', 'users')} made {stats.dayPostCount} {pluralize(stats.dayPostCount, 'post', 'posts')} + In the past hour, {stats.hourActiveUserCount} {pluralize(stats.hourActiveUserCount, 'user', 'users')} made {stats.hourPostCount} {pluralize(stats.hourPostCount, 'post', 'posts')} / in the past day, {stats.dayActiveUserCount} {pluralize(stats.dayActiveUserCount, 'user', 'users')} made {stats.dayPostCount} {pluralize(stats.dayPostCount, 'post', 'posts')} - In the past week, {stats.weekActiveUserCount} {pluralize(stats.weekActiveUserCount, 'user', 'users')} made {stats.weekPostCount} {pluralize(stats.weekPostCount, 'post', 'posts')} — in the past month, {stats.monthActiveUserCount} {pluralize(stats.monthActiveUserCount, 'user', 'users')} made {stats.monthPostCount} {pluralize(stats.monthPostCount, 'post', 'posts')} + In the past week, {stats.weekActiveUserCount} {pluralize(stats.weekActiveUserCount, 'user', 'users')} made {stats.weekPostCount} {pluralize(stats.weekPostCount, 'post', 'posts')} / in the past month, {stats.monthActiveUserCount} {pluralize(stats.monthActiveUserCount, 'user', 'users')} made {stats.monthPostCount} {pluralize(stats.monthPostCount, 'post', 'posts')} - {unixToMMDDYYYY(subplebbit.createdAt)} board created — since then, {stats.allActiveUserCount} {pluralize(stats.allActiveUserCount, 'user', 'users')} have made {stats.allPostCount} {pluralize(stats.allPostCount, 'post', 'posts')} + {unixToMMDDYYYY(subplebbit.createdAt)} board created / since then, {stats.allActiveUserCount} {pluralize(stats.allActiveUserCount, 'user', 'users')} have made {stats.allPostCount} {pluralize(stats.allPostCount, 'post', 'posts')} )} diff --git a/src/components/modals/CaptchaModal.jsx b/src/components/modals/CaptchaModal.jsx index b5aa4438..7ac7cb79 100644 --- a/src/components/modals/CaptchaModal.jsx +++ b/src/components/modals/CaptchaModal.jsx @@ -37,7 +37,6 @@ const CaptchaModal = () => { }, [isCaptchaOpen, setIsAuthorDelete, setIsAuthorEdit, setIsModEdit]); - useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 480); window.addEventListener('resize', handleResize); @@ -71,7 +70,10 @@ const CaptchaModal = () => { const handleKeyDown = (event) => { if (event.key === "Enter") { event.preventDefault(); - submitCaptcha(); + submitCaptcha((response) => { + setCaptchaResponse(response); + resolveCaptchaPromise(response); + }); } }; diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 344fa278..2a97e032 100755 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -10,6 +10,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; import packageJson from '../../../package.json'; const {version} = packageJson; +const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''; const SettingsModal = ({ isOpen, closeModal }) => { @@ -28,7 +29,14 @@ const SettingsModal = ({ isOpen, closeModal }) => { const account = useAccount(); const { accounts } = useAccounts(); - const accountJson = useMemo(() => stringify({...account}), [account]) + + const accountJson = useMemo(() => { + if (account) { + const { plebbit, karma, unreadNotificationCount, ...restOfAccount } = account; + return stringify({ account: restOfAccount }); + } + }, [account]); + const [editedAccountJson, setEditedAccountJson] = useState(accountJson); useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson]) @@ -416,7 +424,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
- v{version} -  + v{version}{commitRef} -  {window.electron && window.electron.isElectron ? ( full node diff --git a/src/components/styled/GlobalStyle.styled.jsx b/src/components/styled/GlobalStyle.styled.jsx index 9ae4e259..dd49247c 100644 --- a/src/components/styled/GlobalStyle.styled.jsx +++ b/src/components/styled/GlobalStyle.styled.jsx @@ -81,7 +81,7 @@ export const GlobalStyle = createGlobalStyle` .reddit-embed { width: 500px; - height: 260px; + height: 520px; } } diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 5516b905..5c18e161 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal'; import EditLabel from '../EditLabel'; import ImageBanner from '../ImageBanner'; import ModerationModal from '../modals/ModerationModal'; +import Embed from '../Embed'; import OfflineIndicator from '../OfflineIndicator'; import PendingLabel from '../PendingLabel'; import Post from '../Post'; @@ -46,6 +47,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore'; import packageJson from '../../../package.json'; const {version} = packageJson; let lastVirtuosoStates = {}; +const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''; const All = () => { @@ -709,110 +711,106 @@ const All = () => {
{commentMediaInfo?.url ? ( -
-
- Link:  - { - commentMediaInfo?.url.length > 30 ? - commentMediaInfo?.url.slice(0, 30) + "(...)" : - commentMediaInfo?.url - } ({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) - {isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? ( - - -[ - {handleThumbnailClick(index, 'thread')}}>Close - ] - - ) : null} -
- {commentMediaInfo?.type === 'iframe' && ( -
- - {(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( -