MAINT: add banner for town hall

neurostuff · Nov 6, 2024 · 8864844 · 8864844
1 parent 3b23585
commit 8864844
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 106 deletions.
diff --git a/compose/neurosynth-frontend/src/App.tsx b/compose/neurosynth-frontend/src/App.tsx
@@ -1,78 +1,82 @@
-import Close from '@mui/icons-material/Close';
-import { IconButton } from '@mui/material';
-import { AxiosError } from 'axios';
-import useGoogleAnalytics from 'hooks/useGoogleAnalytics';
-import { SnackbarKey, SnackbarProvider } from 'notistack';
-import { useEffect, useRef } from 'react';
-import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
-import Navbar from 'components/Navbar/Navbar';
-import useGetToken from './hooks/useGetToken';
-import BaseNavigation from 'pages/BaseNavigation/BaseNavigation';
-import { useLocation } from 'react-router-dom';
+import Close from "@mui/icons-material/Close";
+import { IconButton } from "@mui/material";
+import { AxiosError } from "axios";
+import useGoogleAnalytics from "hooks/useGoogleAnalytics";
+import { SnackbarKey, SnackbarProvider } from "notistack";
+import { useEffect, useRef } from "react";
+import { QueryCache, QueryClient, QueryClientProvider } from "react-query";
+import Navbar from "components/Navbar/Navbar";
+import useGetToken from "./hooks/useGetToken";
+import BaseNavigation from "pages/BaseNavigation/BaseNavigation";
+import { useLocation } from "react-router-dom";
+import Downbanner from "components/Downbanner";
 
 const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            retry: 0,
-            refetchOnWindowFocus: false,
-            // staleTime: 5000, // https://tkdodo.eu/blog/practical-react-query#the-defaults-explained
-        },
+  defaultOptions: {
+    queries: {
+      retry: 0,
+      refetchOnWindowFocus: false,
+      // staleTime: 5000, // https://tkdodo.eu/blog/practical-react-query#the-defaults-explained
     },
-    queryCache: new QueryCache({
-        onError: (error) => {
-            console.log({ error });
-            const responseStatus = (error as AxiosError)?.response?.status;
-            if (responseStatus && responseStatus === 404) {
-                console.error('could not find resource');
-            }
-        },
-    }),
+  },
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.log({ error });
+      const responseStatus = (error as AxiosError)?.response?.status;
+      if (responseStatus && responseStatus === 404) {
+        console.error("could not find resource");
+      }
+    },
+  }),
 });
 
 declare global {
-    interface Window {
-        gtag?: (
-            type: 'event' | 'config' | 'get' | 'set' | 'consent',
-            action: 'login' | 'page_view',
-            options?: any
-        ) => void;
-    }
+  interface Window {
+    gtag?: (
+      type: "event" | "config" | "get" | "set" | "consent",
+      action: "login" | "page_view",
+      options?: any
+    ) => void;
+  }
 }
 
 function App() {
-    const notistackRef = useRef<SnackbarProvider>(null);
-    useGetToken();
-    useGoogleAnalytics();
+  const notistackRef = useRef<SnackbarProvider>(null);
+  useGetToken();
+  useGoogleAnalytics();
 
-    const location = useLocation();
-    useEffect(() => {
-        if (window.gtag) {
-            window.gtag('event', 'page_view', {
-                page_path: `${location.pathname}${location.search}`,
-            });
-        }
-    }, [location]);
+  const location = useLocation();
+  useEffect(() => {
+    if (window.gtag) {
+      window.gtag("event", "page_view", {
+        page_path: `${location.pathname}${location.search}`,
+      });
+    }
+  }, [location]);
 
-    const handleCloseSnackbar = (key: SnackbarKey) => (_event: React.MouseEvent) => {
-        if (notistackRef?.current?.closeSnackbar) notistackRef.current?.closeSnackbar(key);
+  const handleCloseSnackbar =
+    (key: SnackbarKey) => (_event: React.MouseEvent) => {
+      if (notistackRef?.current?.closeSnackbar)
+        notistackRef.current?.closeSnackbar(key);
     };
 
-    return (
-        <QueryClientProvider client={queryClient}>
-            <SnackbarProvider
-                ref={notistackRef}
-                autoHideDuration={8000}
-                action={(key) => (
-                    <IconButton onClick={handleCloseSnackbar(key)}>
-                        <Close sx={{ color: 'white' }} />
-                    </IconButton>
-                )}
-            >
-                <Navbar />
-                <BaseNavigation />
-            </SnackbarProvider>
-        </QueryClientProvider>
-    );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SnackbarProvider
+        ref={notistackRef}
+        autoHideDuration={8000}
+        action={(key) => (
+          <IconButton onClick={handleCloseSnackbar(key)}>
+            <Close sx={{ color: "white" }} />
+          </IconButton>
+        )}
+      >
+        <Downbanner />
+        <Navbar />
+        <BaseNavigation />
+      </SnackbarProvider>
+    </QueryClientProvider>
+  );
 }
 
 export default App;
