From 3f33dcb37a900ec5d0710842d7f0c9b0e4f0cf2e Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 18 Sep 2023 11:55:30 +0200 Subject: [PATCH 1/2] fix: show new version info toast only once --- package.json | 12 +- src/App.js | 398 +++++++++++++++++++++++++-------------------------- yarn.lock | 2 +- 3 files changed, 202 insertions(+), 210 deletions(-) diff --git a/package.json b/package.json index b9bc5710..3212b995 100644 --- a/package.json +++ b/package.json @@ -128,26 +128,26 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@capacitor/cli": "3.6.0", "concurrently": "8.0.1", + "conventional-changelog-cli": "4.1.0", "cordova-res": "0.15.4", "cross-env": "7.0.3", + "cz-conventional-changelog": "^3.3.0", "decompress": "4.2.1", "electron": "19.1.8", "electron-builder": "23.0.9", + "husky": "4.3.8", + "lint-staged": "12.3.8", "prettier": "2.3.2", "source-map-explorer": "2.5.3", "typescript": "5.0.2", - "wait-on": "7.0.1", - "conventional-changelog-cli": "4.1.0", - "cz-conventional-changelog": "3.3.0", - "husky": "4.3.8", - "lint-staged": "12.3.8" + "wait-on": "7.0.1" }, "resolutions": { "styled-components": "^5" }, "lint-staged": { "{src,test,config}/**/*.{cjs,js,jsx,ts,tsx}": [ - "prettier --config config/prettier.config.js --write" + "prettier --config prettier.config.js --write" ] }, "husky": { diff --git a/src/App.js b/src/App.js index e3f2e093..e4c825ec 100755 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Route, Routes, useLocation } from 'react-router-dom'; import { Helmet } from 'react-helmet-async'; import 'react-tooltip/dist/react-tooltip.css'; @@ -21,224 +21,216 @@ import Thread from './components/views/Thread'; 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 useError from './hooks/useError'; +import useInfo from './hooks/useInfo'; +import useSuccess from './hooks/useSuccess'; import packageJson from '../package.json'; const commitRef = process?.env?.REACT_APP_COMMIT_REF || ''; export default function App() { - const { - bodyStyle, setBodyStyle, - setDefaultSubplebbits, - isCaptchaOpen, setIsCaptchaOpen, - setIsSettingsOpen, - selectedStyle, setSelectedStyle, - setShowPostForm, - setShowPostFormLink, - } = useGeneralStore(state => state); + const { + bodyStyle, + setBodyStyle, + setDefaultSubplebbits, + isCaptchaOpen, + setIsCaptchaOpen, + setIsSettingsOpen, + selectedStyle, + setSelectedStyle, + setShowPostForm, + setShowPostFormLink, + } = useGeneralStore((state) => state); - const location = useLocation(); - const isHomeRoute = location.pathname === "/"; - const isElectron = window.electron && window.electron.isElectron; + const location = useLocation(); + const isHomeRoute = location.pathname === '/'; + const isElectron = window.electron && window.electron.isElectron; - const [, setNewErrorMessage] = useError(); - const [, setNewSuccessMessage] = useSuccess(); - const [, setNewInfoMessage] = useInfo(); + const [, setNewErrorMessage] = useError(); + const [, setNewSuccessMessage] = useSuccess(); + const [, setNewInfoMessage] = useInfo(); + const [infoMessageShown, setInfoMessageShown] = useState(false); - useEffect(() => { - const successToast = localStorage.getItem("successToast"); - const errorToast = localStorage.getItem("errorToast"); - if (successToast) { - setNewSuccessMessage(successToast); - localStorage.removeItem("successToast"); - } else if (errorToast) { - setNewErrorMessage(errorToast); - localStorage.removeItem("errorToast"); - } else { - return; - } - }, [setNewErrorMessage, setNewSuccessMessage]); - + useEffect(() => { + const successToast = localStorage.getItem('successToast'); + const errorToast = localStorage.getItem('errorToast'); + if (successToast) { + setNewSuccessMessage(successToast); + localStorage.removeItem('successToast'); + } else if (errorToast) { + setNewErrorMessage(errorToast); + localStorage.removeItem('errorToast'); + } else { + return; + } + }, [setNewErrorMessage, setNewSuccessMessage]); - // check for new version - // TODO: delete this code and toast when v1.0.0 is released - 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(); + // check for new version + // TODO: delete this code and toast when v1.0.0 is released + 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 = 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}. Refresh to update.`; - setNewInfoMessage(newVersionInfo); - } + if (packageJson.version !== packageData.version && !infoMessageShown) { + 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}. Refresh to update.`; + setNewInfoMessage(newVersionInfo); + setInfoMessageShown(true); + } - 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 commitData = await commitRes.json(); - - const latestCommitHash = commitData[0].sha; - - if (latestCommitHash.trim() !== commitRef.trim()) { - const newVersionInfo = `New dev version available, commit ${latestCommitHash.slice(0, 7)}. You are using commit ${commitRef.slice(0, 7)}. Refresh to update.`; - setNewInfoMessage(newVersionInfo); - } - } - } catch (error) { - console.error('Failed to fetch latest version info:', error); - } - }; + 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 commitData = await commitRes.json(); - fetchVersionInfo(); - }, [setNewInfoMessage, isElectron]); + const latestCommitHash = commitData[0].sha; - - // preload banners - useEffect(() => { - const loadImages = async () => { - const images = await importAll(require.context('../public/assets', true, /\.(png|jpe?g|svg)$/)); - const imageUrls = images.map((image) => image.default); - preloadImages(imageUrls); - }; + 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.`; + setNewInfoMessage(newVersionInfo); + setInfoMessageShown(true); + } + } + } catch (error) { + console.error('Failed to fetch latest version info:', error); + } + }; - loadImages(); - }, []); + fetchVersionInfo(); + }, [setNewInfoMessage, isElectron, infoMessageShown]); + // preload banners + useEffect(() => { + const loadImages = async () => { + const images = await importAll(require.context('../public/assets', true, /\.(png|jpe?g|svg)$/)); + const imageUrls = images.map((image) => image.default); + preloadImages(imageUrls); + }; - // automatic dark mode without interefering with user's selected style - useEffect(() => { - if (isHomeRoute) return; - - const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - const isDarkMode = darkModeMediaQuery.matches; - - if (isDarkMode && !isHomeRoute) { - setSelectedStyle('Tomorrow'); - setBodyStyle({ - background: '#1d1f21 none', - color: '#c5c8c6', - fontFamily: 'Arial, Helvetica, sans-serif' - }); - localStorage.setItem('selectedStyle', 'Tomorrow'); - } - - const darkModeListener = (e) => { - if (e.matches && !isHomeRoute) { - setSelectedStyle('Tomorrow'); - setBodyStyle({ - background: '#1d1f21 none', - color: '#c5c8c6', - fontFamily: 'Arial, Helvetica, sans-serif' - }); - localStorage.setItem('selectedStyle', 'Tomorrow'); - } - }; - - darkModeMediaQuery.addEventListener('change', darkModeListener); - - return () => { - darkModeMediaQuery.removeEventListener('change', darkModeListener); - }; - }, [isHomeRoute, setBodyStyle, setSelectedStyle]); - - // fetch default subplebbits - useEffect(() => { - 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]); + loadImages(); + }, []); - // handle nested routes - useEffect(() => { - const path = location.pathname; - if (path.endsWith('/post')) { - setShowPostFormLink(false); - setShowPostForm(true); - } else { - setShowPostFormLink(true); - setShowPostForm(false); - } + // automatic dark mode without interefering with user's selected style + useEffect(() => { + if (isHomeRoute) return; - if (path.endsWith('/settings')) { - setIsSettingsOpen(true); - } else { - setIsSettingsOpen(false); - } - - }, [location.pathname, setIsSettingsOpen, setShowPostForm, setShowPostFormLink]); + const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const isDarkMode = darkModeMediaQuery.matches; - return ( -
- - - - - - - - - - - } /> - }> - } /> - } /> - - }> - } /> - } /> - - }> - } /> - } /> - - }> - } /> - - }> - } /> - - }> - } /> - - }> - } /> - - }> - } /> - - }> - } /> - - }> - } /> - - } /> - - - setIsCaptchaOpen(false)} - /> -
-)} \ No newline at end of file + if (isDarkMode && !isHomeRoute) { + setSelectedStyle('Tomorrow'); + setBodyStyle({ + background: '#1d1f21 none', + color: '#c5c8c6', + fontFamily: 'Arial, Helvetica, sans-serif', + }); + localStorage.setItem('selectedStyle', 'Tomorrow'); + } + + const darkModeListener = (e) => { + if (e.matches && !isHomeRoute) { + setSelectedStyle('Tomorrow'); + setBodyStyle({ + background: '#1d1f21 none', + color: '#c5c8c6', + fontFamily: 'Arial, Helvetica, sans-serif', + }); + localStorage.setItem('selectedStyle', 'Tomorrow'); + } + }; + + darkModeMediaQuery.addEventListener('change', darkModeListener); + + return () => { + darkModeMediaQuery.removeEventListener('change', darkModeListener); + }; + }, [isHomeRoute, setBodyStyle, setSelectedStyle]); + + // fetch default subplebbits + useEffect(() => { + 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]); + + // handle nested routes + useEffect(() => { + const path = location.pathname; + if (path.endsWith('/post')) { + setShowPostFormLink(false); + setShowPostForm(true); + } else { + setShowPostFormLink(true); + setShowPostForm(false); + } + + if (path.endsWith('/settings')) { + setIsSettingsOpen(true); + } else { + setIsSettingsOpen(false); + } + }, [location.pathname, setIsSettingsOpen, setShowPostForm, setShowPostFormLink]); + + return ( +
+ + + + + + + + + + + } /> + }> + } /> + } /> + + }> + } /> + } /> + + }> + } /> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + }> + } /> + + } /> + + + setIsCaptchaOpen(false)} /> +
+ ); +} diff --git a/yarn.lock b/yarn.lock index 74d27722..ed955d69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6198,7 +6198,7 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== -cz-conventional-changelog@3.3.0: +cz-conventional-changelog@3.3.0, cz-conventional-changelog@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2" integrity sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw== From bc25518eb5be14c2f7c1d297efe7f1f6688e3a28 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 18 Sep 2023 16:50:56 +0200 Subject: [PATCH 2/2] chore: release v0.1.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3212b995..e64de882 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plebchan", - "version": "0.1.11", + "version": "0.1.12", "private": true, "dependencies": { "@babel/core": "7.21.3",