sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More app directory refactoring

Browse source
This commit is contained in:
Darren Clarke 2023-06-28 09:09:45 +00:00 • committed by GitHub
parent b312a8c862
commit 8bbeaa25cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 903 additions and 899 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/leafcutter/app/_components/AppProvider.tsx
View file

@ -8,7 +8,7 @@ import {
useState,
PropsWithChildren,
} from "react";
import { colors, typography } from "styles/theme";
import { colors, typography } from "@/app/_styles/theme";
const basePath = process.env.GITLAB_CI
? "/link/link-stack/apps/leafcutter"

10
apps/leafcutter/app/_components/GettingStartedDialog.tsx
View file

@ -3,7 +3,7 @@
import { FC, useState } from "react";
import { Dialog, Box, Grid, Checkbox, IconButton } from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { useRouter } from "next/router";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
@ -62,9 +62,11 @@ export const GettingStartedDialog: FC = () => {
typography: { h4 },
} = useAppContext();
const t = useTranslate();
const [completedItems, setCompletedItems] = useState([] as any[]);
const router = useRouter();
const open = router.query.tooltip?.toString() === "checklist";
const [completedItems, setCompletedItems] = useState([] as any[]);
const searchParams = useSearchParams();
const pathname = usePathname();
const open = searchParams.get("tooltip")?.toString() === "checklist";
const toggleCompletedItem = (item: any) => {
if (completedItems.includes(item)) {
setCompletedItems(completedItems.filter((i) => i !== item));
@ -92,7 +94,7 @@ export const GettingStartedDialog: FC = () => {
<Box sx={{ ...h4, mb: 3 }}>{t("getStartedChecklist")}</Box>
</Grid>
<Grid item>
<IconButton onClick={() => router.push(router.pathname)}>
<IconButton onClick={() => router.push(pathname)}>
<CloseIcon sx={{ color: almostBlack, fontSize: "18px" }} />
</IconButton>
</Grid>

5
apps/leafcutter/app/_components/HelpButton.tsx
View file

@ -1,20 +1,21 @@
"use client";
import { FC, useState } from "react";
import { useRouter } from "next/router";
import { useRouter, usePathname } from "next/navigation";
import { Button } from "@mui/material";
import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
import { useAppContext } from "./AppProvider";
export const HelpButton: FC = () => {
const router = useRouter();
const pathname = usePathname();
const [helpActive, setHelpActive] = useState(false);
const {
colors: { leafcutterElectricBlue },
} = useAppContext();
const onClick = () => {
if (helpActive) {
router.push(router.pathname);
router.push(pathname);
} else {
router.push("/?tooltip=welcome");
}

8
apps/leafcutter/app/_components/Home.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { useEffect, FC } from "react";
import { useRouter } from "next/router";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import ReactMarkdown from "react-markdown";
import { Grid, Button } from "@mui/material";
@ -14,11 +14,11 @@ import { useAppContext } from "@/app/_components/AppProvider";
type HomeProps = {
visualizations: any;
embedded: boolean;
};
export const Home: FC<HomeProps> = ({ visualizations, embedded }) => {
export const Home: FC<HomeProps> = ({ visualizations }) => {
const router = useRouter();
const pathname = usePathname();
const cookieName = "homeIntroComplete";
const [cookies, setCookie] = useCookies([cookieName]);
const t = useTranslate();
@ -31,7 +31,7 @@ export const Home: FC<HomeProps> = ({ visualizations, embedded }) => {
useEffect(() => {
if (homeIntroComplete === 0) {
setCookie(cookieName, `${1}`, { path: "/" });
router.push(`${router.pathname}?tooltip=welcome`);
router.push(`${pathname}?tooltip=welcome`);
}
}, [homeIntroComplete, router, setCookie]);

7
apps/leafcutter/app/_components/LanguageSelect.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { useRouter } from "next/router";
import { useRouter } from "next/navigation";
import { IconButton, Menu, MenuItem, Box } from "@mui/material";
import { KeyboardArrowDown as KeyboardArrowDownIcon } from "@mui/icons-material";
import {
@ -17,6 +17,7 @@ export const LanguageSelect = () => {
} = useAppContext();
const router = useRouter();
const locales: any = { en: "English", fr: "Français" };
const locale = "en";
const popupState = usePopupState({ variant: "popover", popupId: "language" });
return (
@ -38,7 +39,7 @@ export const LanguageSelect = () => {
},
}}
>
{locales[router.locale as any] ?? locales.en}
{locales[locale as any] ?? locales.en}
<KeyboardArrowDownIcon />
</IconButton>
<Menu {...bindMenu(popupState)}>
@ -46,7 +47,7 @@ export const LanguageSelect = () => {
<MenuItem
key={locale}
onClick={() => {
router.push(router.route, router.route, { locale });
// router.push(router.route, router.route, { locale });
popupState.close();
}}
>

10
apps/leafcutter/app/_components/MultiProvider.tsx
View file

@ -1,3 +1,5 @@
"use client";
/* eslint-disable react/jsx-props-no-spreading */
import { FC, PropsWithChildren } from "react";
import { SessionProvider } from "next-auth/react";
@ -5,19 +7,17 @@ import { CssBaseline } from "@mui/material";
import { CookiesProvider } from "react-cookie";
import { I18n } from "react-polyglot";
import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
("use client");
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { AppProvider } from "@/app/_components/AppProvider";
import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
import en from "locales/en.json";
import fr from "locales/fr.json";
import en from "app/_locales/en.json";
import fr from "app/_locales/fr.json";
import "@fontsource/poppins/400.css";
import "@fontsource/poppins/700.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";
import "@fontsource/playfair-display/900.css";
import "styles/global.css";
import "app/_styles/global.css";
import { LicenseInfo } from "@mui/x-data-grid-pro";
LicenseInfo.setLicenseKey(process.env.MUI_LICENSE_KEY ?? "");

2
apps/leafcutter/app/_components/QueryText.tsx
View file

@ -4,7 +4,7 @@ import { FC, useState, useEffect } from "react";
import { Box, Grid } from "@mui/material";
import { useTranslate } from "react-polyglot";
import taxonomy from "app/_config/taxonomy.json";
import { colors } from "styles/theme";
import { colors } from "@/app/_styles/theme";
import { useAppContext } from "./AppProvider";
export const QueryText: FC = () => {

6
apps/leafcutter/app/_components/Sidebar.tsx
View file

@ -18,7 +18,7 @@ import {
Drawer,
} from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "@/app/_components/AppProvider";
import { Tooltip } from "@/app/_components/Tooltip";
@ -101,8 +101,8 @@ interface SidebarProps {
export const Sidebar: FC<SidebarProps> = ({ open }) => {
const t = useTranslate();
const router = useRouter();
const section = router.pathname.split("/")[1];
const pathname = usePathname();
const section = pathname.split("/")[1];
const {
colors: { white }, // leafcutterElectricBlue, leafcutterLightBlue,
} = useAppContext();

10
apps/leafcutter/app/_components/Tooltip.tsx
View file

@ -2,7 +2,7 @@
/* eslint-disable react/require-default-props */
import { FC } from "react";
import { useRouter } from "next/router";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import {
Box,
Grid,
@ -40,7 +40,9 @@ export const Tooltip: FC<TooltipProps> = ({
colors: { white, leafcutterElectricBlue, almostBlack },
} = useAppContext();
const router = useRouter();
const activeTooltip = router.query.tooltip?.toString();
const pathname = usePathname();
const searchParams = useSearchParams();
const activeTooltip = searchParams.get('tooltip')?.toString();
const open = activeTooltip === tooltipID;
const showNavigation = true;
@ -51,7 +53,7 @@ export const Tooltip: FC<TooltipProps> = ({
<Grid container direction="column">
<Grid item container direction="row-reverse">
<Grid item>
<IconButton onClick={() => router.push(router.pathname)}>
<IconButton onClick={() => router.push(pathname)}>
<CloseIcon
sx={{
color: leafcutterElectricBlue,
@ -125,7 +127,7 @@ export const Tooltip: FC<TooltipProps> = ({
color: leafcutterElectricBlue,
textTransform: "none",
}}
onClick={() => router.push(router.pathname)}
onClick={() => router.push(pathname)}
>
{t("done")}
</Button>

3
apps/leafcutter/app/_components/Welcome.tsx
View file

@ -8,9 +8,12 @@ import { useAppContext } from "./AppProvider";
export const Welcome = () => {
const t = useTranslate();
const { data: session } = useSession();
/*
const {
user: { name },
} = session as any;
*/
const name = "Test User";
const {
colors: { white, leafcutterElectricBlue },
typography: { h1, h4, p },

5
apps/leafcutter/app/_components/WelcomeDialog.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { Box, Grid, Dialog, Button } from "@mui/material";
import { useRouter } from "next/router";
import { useRouter, useSearchParams } from "next/navigation";
// import { useSession } from "next-auth/react";
// import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";
@ -9,13 +9,14 @@ import { useAppContext } from "./AppProvider";
export const WelcomeDialog = () => {
// const t = useTranslate();
const router = useRouter();
const searchParams = useSearchParams();
// const { data: session } = useSession();
// const { user } = session;
const {
colors: { white, leafcutterElectricBlue },
typography: { h1, h6, p },
} = useAppContext();
const activeTooltip = router.query.tooltip?.toString();
const activeTooltip = searchParams.get('tooltip')?.toString();
const open = activeTooltip === "welcome";
return (