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

fix(App.js): remove automatic dark mode, because it's not part of 4chan UX and it's not old school, and the selected style is saved anyway

Browse Source
This commit is contained in:
plebeius.eth
2023-09-30 10:58:55 +02:00
parent 8a81177dd2
commit e3b577b690
1 changed files with 142 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+142 -189
View File
@@ -28,209 +28,162 @@ import packageJson from '../package.json';
const commitRef = process?.env?.REACT_APP_COMMIT_REF || ''; const commitRef = process?.env?.REACT_APP_COMMIT_REF || '';
export default function App() { export default function App() {
const { const { bodyStyle, setBodyStyle, setDefaultSubplebbits, isCaptchaOpen, setIsCaptchaOpen, setIsSettingsOpen, selectedStyle, setShowPostForm, setShowPostFormLink } =
bodyStyle, useGeneralStore((state) => state);
setBodyStyle,
setDefaultSubplebbits,
isCaptchaOpen,
setIsCaptchaOpen,
setIsSettingsOpen,
selectedStyle,
setSelectedStyle,
setShowPostForm,
setShowPostFormLink,
} = useGeneralStore((state) => state);
const location = useLocation(); const location = useLocation();
const isHomeRoute = location.pathname === '/'; const isElectron = window.electron && window.electron.isElectron;
const isElectron = window.electron && window.electron.isElectron;
const [, setNewErrorMessage] = useError(); const [, setNewErrorMessage] = useError();
const [, setNewSuccessMessage] = useSuccess(); const [, setNewSuccessMessage] = useSuccess();
const [, setNewInfoMessage] = useInfo(); const [, setNewInfoMessage] = useInfo();
const [infoMessageShown, setInfoMessageShown] = useState(false); const [infoMessageShown, setInfoMessageShown] = useState(false);
useEffect(() => { useEffect(() => {
const successToast = localStorage.getItem('successToast'); const successToast = localStorage.getItem('successToast');
const errorToast = localStorage.getItem('errorToast'); const errorToast = localStorage.getItem('errorToast');
if (successToast) { if (successToast) {
setNewSuccessMessage(successToast); setNewSuccessMessage(successToast);
localStorage.removeItem('successToast'); localStorage.removeItem('successToast');
} else if (errorToast) { } else if (errorToast) {
setNewErrorMessage(errorToast); setNewErrorMessage(errorToast);
localStorage.removeItem('errorToast'); localStorage.removeItem('errorToast');
} else { } else {
return; return;
} }
}, [setNewErrorMessage, setNewSuccessMessage]); }, [setNewErrorMessage, setNewSuccessMessage]);
// check for new version // check for new version
// TODO: delete this code and toast when v1.0.0 is released // TODO: delete this code and toast when v1.0.0 is released
useEffect(() => { useEffect(() => {
const fetchVersionInfo = async () => { const fetchVersionInfo = async () => {
try { try {
const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' }); const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' });
const packageData = await packageRes.json(); const packageData = await packageRes.json();
if (packageJson.version !== packageData.version && !infoMessageShown) { if (packageJson.version !== packageData.version && !infoMessageShown) {
const newVersionInfo = isElectron const newVersionInfo = isElectron
? `New version available, plebchan v${packageData.version}. You are using v${packageJson.version}. Download the latest version here: https://github.com/plebbit/plebchan/releases/latest` ? `New version available, plebchan v${packageData.version}. You are using v${packageJson.version}. Download the latest version here: https://github.com/plebbit/plebchan/releases/latest`
: `New version available, plebchan v${packageData.version}. You are using v${packageJson.version}. Refresh to update.`; : `New version available, plebchan v${packageData.version}. You are using v${packageJson.version}. Refresh to update.`;
setNewInfoMessage(newVersionInfo); setNewInfoMessage(newVersionInfo);
setInfoMessageShown(true); setInfoMessageShown(true);
} }
if (commitRef.length > 0) { if (commitRef.length > 0) {
const commitRes = await fetch('https://api.github.com/repos/plebbit/plebchan/commits?per_page=1&sha=development', { cache: 'no-cache' }); const commitRes = await fetch('https://api.github.com/repos/plebbit/plebchan/commits?per_page=1&sha=development', { cache: 'no-cache' });
const commitData = await commitRes.json(); const commitData = await commitRes.json();
const latestCommitHash = commitData[0].sha; const latestCommitHash = commitData[0].sha;
if (latestCommitHash.trim() !== commitRef.trim() && !infoMessageShown) { if (latestCommitHash.trim() !== commitRef.trim() && !infoMessageShown) {
const newVersionInfo = `New dev version available, commit ${latestCommitHash.slice(0, 7)}. You are using commit ${commitRef.slice(0, 7)}. Refresh to update.`; const newVersionInfo = `New dev version available, commit ${latestCommitHash.slice(0, 7)}. You are using commit ${commitRef.slice(0, 7)}. Refresh to update.`;
setNewInfoMessage(newVersionInfo); setNewInfoMessage(newVersionInfo);
setInfoMessageShown(true); setInfoMessageShown(true);
} }
} }
} catch (error) { } catch (error) {
console.error('Failed to fetch latest version info:', error); console.error('Failed to fetch latest version info:', error);
} }
}; };
fetchVersionInfo(); fetchVersionInfo();
}, [setNewInfoMessage, isElectron, infoMessageShown]); }, [setNewInfoMessage, isElectron, infoMessageShown]);
// preload banners // preload banners
useEffect(() => { useEffect(() => {
const loadImages = async () => { const loadImages = async () => {
const images = await importAll(require.context('../public/assets', true, /\.(png|jpe?g|svg)$/)); const images = await importAll(require.context('../public/assets', true, /\.(png|jpe?g|svg)$/));
const imageUrls = images.map((image) => image.default); const imageUrls = images.map((image) => image.default);
preloadImages(imageUrls); preloadImages(imageUrls);
}; };
loadImages(); loadImages();
}, []); }, []);
// automatic dark mode without interefering with user's selected style // fetch default subplebbits
useEffect(() => { useEffect(() => {
if (isHomeRoute) return; let didCancel = false;
fetch('https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json', { cache: 'no-cache' })
.then((res) => res.json())
.then((res) => {
if (!didCancel) {
setDefaultSubplebbits(res);
}
});
return () => {
didCancel = true;
};
}, [setDefaultSubplebbits]);
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); // handle nested routes
const isDarkMode = darkModeMediaQuery.matches; useEffect(() => {
const path = location.pathname;
if (path.endsWith('/post')) {
setShowPostFormLink(false);
setShowPostForm(true);
} else {
setShowPostFormLink(true);
setShowPostForm(false);
}
if (isDarkMode && !isHomeRoute) { if (path.endsWith('/settings')) {
setSelectedStyle('Tomorrow'); setIsSettingsOpen(true);
setBodyStyle({ } else {
background: '#1d1f21 none', setIsSettingsOpen(false);
color: '#c5c8c6', }
fontFamily: 'Arial, Helvetica, sans-serif', }, [location.pathname, setIsSettingsOpen, setShowPostForm, setShowPostFormLink]);
});
localStorage.setItem('selectedStyle', 'Tomorrow');
}
const darkModeListener = (e) => { return (
if (e.matches && !isHomeRoute) { <div>
setSelectedStyle('Tomorrow'); <Helmet>
setBodyStyle({ <link rel='apple-touch-icon' sizes='180x180' href='assets/logo/apple-touch-icon.png' />
background: '#1d1f21 none', <link rel='icon' type='image/png' sizes='32x32' href='assets/logo/favicon-32x32.png' />
color: '#c5c8c6', <link rel='icon' type='image/png' sizes='16x16' href='assets/logo/favicon-16x16.png' />
fontFamily: 'Arial, Helvetica, sans-serif', <link rel='manifest' href='site.webmanifest' />
}); <meta name='msapplication-TileColor' content='#fee9cd' />
localStorage.setItem('selectedStyle', 'Tomorrow'); <meta name='theme-color' content='#ffffff' />
} </Helmet>
}; <GlobalStyle background={bodyStyle.background} color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} />
<Routes>
darkModeMediaQuery.addEventListener('change', darkModeListener); <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
<Route path={`/p/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
return () => { <Route path='post' element={<Board />} />
darkModeMediaQuery.removeEventListener('change', darkModeListener); <Route path='settings' element={<Board />} />
}; </Route>
}, [isHomeRoute, setBodyStyle, setSelectedStyle]); <Route path={`/p/:subplebbitAddress/c/:threadCid`} element={<Thread setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Thread />} />
// fetch default subplebbits <Route path='settings' element={<Thread />} />
useEffect(() => { </Route>
let didCancel = false; <Route path={`/p/:subplebbitAddress/catalog`} element={<Catalog setBodyStyle={setBodyStyle} />}>
fetch('https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json', { cache: 'no-cache' }) <Route path='post' element={<Catalog />} />
.then((res) => res.json()) <Route path='settings' element={<Catalog />} />
.then((res) => { </Route>
if (!didCancel) { <Route path={`/p/:subplebbitAddress/description`} element={<Description setBodyStyle={setBodyStyle} />}>
setDefaultSubplebbits(res); <Route path='settings' element={<Description />} />
} </Route>
}); <Route path={`/p/:subplebbitAddress/rules`} element={<Rules setBodyStyle={setBodyStyle} />}>
return () => { <Route path='settings' element={<Rules />} />
didCancel = true; </Route>
}; <Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} />}>
}, [setDefaultSubplebbits]); <Route path='settings' element={<Pending />} />
</Route>
// handle nested routes <Route path={`/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} />}>
useEffect(() => { <Route path='settings' element={<Subscriptions />} />
const path = location.pathname; </Route>
if (path.endsWith('/post')) { <Route path={`p/subscriptions/catalog`} element={<SubscriptionsCatalog setBodyStyle={setBodyStyle} />}>
setShowPostFormLink(false); <Route path='settings' element={<SubscriptionsCatalog />} />
setShowPostForm(true); </Route>
} else { <Route path={`p/all`} element={<All setBodyStyle={setBodyStyle} />}>
setShowPostFormLink(true); <Route path='settings' element={<All />} />
setShowPostForm(false); </Route>
} <Route path={`p/all/catalog`} element={<AllCatalog setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<AllCatalog />} />
if (path.endsWith('/settings')) { </Route>
setIsSettingsOpen(true); <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
} else { </Routes>
setIsSettingsOpen(false); <Toast />
} <CaptchaModal selectedStyle={selectedStyle} isOpen={isCaptchaOpen} closeModal={() => setIsCaptchaOpen(false)} />
}, [location.pathname, setIsSettingsOpen, setShowPostForm, setShowPostFormLink]); </div>
);
return (
<div>
<Helmet>
<link rel='apple-touch-icon' sizes='180x180' href='assets/logo/apple-touch-icon.png' />
<link rel='icon' type='image/png' sizes='32x32' href='assets/logo/favicon-32x32.png' />
<link rel='icon' type='image/png' sizes='16x16' href='assets/logo/favicon-16x16.png' />
<link rel='manifest' href='site.webmanifest' />
<meta name='msapplication-TileColor' content='#fee9cd' />
<meta name='theme-color' content='#ffffff' />
</Helmet>
<GlobalStyle background={bodyStyle.background} color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} />
<Routes>
<Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
<Route path={`/p/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Board />} />
<Route path='settings' element={<Board />} />
</Route>
<Route path={`/p/:subplebbitAddress/c/:threadCid`} element={<Thread setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Thread />} />
<Route path='settings' element={<Thread />} />
</Route>
<Route path={`/p/:subplebbitAddress/catalog`} element={<Catalog setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Catalog />} />
<Route path='settings' element={<Catalog />} />
</Route>
<Route path={`/p/:subplebbitAddress/description`} element={<Description setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<Description />} />
</Route>
<Route path={`/p/:subplebbitAddress/rules`} element={<Rules setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<Rules />} />
</Route>
<Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<Pending />} />
</Route>
<Route path={`/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<Subscriptions />} />
</Route>
<Route path={`p/subscriptions/catalog`} element={<SubscriptionsCatalog setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<SubscriptionsCatalog />} />
</Route>
<Route path={`p/all`} element={<All setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<All />} />
</Route>
<Route path={`p/all/catalog`} element={<AllCatalog setBodyStyle={setBodyStyle} />}>
<Route path='settings' element={<AllCatalog />} />
</Route>
<Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
</Routes>
<Toast />
<CaptchaModal selectedStyle={selectedStyle} isOpen={isCaptchaOpen} closeModal={() => setIsCaptchaOpen(false)} />
</div>
);
} }