Merge pull request #7 from bsrodrigue/develop

Develop

App.tsx

@@ -3,10 +3,10 @@ import { decode } from "base-64";
 import { KeyboardAvoidingView, Platform } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Toast } from "react-native-toast-message/lib/src/Toast";
-import { useCachedResources } from "./hooks";
-import RootStackNavigator from "./navigator";
-import { SessionProvider } from "./providers";
-import { lightTheme } from "./themes";
+import { useCachedResources } from "./src/hooks";
+import RootStackNavigator from "./src/navigator";
+import { SessionProvider } from "./src/providers";
+import { lightTheme } from "./src/themes";
 
 if (typeof atob === 'undefined') {
   global.atob = decode;

app.config.js

@@ -6,10 +6,10 @@ module.exports = {
     "githubUrl": "https://github.com/bsrodrigue/stalnov-native",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./src/assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/logo.png",
+      "image": "./src/assets/logo.png",
       "resizeMode": "contain",
       "backgroundColor": "#22A39F"
     },
@@ -21,19 +21,16 @@ module.exports = {
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/icon.png",
+        "foregroundImage": "./src/assets/icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.bsrodrigue.bibliobooks"
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
+      "package": "bf.bsrodrigue.bibliobooks"
     },
     "extra": {
       "eas": {
         "projectId": "e5e15686-405f-4ad5-bda8-ad23272610e9"
       },
-      "API_URL": "http://192.168.11.112:3000/api",
+      "API_URL": "https://fine-red-tick-coat.cyclic.cloud/api",
       "FIREBASE_API_KEY": process.env['EXPO_PUBLIC_FIREBASE_API_KEY'],
       "FIREBASE_AUTH_DOMAIN": process.env['EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN'],
       "FIREBASE_PROJECT_ID": process.env['EXPO_PUBLIC_FIREBASE_PROJECT_ID'],

package.json

@@ -49,7 +49,8 @@
     "typescript": "^4.9.4",
     "usehooks-ts": "^2.9.1",
     "util": "^0.12.5",
-    "yup": "^1.2.0"
+    "yup": "^1.2.0",
+    "react-native-pager-view": "6.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

api/chapters/index.ts → src/api/chapters/index.ts

@@ -1,6 +1,6 @@
 import { where } from "firebase/firestore";
-import { Chapter, ChapterStatus, EntityType } from "../../types/models";
-import { createOwnedEntity, deleteEntityById, getEntitiesWhere, getEntityRefById, updateEntity } from "../base";
+import { ChapterStatus, EntityType } from "../../types/models";
+import { getEntitiesWhere } from "../base";
 import client from "../client";
 
 export type CreateChapterInput = {
@@ -15,6 +15,13 @@ export async function createChapter(payload: CreateChapterInput) {
     return result.data;
 }
 
+export async function likeChapter({ chapterId }: { chapterId: number }) {
+    await client.post("likes/like", { chapterId });
+}
+
+export async function unlikeChapter({ chapterId }: { chapterId: number }) {
+    await client.post("likes/unlike", { chapterId });
+}
 export type EditChapterInput = {
     chapterId: number;
     title?: string;

components/NovelList/NovelList.tsx → src/components/NovelList/NovelList.tsx

@@ -19,7 +19,7 @@ export default function NovelList({ novels, onPressItem, refreshing, onRefresh }
                 <Card containerStyle={{ marginHorizontal: 0, borderRadius: 10 }}>
                     <TouchableOpacity key={index} onPress={() => onPressItem(item)}>
                         <View style={{ flexDirection: "row", gap: 10 }}>
-                            <Image resizeMode="cover" style={{ width: 70, height: 100, borderRadius: 5 }} source={{ uri: item?.coverUrl }} />
+                            <Image resizeMode="cover" style={{ width: 70, height: 100, borderRadius: 5 }} source={item?.coverUrl ? { uri: item?.coverUrl } : require("../../assets/illustrations/placeholder.png")} />
                             <View>
                                 <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
                                     <Text numberOfLines={1} style={{ fontFamily: "Quicksand-700" }}>{item.title}</Text>

components/RecommendationCarousel/RecommendationCarousel.tsx → src/components/RecommendationCarousel/RecommendationCarousel.tsx

@@ -87,10 +87,10 @@ export default function RecommendationCarousel({
                                 }
                                 setSelectedNovel(index);
                             }}
-                            style={{ opacity: selectedNovel === index ? 1 : 0.5 }} key={index}>
+                            key={index}>
                             <Image resizeMode="cover" style={{ height: 110, width: 70, borderRadius: 5, marginBottom: 5 }} source={{ uri: item?.coverUrl }} />
-                            <Text style={styles.novelTitle}>{title}</Text>
-                            <Text style={styles.chapterCount}>{item?.chapters.length}{" "}chapitres</Text>
+                            <Text style={styles.novelTitle}>{item?.title}</Text>
+                            <Text style={styles.chapterCount}>{item?.chapters.length}{" "}chapitre{item?.chapters?.length > 1 ? "s" : ""}</Text>
                         </TouchableOpacity>
                     )
                     } />

components/Richtext/Richtext.tsx → src/components/Richtext/Richtext.tsx

@@ -16,7 +16,8 @@ const Richtext = React.forwardRef((
     {
         initialContentHTML,
         onChange, placeholder,
-        lightMode, disabled }: RichtextProps, ref
+        lightMode, disabled
+    }: RichtextProps, ref: React.ForwardedRef<RichEditor>
 ) => (
 
     <ScrollView>

src/hooks/api/reader/index.ts

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { likeChapter, unlikeChapter } from "../../../api/chapters";
+import { getPublicNovels } from "../../../api/novels";
+import { notify } from "../../../lib";
+import { Chapter, ReaderNovel } from "../../../types/models";
+
+export function useLatestNovels() {
+    const [latestNovels, setLatestNovels] = useState<Array<ReaderNovel>>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const getLatestNovels = async () => {
+        try {
+            setIsLoading(true);
+            const novels: ReaderNovel[] = await getPublicNovels();
+            setLatestNovels(novels);
+        } catch (error) {
+            notify.error("Une erreur est survenue en chargeant les histoires");
+            console.error(error)
+        } finally {
+            setIsLoading(false);
+        }
+
+    }
+
+    return { getLatestNovels, latestNovels, isLoading }
+}
+
+function chapterIsLikedByUser(chapter: Chapter, userId: number) {
+    return chapter?.likes?.some((like) => like.ownerId === userId);
+}
+
+export function useChapter(chapter: Chapter, userId: number, setChapters: React.Dispatch<React.SetStateAction<(Chapter & {
+    reads: any[];
+    likes: any[];
+    comments: any[];
+})[]>>) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLiked, setIsLiked] = useState(chapterIsLikedByUser(chapter, userId));
+    const [likesCount, setLikesCount] = useState(chapter?.likes?.length || 0);
+
+    useEffect(() => {
+        setIsLiked(chapterIsLikedByUser(chapter, userId));
+        setLikesCount(chapter?.likes?.length || 0);
+    }, [chapter]);
+
+    const action = async (id: number, call: any) => {
+        try {
+            setIsLoading(true);
+            await call({ chapterId: id });
+        } catch (error) {
+            notify.error("Erreur");
+            console.error(error)
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    const like = async () => {
+        await action(chapter.id, likeChapter);
+        setIsLiked(true);
+        setLikesCount(likesCount + 1);
+        setChapters((prev) => {
+            const like = { ownerId: userId };
+            prev = prev.map((chap) => {
+                if (chap.id === chapter.id) {
+                    chap.likes.push(like);
+                }
+                return chap;
+            })
+            return prev;
+        })
+        notify.success("Chapitre voté!")
+    }
+
+    const unlike = async () => {
+        await action(chapter.id, unlikeChapter);
+        setIsLiked(false);
+        setLikesCount(likesCount - 1);
+        setChapters((prev) => {
+            prev = prev.map((chap) => {
+                if (chap.id === chapter.id) {
+                    chap.likes = chap.likes.filter((like) => like.ownerId !== userId)
+                }
+                return chap;
+            })
+            return prev;
+        })
+        notify.success("Vote supprimé!")
+    }
+
+    const toggleLike = async () => {
+        isLiked ? await unlike() : await like();
+    }
+
+
+    return { toggleLike, isLoading, isLiked, likesCount };
+}

screens/LibraryScreen/LibraryScreen.tsx → src/screens/LibraryScreen/LibraryScreen.tsx

@@ -25,7 +25,7 @@ export default function NoveltyScreen({ navigation }: NoveltyScreenProps) {
                 onRefresh={fetchLibraryNovels}
                 novels={library?.novels || []}
                 onNovelPress={(novel: LibraryNovel) => {
-                    navigation.navigate("Reader", { novel, chapter: novel.chapters[0] })
+                    navigation.navigate("Reader", { novel })
                 }}
                 onLastItemPress={() => {
                     navigation.navigate("Novelty");