feat: add support for highlight.new

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -158,6 +158,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                 className="flex-1 font-normal placeholder:text-sm focus:outline-none"
                 type="text"
                 placeholder={isDivFocused ? "Add title (optional)" : "Post a highlight to show your work!"}
+                id="highlight-create-input"
               />
             </div>
           </CollapsibleTrigger>
@@ -264,6 +265,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
                 className="flex-1 focus:outline-none"
                 type="text"
                 placeholder={"Add title (optional)"}
+                id="highlight-create-input"
               />
             </div>
             <TypeWriterTextArea
@@ -337,6 +339,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
         <div
           onClick={() => setIsFormOpenMobile(true)}
           className="p-3 text-white rounded-full shadow-lg bg-light-orange-10"
+          id="mobile-highlight-create-button"
         >
           <RxPencil1 className="text-3xl" />
         </div>

middleware.ts

@@ -20,10 +20,16 @@ export async function middleware(req: NextRequest) {
   // Auth condition not met, redirect to home page.
   const redirectUrl = req.nextUrl.clone();
   redirectUrl.pathname = "/feed";
+  if (req.nextUrl.pathname === "/feed" && req.nextUrl.searchParams.has("new")) {
+    redirectUrl.searchParams.set("signIn", "true");
+  }
   redirectUrl.searchParams.set("redirectedFrom", req.nextUrl.pathname);
-  return NextResponse.redirect(redirectUrl);
+
+  if (!req.nextUrl.searchParams.has("redirectedFrom")) {
+    return NextResponse.redirect(redirectUrl);
+  }
 }
 
 export const config = {
-  matcher: ["/hub/insights/:path*", "/user/:path"],
+  matcher: ["/hub/insights/:path*", "/user/:path", "/feed/"],
 };

pages/feed/index.tsx

@@ -44,7 +44,7 @@ interface HighlightSSRProps {
 }
 
 const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
-  const { user } = useSupabaseAuth();
+  const { user, signIn } = useSupabaseAuth();
   const { data: repos } = useFetchHighlightRepos();
 
   const { data: featuredHighlights } = useFetchFeaturedHighlights();
@@ -85,6 +85,46 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
     { name: "Highlights", count: highlights_count ?? 0 },
   ];
 
+  useEffect(() => {
+    const queryParams = new URLSearchParams(window.location.search);
+    const newHighlight = queryParams.get("new");
+    const signInRequired = queryParams.get("signIn");
+
+    if (newHighlight && signInRequired) {
+      signIn({ provider: "github", options: { redirectTo: `${window.location.origin}/feed?new=${newHighlight}` } });
+    }
+
+    // no need to create intervals for checking the highlight creation input if there is no new highlight
+    if (!newHighlight) {
+      return;
+    }
+
+    let focusOnHighlighCreationInput: NodeJS.Timeout;
+
+    if (window.innerWidth > 768) {
+      focusOnHighlighCreationInput = setInterval(() => {
+        const highlightCreationInput = document.getElementById("highlight-create-input");
+        if (newHighlight && highlightCreationInput) {
+          highlightCreationInput.click();
+          highlightCreationInput.focus();
+          clearInterval(focusOnHighlighCreationInput);
+        }
+      }, 1000);
+    } else {
+      // for mobile. No need to focus on input, just click on the button as it opens up a form anyway.
+      focusOnHighlighCreationInput = setInterval(() => {
+        const mobileHighlightCreateButton = document.getElementById("mobile-highlight-create-button");
+        if (newHighlight && mobileHighlightCreateButton) {
+          mobileHighlightCreateButton.click();
+          clearInterval(focusOnHighlighCreationInput);
+        }
+      }, 1000);
+    }
+    return () => {
+      clearInterval(focusOnHighlighCreationInput);
+    };
+  }, []);
+
   useEffect(() => {
     if (activeTab === "home") {
       setRepoList(repoTofilterList(repos));
@@ -287,7 +327,10 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
               selectedFilter={selectedRepo}
               setSelected={(repo) => {
                 if (!openSingleHighlight) {
-                  router.push(`/feed${repo ? `?repo=${repo}` : ""}`);
+                  const queryParams = new URLSearchParams(window.location.search);
+                  router.push(
+                    `/feed${repo ? `?repo=${repo}` : queryParams.toString() ? `?${queryParams.toString()}` : ""}`
+                  );
                   setPage(1);
                   setSelectedRepo(repo);
                 }