fix: localStorage is undefined

Author: ZabeehUllah

app/layout.tsx

@@ -27,7 +27,13 @@ export default function RootLayout({
           <AuthProvider>
             <Navbar />
             <ProjectProvider>
-              <Suspense fallback={<div className="flex justify-center items-center h-screen">Loading...</div>}>
+              <Suspense fallback={<div className="flex justify-center items-center h-screen bg-white dark:bg-black">
+                <div className="flex space-x-2">
+                  <div className="w-4 h-4 bg-teal-600 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+                  <div className="w-4 h-4 bg-teal-600 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+                  <div className="w-4 h-4 bg-teal-600 rounded-full animate-bounce"></div>
+                </div>
+              </div>}>
                 {children}
               </Suspense>
             </ProjectProvider>

app/page.tsx

@@ -60,11 +60,9 @@ export default function DashboardPage() {
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
-  const [projectName, setProjectName] = useState("")
-  const [projectWebsite, setProjectWebsite] = useState("")
   const [expandedSection, setExpandedSection] = useState("customize")
   const [showRoulette, setShowRoulette] = useState(true)
-  const { app, setApp } = useAppStore() // use for edit flow
+  const { app } = useAppStore() // use for edit flow
   const { addProject, project } = useProjects() // use for secrt flow
 
   const { routeToDashboard } = useAuth()
@@ -288,10 +286,6 @@ export default function DashboardPage() {
     }
   }, [id, app]);
 
-
-
-  console.log("Questions", questions)
-
   const logout = () => {
     localStorage.clear()
     router.push("/")

components/WidgetCard.tsx

@@ -95,11 +95,19 @@ export default function WidgetCard({
   const [customPlatformsDisable, setCustomPlatformsDisable] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [isReturningUser, setIsReturningUser] = useState(false)
-
+  const [isWidget, setIsWidget] = useState<boolean>(false)
+  
   const { app, setApp } = useAppStore() // use for edit flow
   const searchParams = useSearchParams()
   const id = searchParams.get("id")
 
+  useEffect(() => {
+    const config = window?.localStorage.getItem("widgetConfig")
+    if (config) {
+      setIsWidget(true)
+    }
+  }, [])
+  
   const handleAddQuestion = (type: QuestionType) => {
     if (questions.length == 3) return
     const id = Date.now()
@@ -307,7 +315,7 @@ export default function WidgetCard({
                   tags: cat.tags.filter((tag) => tag.id !== tagId),
                 }
                 : cat,
-            ),
+              ),
           }
         }
         return q
@@ -462,7 +470,6 @@ export default function WidgetCard({
     addUrl()
   }
 
-  const savedConfig = localStorage.getItem("widgetConfig")
 
   useEffect(() => {
     const getUniversalProfiles = async () => {
@@ -506,7 +513,7 @@ export default function WidgetCard({
         ]
 
         setProfileTypes(updatedProfilesWithCustom)
-
+        const savedConfig = window?.localStorage.getItem("widgetConfig")
         // Set the first profile as selected if it exists
         if (updatedProfilesWithCustom.length > 0 && !savedConfig) {
           setSelectedProfileType(updatedProfilesWithCustom[0])
@@ -1105,12 +1112,12 @@ export default function WidgetCard({
       savedAt: new Date().getTime(), // Add timestamp
     }
 
-    localStorage.setItem("widgetConfig", JSON.stringify(configData))
+    window?.localStorage.setItem("widgetConfig", JSON.stringify(configData))
     alert("Configuration saved successfully! Your progress will be restored when you return.")
   }
 
   const resetConfig = () => {
-    localStorage.removeItem("widgetConfig")
+    window?.localStorage.removeItem("widgetConfig")
     // Reset to default values
     setCustomizationData({
       general: {
@@ -1139,7 +1146,7 @@ export default function WidgetCard({
   useEffect(() => {
     // Don't load saved config if we're in edit mode (id exists)
     if (!id) {
-      const savedConfig = localStorage.getItem("widgetConfig")
+      const savedConfig = window?.localStorage.getItem("widgetConfig")
       if (savedConfig) {
         const parsedConfig = JSON.parse(savedConfig)
 
@@ -1165,7 +1172,6 @@ export default function WidgetCard({
     }
   }, [id])
 
-  const isWidget = localStorage.getItem("widgetConfig")
 
   // Add a new function to check if any data has been modified from default values
   const hasUserEnteredData = () => {

lib/orbis-utils.ts

@@ -32,7 +32,7 @@ const orbisdb = new OrbisDB({
         // const query = selectStatement.build()
         // console.log("Query that will be run", query)
         const result= await selectStatement.run();
-        console.log("Result", result)
+        // console.log("Result", result)
         // console.log(result);
         // columns: Array<string>
         // rows: Array<T | Record<string, any>>