Basically done with the home page. left with the content for the pseudo sidebar and then the download functionality, and then we are done with it. afterwards, the player page/modal and then the edit before download modal.

Programming-Sai · Programming-Sai · commit 63b652b26e88 · 2025-08-15T14:49:15.000Z
diff --git a/app/_layout.js b/app/_layout.js
@@ -9,6 +9,7 @@ import NavBar from "../components/NavBar";
 import SideBar from "../components/SideBar";
 import { SidebarProvider } from "../contexts/SidebarContext";
 import { SearchProvider } from "../contexts/SearchContext";
+import Toast from "react-native-toast-message";
 
 export default function Layout() {
   return (
@@ -17,6 +18,7 @@ export default function Layout() {
         <SidebarProvider>
           <SearchProvider>
             <LayoutContent />
+            <Toast />
           </SearchProvider>
         </SidebarProvider>
       </AppStorageProvider>
diff --git a/app/index.js b/app/index.js
@@ -5,65 +5,116 @@ import { useEffect } from "react";
 import { useAppStorage } from "../contexts/AppStorageContext";
 import PaginatedResults from "../components/PaginatedResults";
 import AccordionGroup from "../components/AccordionGroup";
-import Icon from "react-native-vector-icons/Ionicons";
 import { useSearch } from "../contexts/SearchContext";
-import { Skeleton } from "../components/Skeleton";
-import { HEXA } from "../lib/colors";
 import LoadingSkeleton from "../components/LoadingSkeleton";
+import Toast from "react-native-toast-message";
 
 export default function Home() {
   const { setRightSidebarKey } = useRightSidebar();
-  const { viewMode } = useAppStorage();
-  const { normalized, isLoading, error, setIsLoading } = useSearch();
+  const { viewMode, lastSearch, setLastSearch } = useAppStorage();
+  const { normalized, isLoading, error } = useSearch();
+  const { theme, themeMode, accentKey, accentColors } = useTheme();
 
+  // Save the *normalized* result to storage when it becomes available.
+  // (We intentionally DO NOT write lastSearch when it's null/undefined)
+  useEffect(() => {
+    if (!normalized) return;
+    // do a cheap equality check — stringify is simple and enough here
+    try {
+      const normStr = JSON.stringify(normalized);
+      const lastStr = JSON.stringify(lastSearch);
+      if (normStr === lastStr) return; // no change -> don't write
+    } catch (e) {
+      // fallback: if stringify fails, still write once
+    }
+    setLastSearch(normalized);
+  }, [normalized, lastSearch, setLastSearch]);
+
+  // set right sidebar key for this page
   useEffect(() => {
     setRightSidebarKey("home");
     return () => setRightSidebarKey(null);
-  }, []);
+  }, [setRightSidebarKey]);
+
+  // show toast when there's an error (still allow fallback rendering)
+  useEffect(() => {
+    if (error) {
+      Toast.show({
+        type: "error",
+        position: "top",
+        text1: "Error",
+        text2: String(error),
+        text2Style: { fontSize: 16 },
+        visibilityTime: 4000,
+        autoHide: true,
+      });
+    }
+  }, [error]);
 
-  // setIsLoading(true);
+  // Determine source to render: prefer live normalized results, otherwise use lastSearch
+  const source = normalized ?? lastSearch ?? null;
+  const displayType = normalized?.type ?? lastSearch?.type ?? null;
 
-  if (!isLoading && !error && !normalized) {
+  // Loading state (use displayType to let skeleton adjust)
+  if (isLoading) {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        style={[styles.container]}
+      >
+        <LoadingSkeleton viewMode={viewMode} displayType={displayType} />
+      </ScrollView>
+    );
+  }
+
+  // No results at all (initial empty state)
+  if (!source) {
     return (
       <View style={[styles.container, { alignItems: "center", marginTop: 40 }]}>
-        <Icon name="search-off" size={48} color="#999" />
-        <Text>Begin Search</Text>
+        <Text
+          style={[
+            {
+              color: theme.textSecondary,
+              fontWeight: "bold",
+              fontSize: 40,
+              letterSpacing: 3,
+            },
+          ]}
+        >
+          Your Search Results Appear Here.
+        </Text>
       </View>
     );
   }
+
+  // If we have a source (normalized or lastSearch) — render it.
+  // It should match the shape you expect (bulk vs single)
   return (
     <ScrollView showsVerticalScrollIndicator={false} style={[styles.container]}>
-      {}
-      {}
-      {isLoading ? (
-        <LoadingSkeleton viewMode={viewMode} displayType={normalized?.type} />
-      ) : error ? (
-        <Text style={{ color: "red" }}>{error}</Text>
-      ) : !isLoading && !normalized ? (
-        <Text>Enter a query and press Enter</Text>
-      ) : (
-        <View>
-          {/* <ScrollView style={{ padding: 16 }}> */}
-
-          {normalized?.type === "bulk" ? (
-            normalized?.blocks.map((block) => (
-              <AccordionGroup
-                key={block.search_term.query}
-                block={block}
-                pageSize={9}
-                viewMode={viewMode}
-              />
-            ))
-          ) : (
-            <PaginatedResults
-              style={styles.searchResults}
-              songs={normalized?.items}
-              pageSize={12}
+      <View>
+        {source.type === "bulk" ? (
+          // bulk blocks: if lastSearch was saved it should have the same `blocks` structure
+          source.blocks?.map((block) => (
+            <AccordionGroup
+              key={
+                block.search_term?.query ??
+                Math.random().toString(36).slice(2, 9)
+              }
+              block={block}
+              pageSize={9}
               viewMode={viewMode}
             />
-          )}
-        </View>
-      )}
+          ))
+        ) : (
+          // single search: normalized.items or lastSearch.items
+          <PaginatedResults
+            style={styles.searchResults}
+            songs={source.items ?? []}
+            pageSize={12}
+            viewMode={viewMode}
+          />
+        )}
+      </View>
     </ScrollView>
   );
 }
diff --git a/app/settings.js b/app/settings.js
@@ -106,7 +106,7 @@ export default function Settings() {
                 accent={theme.accent}
                 accentLight={accentColors[accentKey].light}
                 accentDark={accentColors[accentKey].dark}
-              />{" "}
+              />
             </View>
           </View>
         </View>
diff --git a/components/PaginatedResults.jsx b/components/PaginatedResults.jsx
@@ -53,6 +53,10 @@ export default function PaginatedResults({
   const goPrev = () => goto(page - 1);
   const goNext = () => goto(page + 1);
 
+  const onDownload = (song) => {
+    console.log("This would be Downloaded: ", song);
+  };
+
   return (
     <View style={[{ width: "100%" }]}>
       {/* Render the current page items using your exact markup */}
@@ -189,7 +193,7 @@ export default function PaginatedResults({
                           Play
                         </Text>
                       </Pressable>
-                    </View>{" "}
+                    </View>
                     <View
                       style={[
                         styles?.buttonBox,
@@ -202,7 +206,10 @@ export default function PaginatedResults({
                         },
                       ]}
                     >
-                      <Pressable style={[styles?.button]}>
+                      <Pressable
+                        onPress={() => onDownload(song.webpage_url)}
+                        style={[styles?.button]}
+                      >
                         <Text
                           style={[
                             {
@@ -338,7 +345,7 @@ export default function PaginatedResults({
                           Play
                         </Text>
                       </Pressable>
-                    </View>{" "}
+                    </View>
                     <View
                       style={[
                         styles?.buttonBoxGrid,
@@ -351,7 +358,10 @@ export default function PaginatedResults({
                         },
                       ]}
                     >
-                      <Pressable style={[styles?.button]}>
+                      <Pressable
+                        onPress={() => onDownload(song.webpage_url)}
+                        style={[styles?.button]}
+                      >
                         <Text
                           style={[
                             {
diff --git a/components/Skeleton.jsx b/components/Skeleton.jsx
@@ -2,6 +2,12 @@
 import React, { useEffect, useRef } from "react";
 import { View, Animated, StyleSheet } from "react-native";
 
+/**
+ * Skeleton shimmer. Starts/stops based on `isLoading`.
+ *
+ * Keep using the same props as before. Use it like:
+ *   <Skeleton width={300} height={18} isLoading={isLoading} />
+ */
 export const Skeleton = ({
   width = 100,
   height = 20,
@@ -10,31 +16,77 @@ export const Skeleton = ({
   highlightColor = "#F2F8FC",
   duration = 1200,
   style,
+  isLoading = true, // pass your search-context isLoading here
 }) => {
   const shimmer = useRef(new Animated.Value(0)).current;
+  const loopRef = useRef(null);
+
+  // highlight bar width (bigger than container so it sweeps fully)
+  const highlightWidth = Math.max(width * 1.6, 80);
 
   useEffect(() => {
-    shimmer.setValue(0);
-    Animated.loop(
-      Animated.timing(shimmer, {
+    // helper to start the infinite loop
+    const startLoop = () => {
+      // reset to 0 so animation always starts at left
+      shimmer.setValue(0);
+
+      const timing = Animated.timing(shimmer, {
         toValue: 1,
-        duration,
-        // useNativeDriver: true,
-      })
-    ).start();
-  }, [shimmer, duration]);
+        duration: Math.max(300, duration),
+        useNativeDriver: false, // explicitly false for web compatibility
+      });
+
+      // store the loop so we can stop it later
+      loopRef.current = Animated.loop(timing);
+      loopRef.current.start();
+    };
+
+    // helper to stop the loop
+    const stopLoop = () => {
+      if (loopRef.current && typeof loopRef.current.stop === "function") {
+        try {
+          loopRef.current.stop();
+        } catch (e) {
+          /* ignore */
+        }
+        loopRef.current = null;
+      }
+      // reset shimmer position visually
+      try {
+        shimmer.setValue(0);
+      } catch (e) {
+        /* ignore */
+      }
+    };
 
+    if (isLoading) startLoop();
+    else stopLoop();
+
+    return () => {
+      // cleanup on unmount
+      stopLoop();
+    };
+  }, [isLoading, duration, shimmer, width, highlightWidth]);
+
+  // translate from -highlightWidth to +width (left -> right)
   const translateX = shimmer.interpolate({
     inputRange: [0, 1],
-    outputRange: [-width, width], // left → right only
+    outputRange: [-highlightWidth, width],
   });
 
   return (
     <View
       style={[
-        { width, height, borderRadius, backgroundColor, overflow: "hidden" },
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor,
+          overflow: "hidden",
+        },
         style,
       ]}
+      pointerEvents="none"
     >
       <Animated.View
         style={[
@@ -43,11 +95,13 @@ export const Skeleton = ({
             background: `linear-gradient(90deg, ${backgroundColor}, ${highlightColor}, ${backgroundColor} )`,
             filter: "blur(8px)",
             opacity: 0.4,
-            width,
+            highlightWidth,
             transform: [{ translateX }],
           },
         ]}
       />
     </View>
   );
 };
+
+export default Skeleton;
diff --git a/contexts/AppStorageContext.js b/contexts/AppStorageContext.js
@@ -17,6 +17,8 @@ export function AppStorageProvider({ children }) {
     // new flag - whether to save incoming searches
     saveSearchHistory: true,
     viewMode: "list",
+    // last cached search (trimmed)
+    lastSearch: null, // { type: 'single'|'bulk', query?, queries?, items: [...], when }
   };
 
   const [data, setData] = useState(defaultData);
@@ -94,7 +96,13 @@ export function AppStorageProvider({ children }) {
       viewMode: data.viewMode === "list" ? "grid" : "list",
     }));
 
-  const getViewMode = () => data.viewMode || "list";
+  // NEW: lastSearch helpers (store and retrieve the normalized response as-is)
+  const setLastSearch = (payload) =>
+    setData((s) => ({ ...s, lastSearch: payload || null }));
+
+  const getLastSearch = () => data.lastSearch || null;
+
+  const clearLastSearch = () => setData((s) => ({ ...s, lastSearch: null }));
 
   const setPlaylists = (playlists) => setData((s) => ({ ...s, playlists }));
 
@@ -124,6 +132,12 @@ export function AppStorageProvider({ children }) {
         setPlaylists,
         // (optionally) setter for raw data
         setData,
+
+        // last search cache
+        setLastSearch,
+        lastSearch: data.lastSearch,
+        getLastSearch,
+        clearLastSearch,
       }}
     >
       {children}
diff --git a/contexts/SearchContext.js b/contexts/SearchContext.js
@@ -57,7 +57,7 @@ export function SearchProvider({ children, defaultPageSize = 12 }) {
 
       try {
         // NOTE: backend expects `?query=...`
-        const url = `https://seekbeat.onrender.com/api/seargch/?query=${encodeURIComponent(
+        const url = `https://seekbeat.onrender.com/api/search/?query=${encodeURIComponent(
           q
         )}`;
         const res = await fetch(url, { signal: controller.signal });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export function SearchProvider({ children, defaultPageSize = 12 }) {`
`57`	`57`
`58`	`58`	`try {`
`59`	`59`	// NOTE: backend expects `?query=...`
`60`		- const url = `https://seekbeat.onrender.com/api/seargch/?query=${encodeURIComponent(
	`60`	+ const url = `https://seekbeat.onrender.com/api/search/?query=${encodeURIComponent(
`61`	`61`	`q`
`62`	`62`	)}`;
`63`	`63`	`const res = await fetch(url, { signal: controller.signal });`