From 079b6e70f3b309a44c1a1f86805d817af667137b Mon Sep 17 00:00:00 2001 From: Philip Truong Date: Sun, 18 Feb 2024 18:11:31 -0800 Subject: [PATCH 01/13] draft --- site/src/App.tsx | 18 +++++++++++++ .../ChangelogModal/ChangelogModal.scss | 0 .../ChangelogModal/ChangelogModal.tsx | 26 +++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 site/src/component/ChangelogModal/ChangelogModal.scss create mode 100644 site/src/component/ChangelogModal/ChangelogModal.tsx diff --git a/site/src/App.tsx b/site/src/App.tsx index 997c5189..8afbaf71 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -7,6 +7,7 @@ import './style/theme.scss'; import './App.scss'; import AppHeader from './component/AppHeader/AppHeader'; +import ChangelogModal from './component/ChangelogModal/ChangelogModal'; import Footer from './component/Footer/Footer'; import SearchPage from './pages/SearchPage'; import CoursePage from './pages/CoursePage'; @@ -36,6 +37,8 @@ export default function App() { const [cookies] = useCookies(['user']); const [prevDarkMode, setPrevDarkMode] = useState(false); // light theme is default on page load + const [showModal, setShowModal] = useState(false); + /** * we run this check at render-time and compare with previous state because a useEffect * would cause a flicker for dark mode users on page load since the first render would be without @@ -75,6 +78,11 @@ export default function App() { } }; + const closeModal = () => { + setShowModal(false); + localStorage.removeItem('showModal'); + }; + useEffect(() => { // if logged in, load user prefs (theme) from mongo if (cookies.user) { @@ -87,6 +95,15 @@ export default function App() { } }, [cookies.user, setThemeState]); + useEffect(() => { + // display the changelog modal if it is the user's first time seeing it (tracked in local storage) + let seen = localStorage.getItem('showModal'); + if (!seen) { + setShowModal(true); + localStorage.setItem('showModal', '1'); + } + }, []); + return ( @@ -108,6 +125,7 @@ export default function App() {