74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import Routes from "@nirvana/common/helpers/routes";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect } from "react";
|
|
import { useRecoilState } from "recoil";
|
|
import Conversations from "../../components/v2/Conversations";
|
|
import Done from "../../components/v2/Done";
|
|
import Drawer from "../../components/v2/Drawer";
|
|
import Header from "../../components/v2/Header";
|
|
import Later from "../../components/v2/Later";
|
|
import Sidebar from "../../components/v2/Sidebar";
|
|
import { currPagePath } from "../../recoil/main";
|
|
import {
|
|
CSSTransition,
|
|
TransitionGroup,
|
|
SwitchTransition,
|
|
} from "react-transition-group";
|
|
|
|
export default function Me() {
|
|
// figure out what content to render from here
|
|
const router = useRouter();
|
|
const [currRoute, setCurrRoute] = useRecoilState(currPagePath);
|
|
|
|
useEffect(() => {
|
|
const onHashChangeStart = (url) => {
|
|
console.log(`Path changing to ${url}`);
|
|
setCurrRoute(url);
|
|
};
|
|
|
|
router.events.on("hashChangeStart", onHashChangeStart);
|
|
|
|
return () => {
|
|
router.events.off("hashChangeStart", onHashChangeStart);
|
|
};
|
|
}, [router.events]);
|
|
|
|
function getCurrentContent() {
|
|
switch (currRoute) {
|
|
case Routes.convos:
|
|
return <Conversations />;
|
|
case Routes.later:
|
|
return <Later />;
|
|
case Routes.done:
|
|
return <Done />;
|
|
case Routes.drawer:
|
|
return <Drawer />;
|
|
default:
|
|
return <></>;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<Header />
|
|
|
|
<div className="flex-1 flex flex-row items-stretch">
|
|
<Sidebar />
|
|
|
|
<SwitchTransition>
|
|
<CSSTransition
|
|
appear={true}
|
|
key={Math.random()}
|
|
timeout={400}
|
|
classNames="slide"
|
|
>
|
|
<div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
|
|
{getCurrentContent()}
|
|
</div>
|
|
</CSSTransition>
|
|
</SwitchTransition>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|