fix: use better state management and some small tweaks to colors and styles (#83)

* im stupid

* jesus

* clean up

* fix alignment

* change face on hover tree

* set revalidate to 5 mins

Author: alexieyizhe

package-lock.json

@@ -9,8 +9,8 @@
     "type-check": "tsc --noEmit",
     "analyze": "ANALYZE=true npm run build",
     "build": "next build",
-    "vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/ && npm run build",
-    "serve": "next start"
+    "serve": "next start",
+    "vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/ && npm run build"
   },
   "devDependencies": {
     "@types/ioredis": "^4.17.8",
@@ -40,6 +40,6 @@
     "react-dom": "npm:@preact/compat@0.0.3",
     "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.2",
     "react-text-loop": "^2.3.0",
-    "storeon": "^3.1.2"
+    "zustand": "^3.2.0"
   }
 }

package.json

@@ -1,13 +1,15 @@
-import { FC } from 'react';
-
-import { useStore } from 'services/store';
 import { Link, Text } from 'components/core';
 import DynamicTime from 'components/DynamicTime';
 import DynamicTagline from 'components/DynamicTagline';
 import DynamicCurrentStatus from 'components/DynamicCurrentStatus';
+import { useInitialProps } from 'services/context/initial-props';
+import { getRandomItem } from 'services/utils';
+import { TALKING_POINTS } from 'services/copy';
+
+const talkingPoint = getRandomItem(TALKING_POINTS);
 
