fix: strict null checking and other edge cases

Author: alexieyizhe

src/components/DynamicCurrentStatus.tsx

@@ -75,11 +75,11 @@ const DynamicCurrentStatus: FC = memo(() => {
 
     const lastStatus = statuses[statuses.length - 1];
     const lastNowPlayingData = isNowPlayingData(lastStatus) ? lastStatus : null;
-    const hasNewNowPlayingData =
-      !!updatedNowPlayingData &&
-      updatedNowPlayingData.uri !== lastNowPlayingData?.uri;
 
-    if (hasNewNowPlayingData) {
+    if (
+      !!updatedNowPlayingData &&
+      updatedNowPlayingData.uri !== lastNowPlayingData?.uri
+    ) {
       console.debug('New now playing data found...', updatedNowPlayingData);
       setStatuses((prev) => [...prev, updatedNowPlayingData]);
     }

src/components/DynamicTime.tsx

@@ -62,6 +62,9 @@ const timeToColor = (hour: number, time: string): TextGradientInfo => {
     case '11PM':
     case '12AM':
       return [`${110 + hour * 2}deg`, '#271F3F', '#062B79'];
+
+    default:
+      return [`90deg`, '#000', '#000'];
   }
 };
 

src/components/core/Link.tsx

@@ -32,7 +32,7 @@ const Link: FC<LinkProps> = ({ bare = false, children, ...rest }) => {
       onMouseLeave={() => setIsHoveringLink(false)}
       {...rest}
     >
-      {children}
+      {children as any}
     </A>
   );
 };

src/pages/api/update-status.ts

@@ -6,11 +6,11 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   res.setHeader('Content-Type', 'application/json');
 
   const shouldClearStatus = !!req.query['clear'];
-  console.log({ shouldClearStatus });
   const status = shouldClearStatus ? null : req.query['status'];
 
   if (status !== undefined) {
     try {
+      console.log(`Updating status to ${status}`);
       const client = new StorageClient();
       const statusSetOk = await client.set(StorageKey.STATUS, status);
       client.disconnect();

src/pages/index.tsx

@@ -76,7 +76,7 @@ const IndexPage = (props: TPageProps) => (
 );
 
 export async function getStaticProps() {
-  console.debug('Retreving now playing data and timezone...');
+  console.log('Retrieving now playing data and timezone...');
   const client = new StorageClient();
   const { token } = await client.getSpotifyCredentials();
   const currentOffset = await client.getTimezoneOffset();

src/services/_server_/now-playing.ts

@@ -7,7 +7,7 @@ const SERVER_SIDE_COLOR_OPTIONS = {
   imageClass: CanvasImage,
 };
 
-const getNowPlayingDataServerSide = async (accessToken: string) =>
+const getNowPlayingDataServerSide = async (accessToken: string | null) =>
   getNowPlaying(accessToken, SERVER_SIDE_COLOR_OPTIONS);
 
 export { getNowPlayingDataServerSide };

src/services/_server_/storage.ts

@@ -37,15 +37,10 @@ class StorageClient {
       );
 
       if (accessTokenExpiry < Date.now()) {
-        console.debug(
-          `Access token expired, requesting new and setting token expiry to ${new Date(
-            Date.now() + 3600 * 1000
-          ).toLocaleString()}`
-        );
-
         const { access_token } = await requestNewToken();
         const newExpiry = Date.now() + 3600 * 1000; // spotify tokens expire in an hour
 
+        console.debug(`Token expired, new with expiry ${newExpiry.toString()}`);
         await this.client.set(StorageKey.ACCESS_TOKEN, access_token);
         await this.client.set(StorageKey.ACCESS_TOKEN_EXPIRY, newExpiry);
 

src/services/now-playing.ts

@@ -26,7 +26,8 @@ const requestNewToken = async () => {
     refresh_token: process.env.REFRESH_TOKEN,
   })
     .map(
-      ([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
+      ([key, val]) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(val as string)}`
     )
     .join('&');
 
@@ -51,7 +52,7 @@ const requestNewToken = async () => {
 const extractNowPlayingData = (data: any) => {
   const isPlaylist = data?.context?.type === 'playlist';
 
-  switch (data.currently_playing_type) {
+  switch (data.currently_playing_type as 'track' | 'episode') {
     case 'track': {
       const {
         item: {
@@ -88,7 +89,6 @@ const extractNowPlayingData = (data: any) => {
         type: 'episode' as const,
         uri,
         name,
-        artistName: null,
         podcastName,
         link: isPlaylist ? data.context?.external_urls.spotify : spotify,
         images,
@@ -119,12 +119,12 @@ const getNowPlaying = async (
     if (!res.ok)
       throw new Error(`Request error ${res.status}: ${JSON.stringify(data)}`);
 
-    const { images, ...nowPlayingData } = extractNowPlayingData(data);
-    const coverArtSrc = images.find((i: any) => i.width === 64)?.url;
+    const np = extractNowPlayingData(data);
+    const coverArtSrc = np.images.find((i: any) => i.width === 64)?.url;
     const coverArtColor = await getBestTextColor(coverArtSrc, colorOptions);
 
     return {
-      ...nowPlayingData,
+      ...np,
       coverArtSrc,
       coverArtColor,
     };

src/services/site/context.tsx

@@ -42,6 +42,7 @@ const shuffledTaglines = getShuffledArray(TAGLINES);
 
 const SiteContextProvider: FC<TPageProps> = ({
   currentOffset,
+  spotifyToken,
   children,
   ...rest
 }) => {
@@ -57,6 +58,7 @@ const SiteContextProvider: FC<TPageProps> = ({
         currentDate: getDateFromOffset(currentOffset),
         activity,
         talkingPoint,
+        spotifyToken: spotifyToken ?? '',
         ...rest,
 
         isEasterEggActive,

src/services/utils.ts

@@ -18,7 +18,6 @@ const getShuffledArray = <T = unknown>(arr: T[]) => {
 const getDateFromOffset = (offsetMins: string): Date => {
   const offsetMinsNum = Number(offsetMins);
 
-  console.log(offsetMins);
   const now = new Date();
   const curUTC = new Date(
     now.getUTCFullYear(),
@@ -30,7 +29,6 @@ const getDateFromOffset = (offsetMins: string): Date => {
     now.getUTCMilliseconds()
   );
   curUTC.setMinutes(curUTC.getMinutes() + offsetMinsNum);
-  console.log(curUTC.toString());
   return curUTC;
 };
 
@@ -70,7 +68,7 @@ const useVisibilityChange = (
 
       if (hidden && CHANGE_EVENT_NAME) {
         const onVisibilityChange = () =>
-          visibilityChangeHandler(document[hidden]);
+          visibilityChangeHandler((document as any)[hidden]);
 
         document.addEventListener(CHANGE_EVENT_NAME, onVisibilityChange, false);
         return () =>