From f121391288ebf5bb9c8a0e6c17316feb117221a2 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 5 Oct 2023 11:00:43 -0500
Subject: [PATCH] better typescript config, couple more build fixes

---
 app/layout.tsx                    |  8 ++++----
 components/logo/useColorShift.tsx | 25 +++++++++++++++++--------
 package.json                      |  3 ++-
 tsconfig.json                     |  1 +
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 1092ac8..c7a97df 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -65,10 +65,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <MDXProvider components={components}>
             <main className={`${bg} min-h-screen`}>
-              <>
-              <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
-              {children}
-              </>
+              <div>
+                <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
+                {children}
+              </div>
             </main>
           </MDXProvider>
         </IconContext.Provider>
diff --git a/components/logo/useColorShift.tsx b/components/logo/useColorShift.tsx
index aa76e1f..aac7b2d 100644
--- a/components/logo/useColorShift.tsx
+++ b/components/logo/useColorShift.tsx
@@ -24,16 +24,22 @@ export interface UseColorShiftReturnType {
 const useColorShift = (shiftInterval?: number, disableShift = false, customColorList?: ColorListType[]): UseColorShiftReturnType => {
     if (shiftInterval && shiftInterval <= 0) throw new Error("shiftInterval must be greater than 0")
 
-    const randomColor = () => (customColorList ?? colorList)[Math.floor(Math.random() * colorList.length | 0)];
+    const randomColor = () => {
+        const list = customColorList ?? colorList;
+        const color = list[Math.floor(Math.random() * list.length || 0)];
+
+        if (!color) throw new Error("color is undefined");
+        return color;
+    }
 
     const [circleColors, setCircleColors] = useState<{
-        firstColor: ColorListType | "",
-        secondColor: ColorListType | "",
-        thirdColor: ColorListType | "",
+        firstColor:     ColorListType | "",
+        secondColor:    ColorListType | "",
+        thirdColor:     ColorListType | "",
     }>({
-        firstColor: colorList[0],
-        secondColor: colorList[1],
-        thirdColor: colorList[2],
+        firstColor:     colorList[0] ?? randomColor(),
+        secondColor:    colorList[1] ?? randomColor(),
+        thirdColor:     colorList[2] ?? randomColor(),
     })
 
     function shift() {
@@ -46,7 +52,10 @@ const useColorShift = (shiftInterval?: number, disableShift = false, customColor
     }
 
     // perform initial mount of color changing pattern
-    useEffect(disableShift ? shift : (() => { return }), []);
+    useEffect(() => {
+        if (!disableShift) return;
+        shift();
+    }, []);
 
     // set this function to repeat
     useEffect(() => {
diff --git a/package.json b/package.json
index 7ea8b02..28c4b45 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@types/uuid": "^9.0.1"
+    "@types/uuid": "^9.0.1",
+    "@vercel/style-guide": "^5.0.1"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index e06a445..3b89d37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "@vercel/style-guide/typescript",
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],