-const About: FC = () => {
-  const { talkingPoint, currentCity } = useStore('talkingPoint', 'currentCity');
+const About = () => {
+  const { currentCity } = useInitialProps();
 
   return (
     <>

public/favicon-away.png public/favicon-mad.pngpublic/favicon-away.png renamed to public/favicon-mad.png

@@ -2,10 +2,10 @@ import { FC, memo } from 'react';
 
 import { Link, Text } from 'components/core';
 import { PAST_EXPERIENCE } from 'services/copy';
-import { useStore } from 'services/store';
+import { useInitialProps } from 'services/context/initial-props';
 
 const Work: FC = memo(() => {
-  const { githubStats } = useStore('githubStats');
+  const { githubStats } = useInitialProps();
   const latestRepo = githubStats?.reposCommittedTo[0] ?? null;
 
   return (

src/components/Bio/About.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { styled } from 'goober';
 
-import { useStore } from 'services/store';
 import { screen } from 'services/style';
+import { useSiteStore } from 'services/store';
 
 import About from './About';
 import Work from './Work';
@@ -31,7 +31,7 @@ const Subcontainer = styled('div')`
 `;
 
 const Bio: FC = () => {
-  const { displayedSection } = useStore('displayedSection');
+  const displayedSection = useSiteStore((state) => state.displayedSection);
 
   return (
     <Container>

src/components/Bio/Work.tsx

@@ -1,8 +1,8 @@
 import { css, keyframes } from 'goober';
 import { FC, memo } from 'react';
-import { TNowPlayingData } from 'services/now-playing';
 
-import { useStoreFocusListeners } from 'services/store/utils';
+import { TNowPlayingData } from 'services/api';
+import { useStoreFocusListeners } from 'services/utils';
 import { screen } from 'services/style';
 
 type TCoverArtProps = Pick<TNowPlayingData, 'link' | 'coverArtSrc'> & {

src/components/Bio/index.tsx

@@ -1,15 +1,17 @@
-import { memo, FC, useCallback, useEffect } from 'react';
+import { memo, FC, useState, useCallback } from 'react';
 import TextLoop from 'react-text-loop';
 
-import { useStore } from 'services/store';
-import { TNowPlayingData, isNowPlayingData } from 'services/now-playing';
+import { TNowPlayingData, isNowPlayingData, getNowPlaying } from 'services/api';
 import {
+  getRandomItem,
   textLoopIntervals,
   TVisibilityChangeHandler,
   useVisibilityChange,
 } from 'services/utils';
 import CoverArt from 'components/CoverArt';
 import { Text } from 'components/core';
+import { useInitialProps } from 'services/context/initial-props';
+import { ACTIVITIES, PREFIXES } from 'services/copy';
 
 const clamp = (v: number, min: number, max: number) =>
   Math.max(Math.min(v, max), min);
@@ -58,22 +60,64 @@ const nowPlayingMarkup = ({
   ];
 };
 
-const DynamicCurrentStatus: FC = memo(() => {
-  const { dispatch, statuses } = useStore('statuses');
-  const statusesMarkup = statuses.map((status) =>
-    isNowPlayingData(status) ? nowPlayingMarkup(status) : status.split(' ')
-  );
+const getInitialStatus = (initialStatus: string | null) => {
+  const prefix = getRandomItem(PREFIXES);
+  const activity = getRandomItem([
+    ...ACTIVITIES,
+    ...(initialStatus
+      ? new Array(ACTIVITIES.length).fill(initialStatus) // larger weight for custom status
+      : []),
+  ]);
+
+  return `${prefix} ${activity}.`;
+};
+
+const useStatuses = () => {
+  const {
+    initialNowPlayingData,
+    customStatus,
+    spotifyToken,
+  } = useInitialProps();
+
+  const [statuses, setStatuses] = useState([
+    initialNowPlayingData ?? getInitialStatus(customStatus),
+  ]);
 
-  const visibilityChangeHandler = useCallback<TVisibilityChangeHandler>(
-    (isHidden) => {
-      if (!isHidden) dispatch('data/refresh');
+  const updateNowPlaying = useCallback<TVisibilityChangeHandler>(
+    async (isHidden) => {
+      if (!isHidden) {
+        const updatedNowPlayingData = await getNowPlaying(spotifyToken);
+        const lastStatus = statuses[statuses.length - 1];
+        const lastNowPlayingData = isNowPlayingData(lastStatus)
+          ? lastStatus
+          : null;
+
+        if (
+          !!updatedNowPlayingData &&
+          updatedNowPlayingData.uri !== lastNowPlayingData?.uri
+        ) {
+          console.log(
+            `Now playing: ${
+              updatedNowPlayingData.podcastName ?? updatedNowPlayingData.name
+            }`
+          );
+          setStatuses((prev) => [...prev, updatedNowPlayingData]);
+        }
+      }
     },
-    [dispatch]
+    [spotifyToken, statuses]
   );
 
-  useVisibilityChange(visibilityChangeHandler);
+  useVisibilityChange(updateNowPlaying);
+
+  return statuses;
+};
 
-  useEffect(() => dispatch('data/refresh'), []); //eslint-disable-line react-hooks/exhaustive-deps
+const DynamicCurrentStatus: FC = memo(() => {
+  const statuses = useStatuses();
+  const statusesMarkup = statuses.map((status) =>
+    isNowPlayingData(status) ? nowPlayingMarkup(status) : status.split(' ')
+  );
 
   return (
     <span>

src/components/CoverArt.tsx

@@ -8,11 +8,14 @@ const DynamicFavicon: FC<{ face?: 'smile' | 'mad' }> = ({ face }) => {
   useVisibilityChange(setAway);
 
   const dynamicFace = face ?? isAway ? 'mad' : 'smile';
-  const href = dynamicFace === 'mad' ? '/favicon-away.png' : '/favicon.png';
 
   return (
     <Head>
-      <link rel="shortcut icon" type="image/png" href={href} />
+      <link
+        rel="shortcut icon"
+        type="image/png"
+        href={dynamicFace === 'mad' ? '/favicon-mad.png' : '/favicon.png'}
+      />
     </Head>
   );
 };

src/components/DynamicCurrentStatus.tsx

@@ -1,12 +1,11 @@
-import { memo, FC } from 'react';
+import { memo } from 'react';
 import TextLoop from 'react-text-loop';
 
-import { useStore } from 'services/store';
+import { TAGLINES } from 'services/copy';
+import { getShuffledArray } from 'services/utils';
 
-const DynamicTagline: FC = memo(() => {
-  const { taglines } = useStore('taglines');
+const taglines = getShuffledArray(TAGLINES);
 
-  return <TextLoop children={taglines} />;
-});
+const DynamicTagline = memo(() => <TextLoop children={taglines} />);
 
 export default DynamicTagline;