hide medical guides

Signed-off-by: Shreyans Jain <[email protected]>

apps/mobile/app/(tabs)/index.tsx

@@ -1,28 +1,31 @@
+import AsyncStorage from "@react-native-async-storage/async-storage"
 import { useState } from "react"
 import { View } from "react-native"
 import { SafeAreaView } from "react-native-safe-area-context"
 import { stringSimilarity } from "string-similarity-js"
 import { GuidesView } from "~/components/guides"
 import { LargeTitleHeader } from "~/components/nativewindui/LargeTitleHeader"
 import { SearchInput } from "~/components/nativewindui/SearchInput"
-import guideIndex from "~/guides/index.json"
+import type GuideIndex from "~/guides/index.json"
 
 export type SearchResult = {
     title: string
     slug: string
     image: string
+    hidden: boolean
     score: number
 }
 
-const rankSearch = (
+const rankSearch = async (
     text: string,
     setSearchResults: React.Dispatch<React.SetStateAction<SearchResult[]>>,
+    guideIndex: typeof GuideIndex,
 ) => {
     const searchResults: SearchResult[] = []
     for (const v of guideIndex) {
         const score = stringSimilarity(text, v.title)
-        if (score > 0.2) {
-            searchResults.push({ ...v, score: score })
+        if (score > 0.2 && !v.hidden) {
+            searchResults.push({ ...v, hidden: !!v.hidden, score: score })
         }
     }
     searchResults.sort((a, b) => b.score - a.score)
@@ -33,6 +36,13 @@ const rankSearch = (
 export default function HomeScreen() {
     const [searchValue, setSearchValue] = useState("")
     const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+    const [guideIndex, setGuideIndex] = useState<typeof GuideIndex>([])
+
+    AsyncStorage.getItem("guideIndex").then((value) => {
+        if (value) {
+            setGuideIndex(JSON.parse(value))
+        }
+    })
 
     return (
         <>
@@ -53,11 +63,14 @@ export default function HomeScreen() {
                         defaultValue={searchValue}
                         onChangeText={(text) => {
                             setSearchValue(text)
-                            rankSearch(text, setSearchResults)
+                            rankSearch(text, setSearchResults, guideIndex)
                         }}
                     />
                 </View>
-                <GuidesView searchResults={searchResults} />
+                <GuidesView
+                    searchResults={searchResults}
+                    guideIndex={guideIndex}
+                />
             </SafeAreaView>
         </>
     )

apps/mobile/app/_layout.tsx

@@ -34,6 +34,7 @@ export default function RootLayout() {
         // });
 
         registerBackgroundFetchAsync()
+
         ;(async () => {
             const baseUrl = "https://content.useguider.com"
             AsyncStorage.setItem("lastFetch", new Date().toISOString())
@@ -46,6 +47,8 @@ export default function RootLayout() {
 
             await AsyncStorage.setItem("guideIndex", JSON.stringify(newIndex))
 
+            console.log(newIndex)
+
             for (const i of newIndex) {
                 const guide = await (
                     await fetch(`${baseUrl}/${i.slug}.json`)

apps/mobile/app/guide/[slug].tsx

@@ -1,14 +1,13 @@
 import AsyncStorage from "@react-native-async-storage/async-storage"
-import { Icon } from "@roninoss/icons"
 import { getNetworkStateAsync } from "expo-network"
 import { Stack, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { FlatList, ScrollView, View, useWindowDimensions } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe"
 import { Text } from "~/components/nativewindui/Text"
+import { Skeleton } from "~/components/skeleton"
 import { useColorScheme } from "~/lib/useColorScheme"
-import { COLORS } from "~/theme/colors"
 
 type Guide = {
     title: string
@@ -32,7 +31,7 @@ const GuidePage = () => {
 
     const { width } = useWindowDimensions()
 
-    const { colorScheme } = useColorScheme()
+    const { isDarkColorScheme } = useColorScheme()
 
     useEffect(() => {
         AsyncStorage.getItem(slug as string).then((guide) => {
@@ -94,27 +93,33 @@ const GuidePage = () => {
                         }}
                     />
                     {playerLoading ? (
-                        <View
+                        // <View
+                        //     style={{
+                        //         height: ((width - insets.right - 32) / 16) * 9,
+                        //     }}
+                        //     className="items-center justify-center"
+                        // >
+                        //     <Icon
+                        //         name="arrow-up"
+                        //         ios={{
+                        //             name: "arrow.triangle.2.circlepath",
+                        //             symbolEffect: {
+                        //                 type: "pulse",
+                        //                 animateBy: "layer",
+                        //                 speed: 1,
+                        //                 isActive: true,
+                        //             },
+                        //         }}
+                        //         size={40}
+                        //         color={COLORS[colorScheme].foreground}
+                        //     />
+                        // </View>
+                        <Skeleton
+                            dark={isDarkColorScheme}
                             style={{
                                 height: ((width - insets.right - 32) / 16) * 9,
                             }}
-                            className="items-center justify-center"
-                        >
-                            <Icon
-                                name="arrow-up"
-                                ios={{
-                                    name: "arrow.triangle.2.circlepath",
-                                    symbolEffect: {
-                                        type: "pulse",
-                                        animateBy: "layer",
-                                        speed: 1,
-                                        isActive: true,
-                                    },
-                                }}
-                                size={40}
-                                color={COLORS[colorScheme].foreground}
-                            />
-                        </View>
+                        />
                     ) : null}
                 </View>
             ) : null}

apps/mobile/components/guides.tsx

@@ -1,17 +1,28 @@
 import { Link } from "expo-router"
 import { View } from "react-native"
 import type { SearchResult } from "~/app/(tabs)"
-import guideIndex from "~/guides/index.json"
+import type GuideIndex from "~/guides/index.json"
 import { ESTIMATED_ITEM_HEIGHT, List, ListItem } from "./nativewindui/List"
 
-const GuidesView = ({ searchResults }: { searchResults: SearchResult[] }) => {
+const GuidesView = ({
+    searchResults,
+    guideIndex,
+}: {
+    searchResults: SearchResult[]
+    guideIndex: typeof GuideIndex
+}) => {
+    console.log(guideIndex)
     return (
         <View className="h-full w-screen">
             <List
                 keyboardShouldPersistTaps="handled"
                 variant="insets"
                 // @ts-ignore
-                data={searchResults.length > 0 ? searchResults : guideIndex}
+                data={
+                    searchResults.length > 0
+                        ? searchResults
+                        : guideIndex.filter((v) => !v.hidden)
+                }
                 estimatedItemSize={ESTIMATED_ITEM_HEIGHT.titleOnly}
                 renderItem={(item) => (
                     <Link

apps/mobile/components/skeleton.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import React from "react"
+import {
+    Animated,
+    Easing,
+    StyleSheet,
+    View,
+    type ViewStyle,
+} from "react-native"
+
+const BASE_COLORS = {
+    dark: { primary: "rgb(17, 17, 17)", secondary: "rgb(51, 51, 51)" },
+    light: {
+        primary: "rgb(250, 250, 250)",
+        secondary: "rgb(205, 205, 205)",
+    },
+} as const
+
+const makeColors = (mode: keyof typeof BASE_COLORS) => [
+    BASE_COLORS[mode].primary,
+    BASE_COLORS[mode].secondary,
+    BASE_COLORS[mode].secondary,
+    BASE_COLORS[mode].primary,
+    BASE_COLORS[mode].secondary,
+    BASE_COLORS[mode].primary,
+]
+
+const DARK_COLORS = new Array(3).fill(0).flatMap(() => makeColors("dark"))
+
+const LIGHT_COLORS = new Array(3).fill(0).flatMap(() => makeColors("light"))
+
+export const Skeleton = ({
+    style,
+    delay,
+    dark,
+}: {
+    style?: ViewStyle
+    delay?: number
+    dark?: boolean
+} = {}) => {
+    const translateX = React.useRef(new Animated.Value(-1)).current
+    const [width, setWidth] = React.useState(150)
+
+    const colors = dark ? DARK_COLORS : LIGHT_COLORS
+    const targetRef = React.useRef<View>(null)
+
+    const onLayout = React.useCallback(() => {
+        targetRef.current?.measureInWindow((_x, _y, width, _height) => {
+            setWidth(width)
+        })
+    }, [])
+
+    React.useEffect(() => {
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(translateX, {
+                    delay: delay || 0,
+                    toValue: 1,
+                    duration: 5000,
+                    useNativeDriver: process.env.EXPO_OS !== "web",
+                    // Ease in
+                    easing: Easing.in(Easing.ease),
+                }),
+            ]),
+        ).start()
+    }, [translateX])
+
+    const translateXStyle = React.useMemo(
+        () => ({
+            transform: [
+                {
+                    translateX: translateX.interpolate({
+                        inputRange: [-1, 1],
+                        outputRange: [-width * 8, width],
+                    }),
+                },
+            ],
+        }),
+        [translateX, width],
+    )
+
+    return (
+        <View
+            ref={targetRef}
+            style={[
+                {
+                    height: 32,
+                    borderRadius: 8,
+                    borderCurve: "continuous",
+                    overflow: "hidden",
+                    backgroundColor: "transparent",
+                },
+                style,
+            ]}
+            onLayout={onLayout}
+        >
+            <Animated.View
+                style={[
+                    translateXStyle,
+                    {
+                        width: "800%",
+                        height: "100%",
+                        backgroundColor: "transparent",
+                    },
+                ]}
+            >
+                <Animated.View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            [process.env.EXPO_OS === "web"
+                                ? "backgroundImage"
+                                : "experimental_backgroundImage"]:
+                                `linear-gradient(to right, ${colors.join(
+                                    ", ",
+                                )})`,
+                        },
+                    ]}
+                />
+            </Animated.View>
+        </View>
+    )
+}

apps/mobile/guides/index.json

@@ -9,6 +9,7 @@
         "title": "How To Perform CPR on a Baby",
         "slug": "cpr-baby",
         "image": "",
-        "updated": "2024-12-04"
+        "updated": "2024-12-04",
+        "hidden": true
     }
 ]

apps/mobile/lib/background-fetch.ts

@@ -36,12 +36,12 @@ TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
 // 2. Register the task at some point in your app by providing the same name,
 // and some configuration options for how the background fetch should behave
 // Note: This does NOT need to be in the global scope and CAN be used in your React components!
-async function registerBackgroundFetchAsync() {
+const registerBackgroundFetchAsync = async () => {
     return BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {
         minimumInterval: 24 * 60 * 60, // 15 minutes
         stopOnTerminate: false, // android only,
         startOnBoot: true, // android only
     });
-}
+};
 
 export { registerBackgroundFetchAsync };

biome.json

@@ -14,6 +14,11 @@
                         "strictCase": false
                     }
                 }
+            },
+            "correctness": {
+                "useExhaustiveDependencies": {
+                    "level": "warn"
+                }
             }
         }
     },