61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import Head from "next/head";
|
|
import React, { useEffect, useState } from "react";
|
|
import { AuthProvider, useAuth } from "components/Login/authcontext";
|
|
import LoginHead from "components/Login/loginhead";
|
|
import LoginBox from "components/Login/loginbox";
|
|
import Analytics from "components/Analytics";
|
|
import Editor from "components/Editor";
|
|
import { EditableLink } from "components/Editor/Link";
|
|
|
|
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 />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const EditorPage: React.FC = () => {
|
|
const auth = useAuth();
|
|
const [links, setLinks] = useState<EditableLink[]>([]);
|
|
|
|
useEffect(() => {
|
|
async function fetchLinks() {
|
|
if (!auth.loggedIn) {
|
|
return;
|
|
}
|
|
|
|
const res = await fetch("/api/editor/links", { headers: auth.headers });
|
|
|
|
setLinks(await res.json());
|
|
}
|
|
|
|
fetchLinks();
|
|
}, [auth]);
|
|
|
|
return auth.loggedIn ? (
|
|
<>
|
|
<Analytics />
|
|
<Editor links={links} setLinks={setLinks} />
|
|
</>
|
|
) : (
|
|
<LoginScreen />
|
|
);
|
|
};
|
|
|
|
export default function EditorPageWrapper(): JSX.Element {
|
|
return (
|
|
<AuthProvider>
|
|
<EditorPage />
|
|
</AuthProvider>
|
|
);
|
|
}
|