🎨 Update folders project and add a first part of tp1

src/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

src/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

src/.expo/metro/externals/assert/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:assert');

src/.expo/metro/externals/async_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:async_hooks');

src/.expo/metro/externals/buffer/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:buffer');

src/.expo/metro/externals/child_process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:child_process');

src/.expo/metro/externals/cluster/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:cluster');

src/.expo/metro/externals/console/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:console');

src/.expo/metro/externals/constants/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:constants');

src/.expo/metro/externals/crypto/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:crypto');

src/.expo/metro/externals/dgram/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dgram');

src/.expo/metro/externals/diagnostics_channel/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:diagnostics_channel');

src/.expo/metro/externals/dns/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:dns');

src/.expo/metro/externals/domain/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:domain');

src/.expo/metro/externals/events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:events');

src/.expo/metro/externals/fs/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs');

src/.expo/metro/externals/fs/promises/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:fs/promises');

src/.expo/metro/externals/http/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http');

src/.expo/metro/externals/http2/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:http2');

src/.expo/metro/externals/https/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:https');

src/.expo/metro/externals/inspector/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:inspector');

src/.expo/metro/externals/module/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:module');

src/.expo/metro/externals/net/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:net');

src/.expo/metro/externals/os/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:os');

src/.expo/metro/externals/path/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:path');

src/.expo/metro/externals/perf_hooks/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:perf_hooks');

src/.expo/metro/externals/process/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:process');

src/.expo/metro/externals/punycode/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:punycode');

src/.expo/metro/externals/querystring/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:querystring');

src/.expo/metro/externals/readline/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:readline');

src/.expo/metro/externals/repl/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:repl');

src/.expo/metro/externals/stream/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:stream');

src/.expo/metro/externals/string_decoder/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:string_decoder');

src/.expo/metro/externals/timers/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:timers');

src/.expo/metro/externals/tls/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tls');

src/.expo/metro/externals/trace_events/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:trace_events');

src/.expo/metro/externals/tty/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:tty');

src/.expo/metro/externals/url/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:url');

src/.expo/metro/externals/util/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:util');

src/.expo/metro/externals/v8/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:v8');

src/.expo/metro/externals/vm/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:vm');

src/.expo/metro/externals/wasi/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:wasi');

src/.expo/metro/externals/worker_threads/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:worker_threads');

src/.expo/metro/externals/zlib/index.js

@@ -0,0 +1 @@
+module.exports = $$require_external('node:zlib');

src/.expo/metro/polyfill.js

@@ -0,0 +1 @@
+global.$$require_external = typeof window === "undefined" ? require : () => null;

src/.expo/metro/polyfill.native.js

@@ -0,0 +1 @@
+global.$$require_external = (moduleId) => {throw new Error(`Node.js standard library module ${moduleId} is not available in this JavaScript environment`);}

src/App.tsx

@@ -0,0 +1,20 @@
+import { SafeAreaView } from 'react-native'
+import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import NavigationBar from "./navigation/NavigationBar";
+import Catalogue from "./screens/Catalogue";
+import {indigoColor} from "./assets/Theme";
+
+export default function App() {
+  return (
+      <SafeAreaView style={styles.container}>
+          <NavigationBar />
+      </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: indigoColor
+    },
+});

src/components/Categ.tsx

@@ -0,0 +1,28 @@
+import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import {greyColor} from "../assets/Theme";
+
+type JokeItemProps = {
+    joke: (CustomJoke | SampleJoke);
+};
+
+export default function Categ(prop: JokeItemProps) {
+    return (
+        <View style={styles.bottomContainer}>
+            <Text style={{color:'white'}}>{prop.joke.type}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    bottomContainer: {
+        backgroundColor: greyColor,
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        margin: 10,
+        borderRadius: 20,
+        width : 100,
+        alignItems : 'center'
+    }
+});

src/components/CategList.tsx

