diff --git a/packages/common/helpers/routes.ts b/packages/common/helpers/routes.ts index 628b1dc..15942e7 100644 --- a/packages/common/helpers/routes.ts +++ b/packages/common/helpers/routes.ts @@ -1,9 +1,9 @@ enum Routes { - convos = "/s", - later = "/s/later", - done = "/s/done", - drawer = "/s/drawer", - rooms = "/s/rooms", + convos = "/s#conversations", + later = "/s#later", + done = "/s#done", + drawer = "/s#drawer", + rooms = "/s#rooms", } export default Routes; diff --git a/packages/web/components/v2/Conversations.tsx b/packages/web/components/v2/Conversations.tsx new file mode 100644 index 0000000..0986bc5 --- /dev/null +++ b/packages/web/components/v2/Conversations.tsx @@ -0,0 +1,371 @@ +import { Avatar, Badge } from "antd"; +import { + FaDotCircle, + FaWalking, + FaRocket, + FaCheckDouble, + FaCircle, + FaUser, + FaRegClock, + FaCheck, + FaAngleRight, + FaGithub, + FaAtlassian, +} from "react-icons/fa"; + +export default function Conversations() { + return ( + <> + + + + Live + + + + {/* row of live room cards */} + + {/* engineering rooms */} + + + + + + + + + + Engineering + + + {"01:20"} + + + + + + + + + + + + Priority + + + + {/* Today */} + + + Today + + + + + + + {/* engineering */} + + + + + + + K + } + /> + } + /> + } + /> + } + /> + + + Engineering + + + + {`Josh: "let's just figure out how to finish the rest of the "`} + + + + 9:00am + + + {/* actions */} + + + + + + + + + + + + + + + + + {/* general */} + + + + + + + + + + + + + + + + + + General + + + + You spoke 2 hours ago + + + + 7:22am + + + {/* actions */} + + + + + + + + + + + + + + + + + {/* one on one chat with sydney */} + + + + + + + + + + + Sydney + + + + {`"Did you ever figure out that problem with the "`} + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + Last 7 Days + + + + + + + + + + + + + + + + + Justin + + + + {`"Here's a quick github link for that library you were looking for"`} + + + + + + + + + + + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + + + + + + + Steph and Lee + + + + {`"Let's hop into a room to discuss this sometime this afternoon..."`} + + + + 6:50am + + + {/* actions */} + + + + + + + + + + + + + + + + + + + + Earlier This Month + + + + + + + + November 2021 + + + + + + {"That's all"} + + ); +} diff --git a/packages/web/pages/s/done.tsx b/packages/web/components/v2/Done.tsx similarity index 73% rename from packages/web/pages/s/done.tsx rename to packages/web/components/v2/Done.tsx index 6cd7018..eb9d52c 100644 --- a/packages/web/pages/s/done.tsx +++ b/packages/web/components/v2/Done.tsx @@ -1,4 +1,3 @@ -import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; import React from "react"; import { FaCheck } from "react-icons/fa"; @@ -18,7 +17,3 @@ export default function Done() { ); } - -Done.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -}; diff --git a/packages/web/pages/s/drawer.tsx b/packages/web/components/v2/Drawer.tsx similarity index 74% rename from packages/web/pages/s/drawer.tsx rename to packages/web/components/v2/Drawer.tsx index e96f811..3082897 100644 --- a/packages/web/pages/s/drawer.tsx +++ b/packages/web/components/v2/Drawer.tsx @@ -1,4 +1,3 @@ -import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; import React from "react"; import { FaLink } from "react-icons/fa"; @@ -18,7 +17,3 @@ export default function Drawer() { ); } - -Drawer.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -}; diff --git a/packages/web/components/v2/Header.tsx b/packages/web/components/v2/Header.tsx index 5286104..49457c0 100644 --- a/packages/web/components/v2/Header.tsx +++ b/packages/web/components/v2/Header.tsx @@ -17,9 +17,6 @@ import UserStatusBubble from "../UserStatusBubble"; export default function Header() { const router = useRouter(); - const currPage = router.pathname; - console.log(currPage); - const UserMenu = ( ); } - -Later.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -}; diff --git a/packages/web/pages/s/priority.tsx b/packages/web/components/v2/Priority.tsx similarity index 76% rename from packages/web/pages/s/priority.tsx rename to packages/web/components/v2/Priority.tsx index 35ac116..fff075b 100644 --- a/packages/web/pages/s/priority.tsx +++ b/packages/web/components/v2/Priority.tsx @@ -1,4 +1,3 @@ -import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; import React from "react"; import { FaRocket } from "react-icons/fa"; @@ -19,7 +18,3 @@ export default function Priority() { ); } - -Priority.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -}; diff --git a/packages/web/components/v2/Sidebar.tsx b/packages/web/components/v2/Sidebar.tsx index 4070c54..e03c4d2 100644 --- a/packages/web/components/v2/Sidebar.tsx +++ b/packages/web/components/v2/Sidebar.tsx @@ -7,7 +7,6 @@ import { FaRegClock, FaCheck, FaImages, - FaGripHorizontal, FaDotCircle, FaUser, FaMicrophone, @@ -16,11 +15,11 @@ import { } from "react-icons/fa"; import { HiSpeakerphone } from "react-icons/hi"; import Routes from "@nirvana/common/helpers/routes"; +import Link from "next/link"; function Sidebar() { const router = useRouter(); const currPage = router.pathname; - console.log(currPage); const handleRoute = (route: Routes) => { router.push(route); @@ -36,6 +35,11 @@ function Sidebar() { {/* navigation items */}
+ {Routes.convos} + {Routes.later} + {Routes.done} + {Routes.drawer} + handleRoute(Routes.convos)} className="flex flex-row items-center hover:cursor-pointer transition-all group" diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx index b70f1ad..f20dff4 100644 --- a/packages/web/pages/s/index.tsx +++ b/packages/web/pages/s/index.tsx @@ -1,378 +1,57 @@ -import { Avatar, Badge } from "antd"; -import { - FaAngleRight, - FaAtlassian, - FaCheck, - FaCheckDouble, - FaCircle, - FaDotCircle, - FaGithub, - FaRegClock, - FaRocket, - FaUser, - FaWalking, -} from "react-icons/fa"; -import React from "react"; -import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; +import Routes from "@nirvana/common/helpers/routes"; +import { useRouter } from "next/router"; +import React, { useEffect, useState } from "react"; +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"; -function Me() { - return ; -} +export default function Me() { + // figure out what content to render from here + const router = useRouter(); + const [currRoute, setCurrRoute] = useState(router.pathname); -Me.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -}; + useEffect(() => { + const onHashChangeStart = (url) => { + console.log(`Path changing to ${url}`); + setCurrRoute(url); + }; -export default Me; + router.events.on("hashChangeStart", onHashChangeStart); + + return () => { + router.events.off("hashChangeStart", onHashChangeStart); + }; + }, [router.events]); + + function getCurrentContent() { + switch (currRoute) { + case Routes.convos: + return ; + case Routes.later: + return ; + case Routes.done: + return ; + case Routes.drawer: + return ; + default: + return <>; + } + } -function Convos() { return ( - <> - - - - Live - - +
+
- {/* row of live room cards */} - - {/* engineering rooms */} - - - - - - - - +
+ - Engineering - - - {"01:20"} - - - - - - - - - - Priority - - - - {/* Today */} - - - Today - - - - - - - {/* engineering */} - - - - - - - K - } - /> - } - /> - } - /> - } - /> - - - Engineering - - - - {`Josh: "let's just figure out how to finish the rest of the "`} - - - - 9:00am - - - {/* actions */} - - - - - - - - - - - - - - - - - {/* general */} - - - - - - - - - - - - - - - - - - General - - - - You spoke 2 hours ago - - - - 7:22am - - - {/* actions */} - - - - - - - - - - - - - - - - - {/* one on one chat with sydney */} - - - - - - - - - - - Sydney - - - - {`"Did you ever figure out that problem with the "`} - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - Last 7 Days - - - - - - - - - - - - - - - - - Justin - - - - {`"Here's a quick github link for that library you were looking for"`} - - - - - - - - - - - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - - - - - - - Steph and Lee - - - - {`"Let's hop into a room to discuss this sometime this afternoon..."`} - - - - 6:50am - - - {/* actions */} - - - - - - - - - - - - - - - - - - - - Earlier This Month - - - - - - - - November 2021 - - - - - - {"That's all"} - +
+ {getCurrentContent()} +
+
+
); } diff --git a/packages/web/pages/s/rooms.tsx b/packages/web/pages/s/rooms.tsx deleted file mode 100644 index 1c7a673..0000000 --- a/packages/web/pages/s/rooms.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout"; -import React from "react"; - -export default function Rooms() { - return
All caught up.
; -} - -Rooms.getLayout = function getLayout(page: React.ReactElement) { - return getDynamicMeLayout(page); -};