chore: create helper function to get a url's origin

statsfm · Apr 11, 2024 · 5a13deb · 5a13deb
1 parent f60a64e
commit 5a13deb
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 46 deletions.
diff --git a/src/components/OpenGraph/Artist/OpenGraphDefaultArtist.tsx b/src/components/OpenGraph/Artist/OpenGraphDefaultArtist.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/alt-text */
 import { Logo } from '@/components/Logo';
 import formatter from '@/utils/formatter';
+import { getOrigin } from '@/utils/ssrUtils';
 import type { Artist } from '@/utils/statsfm';
 import type Api from '@statsfm/statsfm.js';
 import type { NextApiRequest } from 'next';
@@ -11,14 +12,7 @@ export function OpenGraphDefaultArtist(
   _: Api,
   artist: Artist,
 ): ReactElement<JSXElementConstructor<any>> {
-  const protocol =
-    process.env.NODE_ENV === 'development'
-      ? 'http'
-      : req.headers['x-forwarded-proto'] ?? 'https';
-
-  const { host } = req.headers;
-
-  const origin = `${protocol}://${host}`;
+  const origin = getOrigin(req);
 
   return (
     <div tw="flex flex-col flex-1 w-full h-full bg-[#18181c]">

diff --git a/src/components/OpenGraph/User/OpenGraphDefaultUser.tsx b/src/components/OpenGraph/User/OpenGraphDefaultUser.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/alt-text */
 import { Logo } from '@/components/Logo';
 import { PlusBadgePrefilled } from '@/components/User/PlusBadge';
+import { getOrigin } from '@/utils/ssrUtils';
 import { splitStringAtLength } from '@/utils/string';
 import type { UserPublic } from '@statsfm/statsfm.js';
 import type Api from '@statsfm/statsfm.js';
@@ -12,14 +13,7 @@ export function OpenGraphDefaultUser(
   _: Api,
   user: UserPublic,
 ): ReactElement<JSXElementConstructor<any>> {
-  const protocol =
-    process.env.NODE_ENV === 'development'
-      ? 'http'
-      : req.headers['x-forwarded-proto'] ?? 'https';
-
-  const { host } = req.headers;
-
-  const origin = `${protocol}://${host}`;
+  const origin = getOrigin(req);
 
   const customId = user.customId ?? user.id;
 

diff --git a/src/pages/api/auth/apple.ts b/src/pages/api/auth/apple.ts
@@ -1,17 +1,13 @@
+import { getOrigin } from '@/utils/ssrUtils';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
-  let protocol = req.headers['x-forwarded-proto'] ?? 'https';
-  if (process.env.NODE_ENV === 'development') protocol = 'http';
+  let origin = getOrigin(req);
 
-  let { host } = req.headers;
-
-  if (host?.includes('spotistats.app')) {
-    host = host.replace('spotistats.app', 'stats.fm');
+  if (origin.includes('spotistats.app')) {
+    origin = origin.replace('spotistats.app', 'stats.fm');
   }
 
-  const origin = `${protocol}://${host}`;
-
   // remove the extra httpOnly cookie which is no longer in use
   const cookies = [
     'identityToken=; Path=/; Domain=.stats.fm; HttpOnly=false; Expires=Thu, 01 Jan 1970 00:00:00 GMT',

diff --git a/src/pages/api/auth/spotify.ts b/src/pages/api/auth/spotify.ts
@@ -1,17 +1,13 @@
+import { getOrigin } from '@/utils/ssrUtils';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
-  let protocol = req.headers['x-forwarded-proto'] ?? 'https';
-  if (process.env.NODE_ENV === 'development') protocol = 'http';
+  let origin = getOrigin(req);
 
-  let { host } = req.headers;
-
-  if (host?.includes('spotistats.app')) {
-    host = host.replace('spotistats.app', 'stats.fm');
+  if (origin.includes('spotistats.app')) {
+    origin = origin.replace('spotistats.app', 'stats.fm');
   }
 
-  const origin = `${protocol}://${host}`;
-
   // remove the extra httpOnly cookie which is no longer in use
   const cookies = [
     'identityToken=; Path=/; Domain=.stats.fm; HttpOnly=false; Expires=Thu, 01 Jan 1970 00:00:00 GMT',

diff --git a/src/pages/artist/[id].tsx b/src/pages/artist/[id].tsx
@@ -16,7 +16,7 @@ import { StatsCardContainer } from '@/components/Stats';
 import { useScrollPercentage } from '@/hooks/use-scroll-percentage';
 import { event } from 'nextjs-google-analytics';
 import type { SSRProps } from '@/utils/ssrUtils';
-import { fetchUser, getApiInstance } from '@/utils/ssrUtils';
+import { fetchUser, getApiInstance, getOrigin } from '@/utils/ssrUtils';
 import formatter from '@/utils/formatter';
 import { SpotifyLink, AppleMusicLink } from '@/components/SocialLink';
 import dayjs from 'dayjs';
@@ -61,16 +61,11 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
 
   const user = await fetchUser(ctx);
 
-  let protocol = ctx.req.headers['x-forwarded-proto'] ?? 'https';
-  if (process.env.NODE_ENV === 'development') protocol = 'http';
-
-  const { host } = ctx.req.headers;
-
   return {
     props: {
       artist,
       user,
-      origin: `${protocol}://${host}` ?? 'https://stats.fm',
+      origin: getOrigin(ctx.req),
     },
   };
 };

diff --git a/src/pages/user/[id]/[[...deeplink]].tsx b/src/pages/user/[id]/[[...deeplink]].tsx
@@ -17,7 +17,7 @@ import Head from 'next/head';
 import { Button } from '@/components/Button';
 import clsx from 'clsx';
 import type { SSRProps } from '@/utils/ssrUtils';
-import { getApiInstance, fetchUser } from '@/utils/ssrUtils';
+import { getApiInstance, fetchUser, getOrigin } from '@/utils/ssrUtils';
 import { FriendStatus } from '@/utils/statsfm';
 import { event } from 'nextjs-google-analytics';
 import { useScrollPercentage } from '@/hooks/use-scroll-percentage';
@@ -131,11 +131,6 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
     `<https://api.stats.fm/api/v1/oembed?url=${oembedUrl}&format=json>; rel="alternate"; type="application/json+oembed"; title=""`,
   );
 
-  let protocol = ctx.req.headers['x-forwarded-proto'] ?? 'https';
-  if (process.env.NODE_ENV === 'development') protocol = 'http';
-
-  const { host } = ctx.req.headers;
-
   return {
     props: {
       userProfile,
@@ -147,7 +142,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
         range: range && range.toUpperCase() in BetterRange ? range : null,
         year: year != null ? parseInt(year, 10) : null,
       },
-      origin: `${protocol}://${host}` ?? 'https://stats.fm',
+      origin: getOrigin(ctx.req),
     },
   };
 };

diff --git a/src/utils/ssrUtils.ts b/src/utils/ssrUtils.ts
@@ -30,3 +30,12 @@ export const fetchUser = async (ctx: any): Promise<UserPrivate | null> => {
 
   return user;
 };
+
+export const getOrigin = (req: any): string => {
+  let protocol = req.headers['x-forwarded-proto'] ?? 'https';
+  if (process.env.NODE_ENV === 'development') protocol = 'http';
+
+  const { host } = req.headers;
+
+  return `${protocol}://${host}` ?? 'https://stats.fm';
+};