💄 Update UI code, remove somes un-used import

src/App.tsx

@@ -1,7 +1,6 @@
 import { SafeAreaView } from 'react-native'
-import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import {StyleSheet} from 'react-native';
 import NavigationBar from "./navigation/NavigationBar";
-import Catalogue from "./screens/Catalogue";
 import {indigoColor} from "./assets/Theme";
 
 export default function App() {

src/components/Categ.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import {SampleJoke} from "../model/SampleJoke";
 import {CustomJoke} from "../model/CustomJoke";
 import {greyColor} from "../assets/Theme";

src/components/Categs.tsx

@@ -7,7 +7,7 @@ type JokeListItemProps = {
     jokes: (CustomJoke | SampleJoke)[];
 };
 
-export default function CategList(props: JokeListItemProps) {
+export default function Categs(props: JokeListItemProps) {
     return (
         <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
             data={props.jokes}

src/components/JokeItem.tsx

@@ -2,6 +2,7 @@ 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 Categ from "./Categ";
 
 type JokeListItemProps = {
     joke: (CustomJoke | SampleJoke);
@@ -15,9 +16,7 @@ export default function JokeItem(prop: JokeListItemProps) {
             <View style={styles.columnContainer}>
                 <Text style={styles.text}>Résumé de la blague</Text>
                 <Text style={styles.text}>{prop.joke.description()}</Text>
-                <View style={styles.bottomContainer}>
+                <Categ joke={prop.joke}/>
-                    <Text style={{color:'white'}}>{prop.joke.type}</Text>
-                </View>
             </View>
         </View>
     );

src/components/JokeItems.tsx

@@ -7,7 +7,7 @@ type JokeListItemProps = {
     jokes: (CustomJoke | SampleJoke)[];
 };
 
-export default function JokeListItem(props: JokeListItemProps) {
+export default function JokeItems(props: JokeListItemProps) {
     return (
         <FlatList
             data={props.jokes}

src/components/JokesHomeSquare.tsx

@@ -7,7 +7,7 @@ type JokeListItemProps = {
     jokes: (CustomJoke | SampleJoke)[];
 };
 
-export default function JokeListHomeSquare(props: JokeListItemProps) {
+export default function JokesHomeSquare(props: JokeListItemProps) {
     return (
         <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
             data={props.jokes}

src/model/Joke.ts

@@ -96,6 +96,9 @@ export abstract class Joke {
      * @return {string} Un résumé de la blague.
      */
     public summary(): string {
+        if(this.punchline.length <= 25){
+            return this.punchline;
+        }
         return this.punchline.substring(0, 24) + "...";
     }
 

src/navigation/NavigationBar.tsx

@@ -1,6 +1,6 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import {Image, SafeAreaView, View} from 'react-native';
+import {Image, View} from 'react-native';
 
 import HomeScreen from "../screens/HomeScreen";
 import Catalogue from "../screens/Catalogue";
@@ -8,7 +8,7 @@ import Favorites from "../screens/Favorites";
 import Add from "../screens/AddScreen";
 import Settings from "../screens/Settings";
 
-import {darksalmonColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
+import {darksalmonColor, greyColor, indigoColor} from "../assets/Theme";
 
 
 export default function NavigationBar() {

src/navigation/StackNavigation.tsx

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

src/screens/AddScreen.tsx

@@ -1,41 +1,11 @@
-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 JokeItems from "../components/JokeItems";
-import JokeListItem from "../components/JokeListItem";
 import '../types/extension';
-import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
 
 export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
     return (
-        <>
+        <JokeItems jokes={allJokes}/>
-            <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

@@ -1,39 +1,11 @@
-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 JokeItems from "../components/JokeItems";
-import JokeListItem from "../components/JokeListItem";
 import '../types/extension';
-import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
 
 export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
     return (
-    <>
+        <JokeItems jokes={allJokes}/>
-        <SafeAreaView style={styles.container}>
-            <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/Favorites.tsx

@@ -1,41 +1,11 @@
-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 JokeItems from "../components/JokeItems";
-import JokeListItem from "../components/JokeListItem";
 import '../types/extension';
-import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
 
 export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
     return (
-        <>
+        <JokeItems jokes={allJokes}/>
-            <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

@@ -1,15 +1,10 @@
-import { StatusBar } from 'expo-status-bar';
+import {Image, StyleSheet, Text, View} from 'react-native';
-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 {darksalmonColor, purpleColor, whiteColor} from "../assets/Theme";
-import JokeListHomeSquare from "../components/JokeListHomeSquare";
+import JokesHomeSquare from "../components/JokesHomeSquare";
-import CategList from "../components/CategList";
+import Categs from "../components/Categs";
-import {CustomJoke} from "../model/CustomJoke";
-import {SampleJoke} from "../model/SampleJoke";
 
 export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
@@ -22,7 +17,7 @@ export default function Catalogue() {
                 </View>
                 <View style={styles.Jokes}>
                     <Text style={styles.textLastJokes}>Dernières blagues</Text>
-                    <JokeListHomeSquare jokes={allJokes} />
+                    <JokesHomeSquare jokes={allJokes} />
                 </View>
                 <View style={styles.bestCateg}>
                     <View style={styles.horizBestCateg}>
@@ -30,7 +25,7 @@ export default function Catalogue() {
                         <Image source={require("../assets/fire_icon.png")}/>
                     </View>
                     <View style={styles.horizChip}>
-                        <CategList jokes={allJokes}/>
+                        <Categs jokes={allJokes}/>
                     </View>
                 </View>
             </View>

src/screens/Settings.tsx

@@ -1,41 +1,11 @@
-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 JokeItems from "../components/JokeItems";
-import JokeListItem from "../components/JokeListItem";
 import '../types/extension';
-import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
 
 export default function Catalogue() {
     const allJokes = [...customJokeStub, ...sampleJokeStub];
     return (
-        <>
+        <JokeItems jokes={allJokes}/>
-            <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
-    }
-});