2021-03-31 00:28:08 -04:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import { GetStaticProps } from "next";
|
2021-04-01 18:26:56 -04:00
|
|
|
import React, { useState } from "react";
|
2021-03-31 00:28:08 -04:00
|
|
|
import { AuthProvider, useAuth } from "components/Login/authcontext";
|
|
|
|
|
import LoginHead from "components/Login/loginhead";
|
|
|
|
|
import LoginBox from "components/Login/loginbox";
|
2021-04-01 18:26:56 -04:00
|
|
|
import Analytics from "components/Analytics";
|
|
|
|
|
import Editor from "components/Editor";
|
|
|
|
|
import { EditableLink } from "components/Editor/Link";
|
2021-03-31 00:28:08 -04:00
|
|
|
|
|
|
|
|
export const getStaticProps: GetStaticProps = async () => {
|
|
|
|
|
// TODO: Fetch links here
|
|
|
|
|
|
|
|
|
|
return {
|
2021-04-01 18:26:56 -04:00
|
|
|
props: {
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
title: "dummlink1",
|
|
|
|
|
url: "www.helloworld.com",
|
|
|
|
|
clicks: 0,
|
|
|
|
|
active: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "dummlink2",
|
|
|
|
|
url: "www.hiworld.com",
|
|
|
|
|
clicks: 0,
|
|
|
|
|
active: true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}, // will be passed to the page component as props
|
2021-03-31 00:28:08 -04:00
|
|
|
// Next.js will attempt to re-generate the page:
|
2021-04-01 18:26:56 -04:00
|
|
|
// - When a request comes intype EditableLink = {
|
2021-03-31 00:28:08 -04:00
|
|
|
// - At most once every second
|
|
|
|
|
revalidate: 1,
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2021-04-01 18:26:56 -04:00
|
|
|
const LoginScreen: React.FC = () => (
|
|
|
|
|
<div className="fixed h-screen w-full overflow-auto bg-gray-100">
|
|
|
|
|
<div className="m-auto h-full flex justify-center items-center">
|
|
|
|
|
<div className="container m-auto h-auto flex flex-col justify-center items-center p-10 space-y-20">
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Login</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<LoginHead />
|
|
|
|
|
<div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg">
|
|
|
|
|
<LoginBox />
|
2021-03-31 00:28:08 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-04-01 18:26:56 -04:00
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
interface EditorPageProps {
|
|
|
|
|
data: any;
|
|
|
|
|
}
|
2021-03-31 00:28:08 -04:00
|
|
|
|
2021-04-01 18:26:56 -04:00
|
|
|
const EditorPage: React.FC<EditorPageProps> = ({ data }) => {
|
2021-03-31 00:28:08 -04:00
|
|
|
const { loggedIn } = useAuth();
|
2021-04-01 18:26:56 -04:00
|
|
|
const [links, setLinks] = useState<EditableLink[]>(data ?? []);
|
|
|
|
|
|
|
|
|
|
console.log({ links });
|
|
|
|
|
return loggedIn ? (
|
|
|
|
|
<>
|
|
|
|
|
<Analytics />
|
|
|
|
|
<Editor links={links} setLinks={setLinks} />
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<LoginScreen />
|
|
|
|
|
);
|
2021-03-31 00:28:08 -04:00
|
|
|
};
|
|
|
|
|
|
2021-04-01 18:26:56 -04:00
|
|
|
export default function EditorPageWrapper({ data }: any): JSX.Element {
|
2021-03-31 00:28:08 -04:00
|
|
|
return (
|
|
|
|
|
<AuthProvider>
|
2021-04-01 18:26:56 -04:00
|
|
|
<EditorPage data={data} />
|
2021-03-31 00:28:08 -04:00
|
|
|
</AuthProvider>
|
|
|
|
|
);
|
2021-04-01 18:26:56 -04:00
|
|
|
}
|