diff --git a/compose/neurosynth-frontend/src/components/Downbanner.tsx b/compose/neurosynth-frontend/src/components/Downbanner.tsx
@@ -1,52 +1,65 @@
-import { Cancel } from '@mui/icons-material';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import { Box, IconButton } from '@mui/material';
-import BaseNavigationStyles from 'pages/BaseNavigation/BaseNavigation.styles';
-import { useState } from 'react';
+import { Cancel } from "@mui/icons-material";
+import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import { Box, IconButton, Link } from "@mui/material";
+import BaseNavigationStyles from "pages/BaseNavigation/BaseNavigation.styles";
+import { useState } from "react";
+
+const localStorageDownBannerKey = "hide-downbanner-nov-6-2024";
 
 const Downbanner: React.FC = () => {
-    const shouldHide = !!localStorage.getItem('hide-downbanner-sep-13-2024');
-    const [hideBanner, setHideBanner] = useState(shouldHide);
+  const shouldHide = !!localStorage.getItem(localStorageDownBannerKey);
+  const [hideBanner, setHideBanner] = useState(shouldHide);
 
-    if (hideBanner) return <></>;
+  if (hideBanner) return <></>;
 
-    return (
-        <Box
-            sx={{
-                backgroundColor: 'secondary.main',
-                color: 'primary.contrastText',
-                width: '100%',
-                paddingY: '0.5rem',
-            }}
-        >
-            <Box
-                sx={[
-                    BaseNavigationStyles.pagesContainer,
-                    {
-                        marginY: '0',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    },
-                ]}
-            >
-                <Box display="flex" alignItems="center">
-                    <ErrorOutlineIcon sx={{ mr: '1rem' }} />
-                    Neurosynth-compose will be undergoing planned maintenance and will be offline on
-                    friday (Sep/13/2024)
-                </Box>
-                <IconButton
-                    onClick={() => {
-                        localStorage.setItem('hide-downbanner-sep-13-2024', 'true');
-                        setHideBanner(true);
-                    }}
-                    sx={{ padding: 0, ':hover': { backgroundColor: 'secondary.light' } }}
-                >
-                    <Cancel />
-                </IconButton>
-            </Box>
+  return (
+    <Box
+      sx={{
+        backgroundColor: "primary.dark",
+        color: "primary.contrastText",
+        width: "100%",
+        paddingY: "0.5rem",
+      }}
+    >
+      <Box
+        sx={[
+          BaseNavigationStyles.pagesContainer,
+          {
+            marginY: "0",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          },
+        ]}
+      >
+        <Box display="flex" alignItems="center">
+          <EmojiPeopleIcon sx={{ mr: "1rem" }} />
+          Join us next Wednesday, November 13th at 19:00 ET for the inaugural
+          Neurosynth Compose Virtual Town Hall!{" "}
+          <Link
+            color="primary.contrastText"
+            sx={{ marginLeft: "4px" }}
+            href="https://smmo1.mjt.lu/lnk/AUUAAFUYj_MAAAAYAkQAAMQWKMIAAAABy9QAAd5pACejZgBnKVfVT2hXpDCyQC6H3aykCv_XyAAbJus/1/mr5Wo-0t0LWaATWN2bFHLA/aHR0cHM6Ly90YWxseS5zby9yLzN5cWIwNA"
+            target="_blank"
+          >
+            Click here to register
+          </Link>
         </Box>
-    );
+        <IconButton
+          onClick={() => {
+            localStorage.setItem(localStorageDownBannerKey, "true");
+            setHideBanner(true);
+          }}
+          sx={{
+            padding: 0,
+            ":hover": { backgroundColor: "secondary.light" },
+          }}
+        >
+          <Cancel />
+        </IconButton>
+      </Box>
+    </Box>
+  );
 };
 
 export default Downbanner;