Use querystring for FAQ state

app/FAQ.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { exoFontFamily } from './ThemeProvider';
+
 import { Box, Typography } from '@mui/material';
 
 export default function FAQ() {

app/FAQButton.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+import HelpIcon from '@mui/icons-material/Help';
+import React from 'react';
+import { Typography } from '@mui/material';
+
+import styled from '@emotion/styled';
+import { useQueryState } from 'nuqs';
+
+export default function FAQButton() {
+  const [faq, setFaq] = useQueryState('faq');
+
+  return faq ? (
+    <StyledButton onClick={() => setFaq(null)}>
+      <CancelIcon /> <Typography> Back </Typography>
+    </StyledButton>
+  ) : (
+    <StyledButton onClick={() => setFaq('open')}>
+      <HelpIcon /> <Typography> FAQ </Typography>
+    </StyledButton>
+  );
+}
+
+const StyledButton = styled.button`
+  background: white;
+  border: 0;
+  cursor: pointer;
+  width: 70px;
+
+  &:hover {
+    border-radius: 5px;
+    outline: 3px solid #0150b4;
+    p {
+      font-weight: bold;
+    }
+  }
+`;

app/FAQContainer.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Box } from '@mui/material';
+import FAQ from './FAQ';
+import React from 'react';
+import ViewPicker from './ViewPicker';
+
+import { useQueryState } from 'nuqs';
+
+export default function FAQContainer() {
+  const [faqOpen, _] = useQueryState('faq');
+
+  return (
+    <>
+      {faqOpen && <FAQ />}
+
+      {/* Don't lose state when FAQ is opened */}
+      <Box sx={{ display: faqOpen ? 'none' : 'block', height: '100%' }}>
+        <ViewPicker />
+      </Box>
+    </>
+  );
+}

app/page.tsx

@@ -1,21 +1,13 @@
-'use client';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import FAQ from './FAQ';
-import HelpIcon from '@mui/icons-material/Help';
-import ViewPicker from './ViewPicker';
+import FAQButton from './FAQButton';
+import FAQContainer from './FAQContainer';
 
 import { exoFontFamily } from './ThemeProvider';
 
-import styled from '@emotion/styled';
-
 import { Box, Grid, Typography } from '@mui/material';
 
 import React, { memo } from 'react';
 
 export default memo(function Home() {
-  const [faq, setFaq] = React.useState(false);
-
   return (
     <main>
       <Grid
@@ -53,41 +45,13 @@ export default memo(function Home() {
             </Typography>
 
             <Box sx={{ display: 'flex-item', mb: 1 }}>
-              {faq ? (
-                <StyledButton onClick={() => setFaq(false)}>
-                  <CancelIcon /> <Typography> Back </Typography>
-                </StyledButton>
-              ) : (
-                <StyledButton onClick={() => setFaq(true)}>
-                  <HelpIcon /> <Typography> FAQ </Typography>
-                </StyledButton>
-              )}
+              <FAQButton />
             </Box>
           </div>
 
-          {faq && <FAQ />}
-
-          {/* Don't lose state when FAQ is opened */}
-          <Box sx={{ display: faq ? 'none' : 'block', height: '100%' }}>
-            <ViewPicker />
-          </Box>
+          <FAQContainer />
         </Grid>
       </Grid>
     </main>
   );
 });
-
-const StyledButton = styled.button`
-  background: white;
-  border: 0;
-  cursor: pointer;
-  width: 70px;
-
-  &:hover {
-    border-radius: 5px;
-    outline: 3px solid #0150b4;
-    p {
-      font-weight: bold;
-    }
-  }
-`;

package.json

@@ -49,6 +49,7 @@
     "date-fns": "^3.6.0",
     "immer": "^10.1.1",
     "next": "^14.2.4",
+    "nuqs": "^1.17.5",
     "prisma-repl": "^1.4.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",