109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, FC } from "react";
|
||
import { useRouter, usePathname } from "next/navigation";
|
||
import Link from "next/link";
|
||
import { Grid, Button } from "@mui/material";
|
||
import { useTranslate } from "react-polyglot";
|
||
import { useCookies } from "react-cookie";
|
||
import { Welcome } from "./Welcome";
|
||
import { WelcomeDialog } from "./WelcomeDialog";
|
||
import { VisualizationCard } from "./VisualizationCard";
|
||
import { useLeafcutterContext } from "./LeafcutterProvider";
|
||
import { getBasePath } from "../lib/utils";
|
||
|
||
type HomeProps = {
|
||
visualizations: any;
|
||
showWelcome?: boolean;
|
||
};
|
||
|
||
export const Home: FC<HomeProps> = ({
|
||
visualizations = [],
|
||
showWelcome = true,
|
||
}) => {
|
||
console.log("Home", visualizations);
|
||
const router = useRouter();
|
||
const pathname = usePathname() ?? "";
|
||
const cookieName = "homeIntroComplete";
|
||
const [cookies, setCookie] = useCookies([cookieName]);
|
||
const t = useTranslate();
|
||
const {
|
||
colors: { white, leafcutterElectricBlue },
|
||
typography: { h4 },
|
||
} = useLeafcutterContext();
|
||
const homeIntroComplete = parseInt(cookies[cookieName], 10) || 0;
|
||
|
||
useEffect(() => {
|
||
if (homeIntroComplete === 0) {
|
||
setCookie(cookieName, `${1}`, { path: "/" });
|
||
router.push(`${pathname}?tooltip=welcome`);
|
||
}
|
||
}, [homeIntroComplete, router, setCookie]);
|
||
|
||
return (
|
||
<>
|
||
{showWelcome && <Welcome />}
|
||
<Grid
|
||
container
|
||
spacing={3}
|
||
sx={{ pt: "22px", pb: "22px" }}
|
||
direction="row-reverse"
|
||
>
|
||
<Link href={`${getBasePath()}/create`} passHref>
|
||
<Button
|
||
sx={{
|
||
fontSize: 14,
|
||
borderRadius: 500,
|
||
color: leafcutterElectricBlue,
|
||
border: `2px solid ${leafcutterElectricBlue}`,
|
||
fontWeight: "bold",
|
||
textTransform: "uppercase",
|
||
pl: 6,
|
||
pr: 5,
|
||
":hover": {
|
||
backgroundColor: leafcutterElectricBlue,
|
||
color: white,
|
||
opacity: 0.8,
|
||
},
|
||
}}
|
||
>
|
||
{t("createVisualization")}
|
||
</Button>
|
||
</Link>
|
||
</Grid>
|
||
<Grid
|
||
container
|
||
direction="row"
|
||
wrap="wrap"
|
||
spacing={3}
|
||
justifyContent="space-between"
|
||
>
|
||
{visualizations.length === 0 ? (
|
||
<Grid
|
||
container
|
||
sx={{ height: 300, width: "100%", pt: 10 }}
|
||
justifyContent="center"
|
||
>
|
||
<Grid item sx={{ ...h4, width: 450, textAlign: "center" }}>
|
||
{"You don’t have any saved visualizations. Go to "}
|
||
<Link href={`${getBasePath()}/create`}>Search and Create</Link>
|
||
{" or "}
|
||
<Link href={`${getBasePath()}/trends`}>Trends</Link>
|
||
{" to get started."}
|
||
</Grid>
|
||
</Grid>
|
||
) : null}
|
||
{visualizations.map((visualization: any, index: number) => (
|
||
<VisualizationCard
|
||
id={visualization.id}
|
||
key={index}
|
||
title={visualization.title}
|
||
description={visualization.description}
|
||
url={visualization.url}
|
||
/>
|
||
))}
|
||
</Grid>
|
||
<WelcomeDialog />
|
||
</>
|
||
);
|
||
};
|