@@ -0,0 +1,22 @@
+import {FlatList} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import Categ from "./Categ";
+
+type JokeListItemProps = {
+    jokes: (CustomJoke | SampleJoke)[];
+};
+
+export default function CategList(props: JokeListItemProps) {
+    return (
+        <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
+            data={props.jokes}
+            keyExtractor={(item) => item.summary().toString()}
+            renderItem={
+                ({ item }: { item: CustomJoke | SampleJoke }) => (
+                    <Categ joke={item}/>
+                )
+            }
+        />
+    );
+}

src/components/JokeHomeSquare.tsx

@@ -0,0 +1,67 @@
+import {StyleSheet, Text, View, Image} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import {darksalmonColor, whiteColor, indigoColor} from "../assets/Theme";
+
+type JokeListItemProps = {
+    joke: (CustomJoke | SampleJoke);
+};
+
+export default function JokeHomeSquare(prop: JokeListItemProps) {
+    return (
+        <View style={styles.container}>
+            <View style={styles.topBackgroundColor}>
+                <View style={{width: 200, height: 40, backgroundColor: darksalmonColor}}/>
+            </View>
+            <View style={styles.bottomBackgroundColor}>
+                <View style={{width: 200, height: 120, backgroundColor: indigoColor}}/>
+            </View>
+            <Image source={{ uri: prop.joke.image }} style={styles.image} />
+            <Text style={[styles.text, styles.textTitle]}>Résumé de la blague</Text>
+            <Text style={[styles.text, styles.textSimple]}>{prop.joke.description()}</Text>
+        </View>
+        );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: 10,
+        marginLeft: 20,
+        position: "relative",
+    },
+    topBackgroundColor: {
+        borderTopLeftRadius: 5,
+        borderTopRightRadius: 5,
+        overflow: 'hidden',
+    },
+    bottomBackgroundColor: {
+        borderBottomLeftRadius: 5,
+        borderBottomRightRadius: 5,
+        overflow: 'hidden',
+    },
+    image: {
+        width: 120,
+        height: 75,
+        position: "absolute",
+        top: 5,
+        left: "50%",
+        marginLeft: -60
+    },
+    text: {
+        position: 'absolute',
+        textAlign: "center",
+        color:whiteColor,
+        paddingBottom: 7,
+        paddingTop: 7,
+        width: "100%"
+    },
+    textTitle: {
+        fontSize: 17,
+        fontWeight: "bold",
+        top: 90
+    },
+    textSimple: {
+        fontSize: 15,
+        top: 115
+    }
+});

src/components/JokeItem.tsx

@@ -1,35 +1,26 @@
-import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import {StyleSheet, Text, View, Image} from 'react-native';
 import {SampleJoke} from "../model/SampleJoke";
 import {CustomJoke} from "../model/CustomJoke";
 import {darksalmonColor, whiteColor, greyColor, indigoColor} from "../assets/Theme";
-import {Colors} from "react-native/Libraries/NewAppScreen";
 
 type JokeListItemProps = {
-    jokes: CustomJoke[] | SampleJoke[];
+    joke: (CustomJoke | SampleJoke);
 };
 
