feat: add conditional routing to single highlight dialog close action (…

…#1473)
open-sauced · Aug 3, 2023 · 1341cba · 1341cba
1 parent a286eda
commit 1341cba
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/pages/feed/[id].tsx b/pages/feed/[id].tsx
@@ -10,8 +10,9 @@ export const getServerSideProps = async (context: HighlightSSRPropsContext) => {
 
 export type HighlightSSRPropsContext = GetServerSidePropsContext<{ id: string }>;
 
-export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{ id: string }>) {
+export async function handleHighlightSSR({ req, params }: GetServerSidePropsContext<{ id: string }>) {
   const { id } = params!;
+  const { referer } = req.headers;
 
   async function fetchHighlight() {
     const req = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/highlights/${id}`, {
@@ -30,6 +31,9 @@ export async function handleHighlightSSR({ params }: GetServerSidePropsContext<{
   const highlight = await fetchHighlight();
 
   return {
-    props: { highlight },
+    props: {
+      highlight,
+      referer: referer ?? null,
+    },
   };
 }
diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable prettier/prettier */
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
 import clsx from "clsx";
 
+import { AiOutlineClose } from "react-icons/ai";
 import TopContributorsPanel from "components/molecules/TopContributorsPanel/top-contributors-panel";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights";
@@ -19,6 +21,7 @@ import SEO from "layouts/SEO/SEO";
 
 import { Dialog, DialogCloseButton, DialogContent } from "components/molecules/Dialog/dialog";
 import Avatar from "components/atoms/Avatar/avatar";
+import Button from "components/atoms/Button/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "components/atoms/Tabs/tabs";
 import ContributorHighlightCard from "components/molecules/ContributorHighlight/contributor-highlight-card";
 import HighlightInputForm from "components/molecules/HighlightInput/highlight-input-form";
@@ -37,6 +40,7 @@ type highlightReposType = { repoName: string; repoIcon: string; full_name: strin
 
 interface HighlightSSRProps {
   highlight: DbHighlight | null;
+  referer: string;
 }
 
 const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
@@ -91,7 +95,6 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
 
   useEffect(() => {
     if (singleHighlight && !openSingleHighlight) {
-      router.push(`/feed/${props.highlight?.id}`);
       setOpenSingleHighlight(true);
     }
   }, [singleHighlight]);
@@ -155,9 +158,13 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
           <Dialog
             open={openSingleHighlight}
             onOpenChange={(open) => {
-              if (!open) {
-                setOpenSingleHighlight(false);
-                router.push("/feed");
+              if (openSingleHighlight && !open) {
+                if (props.referer !== null && !props.referer.includes("/feed")) {
+                  router.back();
+                } else {
+                  setOpenSingleHighlight(false);
+                  router.replace("/feed");
+                }
               }
             }}
           >
@@ -179,7 +186,18 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
                         addSuffix: true,
                       })}
                     </span>
-                    <DialogCloseButton onClick={() => router.push("/feed")} />
+                    {props.referer !== null && !props.referer.includes("/feed") ? (
+                      <Button
+                        variant="text"
+                        onClick={() => router.back()}
+                        className="!p-0 !border-0 absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100"
+                      >
+                        <AiOutlineClose size={20} />
+                        <span className="sr-only">Close</span>
+                      </Button>
+                    ) : (
+                      <DialogCloseButton onClick={() => router.replace("/feed")} />
+                    )}
                   </div>
 
                   <div className="w-full px-2 py-6 border bg-light-slate-1 md:px-6 lg:px-12 rounded-xl">