From 9f60d52f3d55d352806616c7eadb0cf1b2137d7e Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 5 Aug 2023 00:43:51 +0530 Subject: [PATCH 1/6] feat: add support for highlight.new --- .../HighlightInput/highlight-input-form.tsx | 1 + pages/feed/index.tsx | 23 ++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx index a4f46c3dd8..eeabec2040 100644 --- a/components/molecules/HighlightInput/highlight-input-form.tsx +++ b/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" /> diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 8976577c4d..5a914c9457 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -85,6 +85,24 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { { name: "Highlights", count: highlights_count ?? 0 }, ]; + useEffect(() => { + const queryParams = new URLSearchParams(window.location.search); + const newHighlight = queryParams.get("new"); + + const focusOnHighlighCreationInput = setInterval(() => { + const highlightCreationInput = document.getElementById("highlight-create-input"); + if (newHighlight && highlightCreationInput) { + highlightCreationInput.click(); + highlightCreationInput.focus(); + clearInterval(focusOnHighlighCreationInput); + } + }, 1000); + + return () => { + clearInterval(focusOnHighlighCreationInput); + }; + }, []); + useEffect(() => { if (activeTab === "home") { setRepoList(repoTofilterList(repos)); @@ -290,7 +308,10 @@ const Feeds: WithPageLayout = (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); } From 3cc04892d026bb966eb6f3eda72789a6ae23eaab Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 5 Aug 2023 03:23:17 +0530 Subject: [PATCH 2/6] sign in if not signed in --- lib/hooks/useSession.ts | 1 + middleware.ts | 10 ++++++++-- pages/feed/index.tsx | 7 ++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/lib/hooks/useSession.ts b/lib/hooks/useSession.ts index 30b9ef046a..3457a10f8a 100644 --- a/lib/hooks/useSession.ts +++ b/lib/hooks/useSession.ts @@ -53,6 +53,7 @@ const useSession = (getSession = false) => { waitlisted, hasReports, session, + loadSession, }; }; diff --git a/middleware.ts b/middleware.ts index b31db5ad9e..6f77043456 100644 --- a/middleware.ts +++ b/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/"], }; diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 5a914c9457..296f65e7e6 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -44,7 +44,7 @@ interface HighlightSSRProps { } const Feeds: WithPageLayout = (props: HighlightSSRProps) => { - const { user } = useSupabaseAuth(); + const { user, signIn } = useSupabaseAuth(); const { data: repos } = useFetchHighlightRepos(); const { data: featuredHighlights } = useFetchFeaturedHighlights(); @@ -88,6 +88,11 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { 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.href}` } }); + } const focusOnHighlighCreationInput = setInterval(() => { const highlightCreationInput = document.getElementById("highlight-create-input"); From 3a8ebcc409acedfff76caeb3ea21a56ab2b57871 Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 5 Aug 2023 03:26:44 +0530 Subject: [PATCH 3/6] remove extra export --- lib/hooks/useSession.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/hooks/useSession.ts b/lib/hooks/useSession.ts index 3457a10f8a..30b9ef046a 100644 --- a/lib/hooks/useSession.ts +++ b/lib/hooks/useSession.ts @@ -53,7 +53,6 @@ const useSession = (getSession = false) => { waitlisted, hasReports, session, - loadSession, }; }; From fa4d43de93f719185523cbfe235e956942fc9449 Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Sat, 5 Aug 2023 16:59:11 +0530 Subject: [PATCH 4/6] handle mobile ?new=true --- .../HighlightInput/highlight-input-form.tsx | 2 ++ pages/feed/index.tsx | 31 +++++++++++++------ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx index eeabec2040..8239e5e493 100644 --- a/components/molecules/HighlightInput/highlight-input-form.tsx +++ b/components/molecules/HighlightInput/highlight-input-form.tsx @@ -265,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" /> setIsFormOpenMobile(true)} className="p-3 text-white rounded-full shadow-lg bg-light-orange-10" + id="mobile-highlight-create-button" > diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 296f65e7e6..07e1463fac 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -91,18 +91,29 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { const signInRequired = queryParams.get("signIn"); if (newHighlight && signInRequired) { - signIn({ provider: "github", options: { redirectTo: `${window.location.href}` } }); + signIn({ provider: "github", options: { redirectTo: `${window.location.origin}/feed?new=${newHighlight}` } }); } + var focusOnHighlighCreationInput: NodeJS.Timeout; - const focusOnHighlighCreationInput = setInterval(() => { - const highlightCreationInput = document.getElementById("highlight-create-input"); - if (newHighlight && highlightCreationInput) { - highlightCreationInput.click(); - highlightCreationInput.focus(); - clearInterval(focusOnHighlighCreationInput); - } - }, 1000); - + 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); }; From e1e3c05852f47c4787cc05c8efa6608d513ffec1 Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Tue, 8 Aug 2023 20:04:45 +0530 Subject: [PATCH 5/6] no need to create intervals for checking the highlight creation input if there is no new highlight --- pages/feed/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index 07e1463fac..7b0222875d 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -93,6 +93,12 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { 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; + } + var focusOnHighlighCreationInput: NodeJS.Timeout; if (window.innerWidth > 768) { From e4e4daf438810766613b3c2b7dd5dc2172cf1c7b Mon Sep 17 00:00:00 2001 From: Divyansh Singh Date: Tue, 8 Aug 2023 20:05:41 +0530 Subject: [PATCH 6/6] Update pages/feed/index.tsx Co-authored-by: Brandon Roberts --- pages/feed/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx index ff31df5973..b2a2c5d884 100644 --- a/pages/feed/index.tsx +++ b/pages/feed/index.tsx @@ -99,7 +99,7 @@ const Feeds: WithPageLayout = (props: HighlightSSRProps) => { return; } - var focusOnHighlighCreationInput: NodeJS.Timeout; + let focusOnHighlighCreationInput: NodeJS.Timeout; if (window.innerWidth > 768) { focusOnHighlighCreationInput = setInterval(() => {