-export default function JokeListItem(props: JokeListItemProps) {
+export default function JokeItem(prop: JokeListItemProps) {
-    const renderItem = ({ item }: { item: CustomJoke | SampleJoke }) => (
+    return (
         <View style={styles.rowContainer}>
             <View style={styles.color}/>
-            <Image source={{ uri: item.image }} style={styles.image} />
+            <Image source={{ uri: prop.joke.image }} style={styles.image} />
             <View style={styles.columnContainer}>
                 <Text style={styles.text}>Résumé de la blague</Text>
-                <Text style={styles.text}>{item.description()}</Text>
+                <Text style={styles.text}>{prop.joke.description()}</Text>
                 <View style={styles.bottomContainer}>
-                    <Text style={{color:'white'}}>{item.type}</Text>
+                    <Text style={{color:'white'}}>{prop.joke.type}</Text>
                 </View>
             </View>
         </View>
     );
-
-    return (
-        <FlatList
-            data={props.jokes}
-            keyExtractor={(item) => item.id.toString()}
-            renderItem={renderItem}
-        />
-    );
 }
 
 const styles = StyleSheet.create({

src/components/JokeListHomeSquare.tsx

@@ -0,0 +1,22 @@
+import {FlatList} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import JokeHomeSquare from "./JokeHomeSquare";
+
+type JokeListItemProps = {
+    jokes: (CustomJoke | SampleJoke)[];
+};
+
+export default function JokeListHomeSquare(props: JokeListItemProps) {
+    return (
+        <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
+            data={props.jokes}
+            renderItem={
+                ({ item }: { item: CustomJoke | SampleJoke }) => (
+                    <JokeHomeSquare joke={item}/>
+                )
+            }
+            keyExtractor={(item) => item.id.toString()}
+        />
+    );
+}

src/components/JokeListItem.tsx

@@ -0,0 +1,22 @@
+import {FlatList} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import JokeItem from "./JokeItem";
+
+type JokeListItemProps = {
+    jokes: (CustomJoke | SampleJoke)[];
+};
+
+export default function JokeListItem(props: JokeListItemProps) {
+    return (
+        <FlatList
+            data={props.jokes}
+            keyExtractor={(item) => item.id.toString()}
+            renderItem={
+                ({ item }: { item: CustomJoke | SampleJoke }) => (
+                    <JokeItem joke={item}/>
+                )
+            }
+        />
+    );
+}

src/data/stub/CustomJokeStub.ts

@@ -0,0 +1,13 @@
+/**
+ * @file CustomJokeStub.ts
+ * @brief Exemple d'utilisation de la classe JokeFactory pour créer des blagues personnalisées.
+ */
+
+import { JokeFactory } from '../../model/JokeFactory';
+
+/**
+ * @brief Stub de blagues personnalisées créées à l'aide de la classe JokeFactory.
+ * @constant
+ * @type {CustomJoke[]}
+ */
+export const customJokeStub = JokeFactory.createCustomJokes('[{"id":"premier", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"deuxieme", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"troisieme", "type":"Default", "setup":"three","punchline":"y\'en toujours a pas ;)", "image":"https://placekitten.com/200/300"},{"id":"quatrieme", "type":"custom bro", "setup":"four","punchline":"y\'en toujours toujours ap", "image":"https://placekitten.com/200/300"}]');

src/navigation/NavigationBar.tsx

@@ -0,0 +1,109 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {Image, SafeAreaView, View} from 'react-native';
+
+import HomeScreen from "../screens/HomeScreen";
+import Catalogue from "../screens/Catalogue";
+import Favorites from "../screens/Favorites";
+import Add from "../screens/AddScreen";
+import Settings from "../screens/Settings";
+
+import {darksalmonColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
+
+
+export default function NavigationBar() {
+    const BottomTabNavigator = createBottomTabNavigator();
+
+    const homeIcon = require("../assets/home_icon.png");
+    const listIcon = require("../assets/list_icon.png");
+    const addIcon = require("../assets/add_icon.png");
+    const favoriteIcon = require("../assets/favorite_icon.png");
+    const settingsIcon = require("../assets/settings_icon.png");
+
+    return (
+        <NavigationContainer>
+            <BottomTabNavigator.Navigator initialRouteName="Accueil"
+                                          screenOptions={{
+                                              headerStyle: {
+                                                  backgroundColor: indigoColor,
+
+                                              },
+                                              headerTitleStyle: {
+                                                  color:darksalmonColor,
+                                                  fontSize:24,
+                                                  textAlign: "center",
+                                                  paddingBottom:20,
+                                              },
+                                              headerTitleAlign: 'center',
+                                              tabBarShowLabel: false,
+                                              tabBarStyle: {
+                                                  backgroundColor: indigoColor,
+                                              }
+                                          }}
+            >
+                <BottomTabNavigator.Screen name="Accueil" component={HomeScreen}
+                                           options={{
+                                               tabBarIcon: ({focused}) => (
+                                                   <Image
+                                                       source={homeIcon}
+                                                       style={{
+                                                           width: 30, height: 30,
+                                                           tintColor: focused ? darksalmonColor : greyColor,
+                                                       }}
+                                                   />
+                                               )
+                                           }}/>
+                <BottomTabNavigator.Screen name="Catalogue" component={Catalogue}
+                                           options={{
+                                               tabBarIcon: ({focused}) => (
+                                                   <Image
+                                                       source={listIcon}
+                                                       style={{
+                                                           width: 30, height: 30,
+                                                           tintColor: focused ? darksalmonColor : greyColor,
+                                                       }}
+                                                   />
+                                               )
+                                           }}/>
+                <BottomTabNavigator.Screen name="Ajouter" component={Add}
+                                           options={{
+                                               tabBarIcon: ({focused}) => (
+                                                   <View style={{backgroundColor: greyColor, borderRadius: 5, padding: 10}}>
+                                                       <Image
+                                                           source={addIcon}
+                                                           style={{
+                                                               width: 20, height: 20,
+                                                               tintColor: focused ? darksalmonColor : "black",
+                                                           }}
+                                                       />
+                                                   </View>
+                                               )
+                                           }}/>
+                <BottomTabNavigator.Screen name="Favoris" component={Favorites}
+                                           options={{
+                                               tabBarIcon: ({focused}) => (
+                                                   <Image
+                                                       source={favoriteIcon}
+                                                       style={{
+                                                           width: 30, height: 30,
+                                                           tintColor: focused ? darksalmonColor : greyColor,
+                                                       }}
+                                                   />
+                                               )
+                                           }}/>
+                <BottomTabNavigator.Screen name="Paramètres" component={Settings}
+                                           options={{
+                                               tabBarIcon: ({focused}) => (
+                                                   <Image
+                                                       source={settingsIcon}
+                                                       style={{
+                                                           width: 30, height: 30,
+                                                           tintColor: focused ? darksalmonColor : greyColor,
+                                                       }}
+                                                   />
+                                               )
+                                           }}/>
+            </BottomTabNavigator.Navigator>
+        </NavigationContainer>
+    )
+}

src/navigation/StackNavigation.tsx

@@ -0,0 +1,20 @@
+import {createStackNavigator} from "@react-navigation/stack";
+import Accueil from "../screens/HomeScreen";
+import Catalogue from "../screens/Catalogue";
+import Add from "../screens/AddScreen";
+import Favorites from "../screens/Favorites";
+import Settings from "../screens/Settings";
+
+
+export default function StackNavigation() {
+    const Stack = createStackNavigator();
+    return (
+        <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen name="Accueil" component={Accueil}/>
+            <Stack.Screen name="Catalogue" component={Catalogue}/>
+            <Stack.Screen name="Ajouter" component={Add}/>
+            <Stack.Screen name="Favoris" component={Favorites}/>
+            <Stack.Screen name="Paramètres" component={Settings}/>
+        </Stack.Navigator>
+    )
+}

src/package.json

@@ -18,6 +18,7 @@
     "react": "18.2.0",
     "react-native": "0.73.2",
     "react-native-gesture-handler": "^2.14.1",
+    "react-native-safe-area-context": "^4.9.0",
     "typescript": "^5.3.0"
   },
   "devDependencies": {

src/screens/AddScreen.tsx

@@ -0,0 +1,41 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { customJokeStub } from '../data/stub/CustomJokeStub';
+import { sampleJokeStub } from '../data/stub/SampleJokeStub';
+import { SafeAreaView } from 'react-native'
+import JokeListItem from "../components/JokeListItem";
+import '../types/extension';
+import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
+
+export default function Catalogue() {
+    const allJokes = [...customJokeStub, ...sampleJokeStub];
+    return (
+        <>
+            <SafeAreaView style={styles.topSafeArea}/>
+            <SafeAreaView style={styles.container}>
+                <StatusBar style="light" />
+                <JokeListItem jokes={allJokes}/>
+            </SafeAreaView>
+        </>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: purpleColor,
+    },
+    centered: {
+        color:darksalmonColor,
+        fontSize:24,
+        textAlign: "center",
+        paddingBottom:20,
+    },
+    title: {
+        backgroundColor: indigoColor
+    },
+    topSafeArea: {
+        flex: 0,
+        backgroundColor: indigoColor
+    }
+});

src/screens/Catalogue.tsx

@@ -7,17 +7,12 @@ import JokeListItem from "../components/JokeListItem";
 import '../types/extension';
 import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
 
-export default function HomeScreen() {
+export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
 return (
     <>
-        <SafeAreaView style={styles.topSafeArea}/>
         <SafeAreaView style={styles.container}>
-            <View style={styles.title}>
+            <JokeListItem jokes={allJokes}/>
-                <Text style={styles.centered}>Catalogue</Text>
-            </View>
-            <StatusBar style="light" />
-             <JokeListItem jokes={allJokes}/>
         </SafeAreaView>
     </>
 )

src/screens/Favorites.tsx

@@ -0,0 +1,41 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { customJokeStub } from '../data/stub/CustomJokeStub';
+import { sampleJokeStub } from '../data/stub/SampleJokeStub';
+import { SafeAreaView } from 'react-native'
+import JokeListItem from "../components/JokeListItem";
+import '../types/extension';
+import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
+
+export default function Catalogue() {
+    const allJokes = [...customJokeStub, ...sampleJokeStub];
+    return (
+        <>
+            <SafeAreaView style={styles.topSafeArea}/>
+            <SafeAreaView style={styles.container}>
+                <StatusBar style="light" />
+                <JokeListItem jokes={allJokes}/>
+            </SafeAreaView>
+        </>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: purpleColor,
+    },
+    centered: {
+        color:darksalmonColor,
+        fontSize:24,
+        textAlign: "center",
+        paddingBottom:20,
+    },
+    title: {
+        backgroundColor: indigoColor
+    },
+    topSafeArea: {
+        flex: 0,
+        backgroundColor: indigoColor
+    }
+});

src/screens/HomeScreen.tsx

@@ -0,0 +1,89 @@
+import { StatusBar } from 'expo-status-bar';
+import {FlatList, Image, StyleSheet, Text, View} from 'react-native';
+import { customJokeStub } from '../data/stub/CustomJokeStub';
+import { sampleJokeStub } from '../data/stub/SampleJokeStub';
+import { SafeAreaView } from 'react-native'
+import JokeListItem from "../components/JokeListItem";
+import '../types/extension';
+import {darksalmonColor, indigoColor, purpleColor, whiteColor} from "../assets/Theme";
+import JokeListHomeSquare from "../components/JokeListHomeSquare";
+import CategList from "../components/CategList";
+import {CustomJoke} from "../model/CustomJoke";
+import {SampleJoke} from "../model/SampleJoke";
+
+export default function Catalogue() {
+    const allJokes = [...customJokeStub, ...sampleJokeStub];
+    return (
+        <>
+            <View style={styles.container}>
+                <View style={styles.top}>
+                    <Image style={styles.cat} source={require('../assets/logo.png')}/>
+                    <Text style={styles.textAccueil}>Chat C'est Drôle</Text>
+                </View>
+                <View style={styles.Jokes}>
+                    <Text style={styles.textLastJokes}>Dernières blagues</Text>
+                    <JokeListHomeSquare jokes={allJokes} />
+                </View>
+                <View style={styles.bestCateg}>
+                    <View style={styles.horizBestCateg}>
+                        <Text style={styles.textBestCateg}>Top Categories</Text>
+                        <Image source={require("../assets/fire_icon.png")}/>
+                    </View>
+                    <View style={styles.horizChip}>
+                        <CategList jokes={allJokes}/>
+                    </View>
+                </View>
+            </View>
+        </>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: purpleColor,
+        flex:1,
+    },
+    top: {
+        alignItems: "center",
+    },
+    cat: {
+        height:160,
+        width: 160
+    },
+    textAccueil: {
+        fontSize: 25,
+        color: darksalmonColor,
+        fontWeight: "bold",
+    },
+    Jokes: {
+        display:"flex",
+        flexDirection:"column",
+        marginTop: 50,
+        marginLeft: 20,
+    },
+    scrollList: {
+        alignItems: "center"
+    },
+    textLastJokes: {
+        color: whiteColor,
+        fontSize: 20,
+        fontWeight: "bold",
+    },
+    bestCateg: {
+        marginTop: 30,
+        marginLeft: 20,
+    },
+    horizBestCateg: {
+        flexDirection: "row",
+    },
+    textBestCateg: {
+        color: whiteColor,
+        fontSize: 20,
+        fontWeight: "bold",
+    },
+    horizChip: {
+        flexDirection: "row",
+        marginTop: 30,
+    }
+
+});

src/screens/Settings.tsx

@@ -0,0 +1,41 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { customJokeStub } from '../data/stub/CustomJokeStub';
+import { sampleJokeStub } from '../data/stub/SampleJokeStub';
+import { SafeAreaView } from 'react-native'
+import JokeListItem from "../components/JokeListItem";
+import '../types/extension';
+import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
+
+export default function Catalogue() {
+    const allJokes = [...customJokeStub, ...sampleJokeStub];
+    return (
+        <>
+            <SafeAreaView style={styles.topSafeArea}/>
+            <SafeAreaView style={styles.container}>
+                <StatusBar style="light" />
+                <JokeListItem jokes={allJokes}/>
+            </SafeAreaView>
+        </>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: purpleColor,
+    },
+    centered: {
+        color:darksalmonColor,
+        fontSize:24,
+        textAlign: "center",
+        paddingBottom:20,
+    },
+    title: {
+        backgroundColor: indigoColor
+    },
+    topSafeArea: {
+        flex: 0,
+        backgroundColor: indigoColor
+    }
+});

src/tp-react-native/.gitignore

@@ -1,35 +0,0 @@
-# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
-
-# dependencies
-node_modules/
-
-# Expo
-.expo/
-dist/
-web-build/
-
-# Native
-*.orig.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Metro
-.metro-health-check*
-
-# debug
-npm-debug.*
-yarn-debug.*
-yarn-error.*
-
-# macOS
-.DS_Store
-*.pem
-
-# local env files
-.env*.local
-
-# typescript
-*.tsbuildinfo

src/tp-react-native/App.tsx

@@ -1,7 +0,0 @@
-import HomePage from './screens/HomeScreen';
-
-export default function App() {
-  return (
-    <HomePage />
-  );
-}

src/tp-react-native/data/stub/CustomJokeStub.ts

@@ -1,13 +0,0 @@
-/**
- * @file CustomJokeStub.ts
- * @brief Exemple d'utilisation de la classe JokeFactory pour créer des blagues personnalisées.
- */
-
-import { JokeFactory } from '../../model/JokeFactory';
-
-/**
- * @brief Stub de blagues personnalisées créées à l'aide de la classe JokeFactory.
- * @constant
- * @type {CustomJoke[]}
- */
-export const customJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"3", "type":"Default", "setup":"three","punchline":"y\'en toujours a pas ;)", "image":"https://placekitten.com/200/300"},{"id":"4", "type":"custom bro", "setup":"four","punchline":"y\'en toujours toujours ap", "image":"https://placekitten.com/200/300"}]');