src/components/Categ.tsx

@@ -1,16 +1,15 @@
 import {StyleSheet, Text, View} from 'react-native';
-import {SampleJoke} from "../model/SampleJoke";
-import {CustomJoke} from "../model/CustomJoke";
 import {greyColor} from "../assets/Theme";
+import {Category} from "../model/Category";
 
-type JokeItemProps = {
-    joke: (CustomJoke | SampleJoke);
+type CategItemProps = {
+    category: Category;
 };
 
-export default function Categ(prop: JokeItemProps) {
+export default function Categ(prop: CategItemProps) {
     return (
         <View style={styles.bottomContainer}>
-            <Text style={{color:'white'}}>{prop.joke.type}</Text>
+            <Text style={{color:'white'}}>{prop.category.name}</Text>
         </View>
     );
 }
@@ -22,7 +21,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: 10,
         margin: 10,
         borderRadius: 20,
-        width : 100,
+        width : 120,
         alignItems : 'center'
     }
 });

src/components/Categs.tsx

@@ -2,19 +2,20 @@ import {FlatList} from 'react-native';
 import {SampleJoke} from "../model/SampleJoke";
 import {CustomJoke} from "../model/CustomJoke";
 import Categ from "./Categ";
+import {Category} from "../model/Category";
 
-type JokeListItemProps = {
-    jokes: (CustomJoke | SampleJoke)[];
+type CategListItemProps = {
+    categories: Category[];
 };
 
-export default function Categs(props: JokeListItemProps) {
+export default function Categs(props: CategListItemProps) {
     return (
         <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
-            data={props.jokes}
-            keyExtractor={(item) => item.type.toString()}
+            data={props.categories.sort((a, b) => b.number - a.number)}
+            keyExtractor={(item) => item.name}
             renderItem={
-                ({ item }: { item: CustomJoke | SampleJoke }) => (
-                    <Categ joke={item}/>
+                ({ item }: { item: Category }) => (
+                    <Categ category={item}/>
                 )
             }
         />

src/components/JokeItem.tsx

@@ -16,7 +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>
-                <Categ joke={prop.joke}/>
+                {/*<Categ category={prop.joke.type}/>*/}
             </View>
         </View>
     );

src/model/Category.ts

@@ -0,0 +1,55 @@
+/**
+ * @file Category.ts
+ * @brief Définition de la classe Catégory.
+ */
+
+/**
+ * @class
+ * @brief Représente une catégorie nom.
+ */
+export class Category {
+    private _name: string;
+    private _number: number;
+
+    /**
+     * @brief Constructeur de la classe Category.
+     * @param {string} name - Le nom de la catégorie.
+     * @param {number} number - Le nombre de la catégorie.
+     */
+    constructor(name: string, number: number) {
+        this._name = name;
+        this._number = number;
+    }
+
+    /**
+     * @brief Obtient le nom de la catégorie.
+     * @return {string} Le nom de la catégorie.
+     */
+    get name(): string {
+        return this._name;
+    }
+
+    /**
+     * @brief Obtient le nombre de la catégorie.
+     * @return {number} Le nombre de la catégorie.
+     */
+    get number(): number {
+        return this._number;
+    }
+
+    /**
+     * @brief Modifie le nom de la catégorie.
+     * @param {string} name - Le nom de la categorie.
+     */
+    set name(name: string) {
+        this._name = name;
+    }
+
+    /**
+     * @brief Modifie le nombre de la catégorie.
+     * @param {number} number - Le nombre de la catégorie.
+     */
+    set number(number: number) {
+        this._number = number;
+    }
+}

src/redux/actions/JokeAction.ts

@@ -1,18 +1,28 @@
-import {CustomJoke} from "../../model/CustomJoke";
+import {Category} from "../../model/Category";
 import {SampleJoke} from "../../model/SampleJoke";
 
 export enum ActionType {
-  FETCH_JOKES = 'FETCH_JOKE',
+  FETCH_CATEGORIES = 'FETCH_CATEGORIES',
+  FETCH_JOKES = 'FETCH_JOKES',
 }
 
-interface actionFetch {
+type actionFetch = {
+  type: ActionType.FETCH_CATEGORIES;
+  payload: Category[];
+} | {
   type: ActionType.FETCH_JOKES;
-  payload: (CustomJoke | SampleJoke)[];
+  payload: SampleJoke[];
 }
 
 export type Action = actionFetch;
 
-export const setJokesList = (jokesList: (CustomJoke | SampleJoke)[]) => {
+export const setCategoriesList = (categoriesList: Category[]) => {
+  return {
+    type: ActionType.FETCH_CATEGORIES,
+    payload: categoriesList,
+  };
+}
+export const setJokesList = (jokesList: SampleJoke[]) => {
   return {
     type: ActionType.FETCH_JOKES,
     payload: jokesList,

src/redux/reducers/jokeReducer.ts

@@ -2,15 +2,20 @@ import {CustomJoke} from "../../model/CustomJoke";
 import {SampleJoke} from "../../model/SampleJoke";
 import {Action} from "redux";
 import {ActionType} from "../actions/JokeAction";
+import {Category} from "../../model/Category";
 
 interface State {
-    jokes: (CustomJoke | SampleJoke)[];
-    favoriteJokes: (CustomJoke | SampleJoke)[],
+    categories: Category[];
+    jokes: SampleJoke[];
+    favoriteJokes: SampleJoke[],
+    favoriteCategories: Category[],
 }
 
 const initialState = {
+    categories: [],
     jokes: [],
     favoriteJokes: [],
+    favoriteCategories: [],
 }
 
 const appReducer = (state: State = initialState, action: Action) => {
@@ -18,6 +23,9 @@ const appReducer = (state: State = initialState, action: Action) => {
         case ActionType.FETCH_JOKES:
             // @ts-ignore
             return {...state, jokes: action.payload};
+        case ActionType.FETCH_CATEGORIES:
+            // @ts-ignore
+            return {...state, categories: action.payload};
         //case ActionType....
         default:
             return state;

src/redux/thunk/CatalogueSampleJokeThunk.ts

@@ -1,23 +0,0 @@
-//Define your action creators that will be responsible for asynchronous operations
-import {CustomJoke} from "../../model/CustomJoke";
-import {SampleJoke} from "../../model/SampleJoke";
-import {setJokesList} from "../actions/JokeAction";
-
-export const getSampleJokesList = () => {
-    //In order to use await your callback must be asynchronous using async keyword.
-    return async dispatch => {
-        //Then perform your asynchronous operations.
-        try {
-            //Have it first fetch data from our starwars url.
-            const jokesPromise = await fetch('https://iut-weather-api.azurewebsites.net/jokes/samples');
-            //Then use the json method to get json data from api/
-            const jokesListJson = await jokesPromise.json();
-            const jokesList: SampleJoke[] = jokesListJson.map(elt => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]));
-            dispatch(setJokesList(jokesList));
-        } catch (error) {
-            console.log('Error---------', error);
-            //You can dispatch to another action if you want to display an error message in the application
-            //dispatch(fetchDataRejected(error))
-        }
-    }
-}

src/redux/thunk/RecentsJokesThunk.ts

@@ -1,23 +1,31 @@
-//Define your action creators that will be responsible for asynchronous operations
-import {CustomJoke} from "../../model/CustomJoke";
 import {SampleJoke} from "../../model/SampleJoke";
-import {setJokesList} from "../actions/JokeAction";
+import {setCategoriesList, setJokesList} from "../actions/JokeAction";
+import {Category} from "../../model/Category";
 
-export const getLastSampleJokesList = () => {
+export const getList = <TList>(uri:string, constructor : (json:any) => TList, setList: (list: TList[]) => any) => {
     //In order to use await your callback must be asynchronous using async keyword.
     return async dispatch => {
         //Then perform your asynchronous operations.
         try {
-            //Have it first fetch data from our starwars url.
-            const jokesPromise = await fetch('https://iut-weather-api.azurewebsites.net/jokes/lasts');
+            const promise = await fetch(uri);
             //Then use the json method to get json data from api/
-            const jokesListJson = await jokesPromise.json();
-            const jokesList: SampleJoke[] = jokesListJson.map(elt => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]));
-            dispatch(setJokesList(jokesList));
+            const listJson = await promise.json();
+            const List: TList[] = listJson.map(elt => constructor(elt));
+            dispatch(setList(List));
         } catch (error) {
             console.log('Error---------', error);
-            //You can dispatch to another action if you want to display an error message in the application
-            //dispatch(fetchDataRejected(error))
         }
     }
+}
+
+export const getLastSampleJokesList = () => {
+    return getList('https://iut-weather-api.azurewebsites.net/jokes/lasts', (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (list) => setJokesList(list))
+}
+
+export const getCategoriesList = () => {
+    return getList('https://iut-weather-api.azurewebsites.net/jokes/categories/top', (elt) => new Category(elt["name"], elt["number"]), (list) => setCategoriesList(list))
+}
+
+export const getSampleJokesList = () => {
+    return getList('https://iut-weather-api.azurewebsites.net/jokes/samples', (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (list) => setJokesList(list))
 }

src/screens/AddScreen.tsx

@@ -5,11 +5,10 @@ import '../types/extension';
 import {useDispatch, useSelector} from "react-redux";
 import {StyleSheet, View} from "react-native";
 import {purpleColor} from "../assets/Theme";
-import {getSampleJokesList} from "../redux/thunk/CatalogueSampleJokeThunk";
+import {getSampleJokesList} from "../redux/thunk/RecentsJokesThunk";
 import {useEffect} from "react";
 
 export default function Catalogue() {
-    // const allJokes = [...customJokeStub, ...sampleJokeStub];
     // @ts-ignore
     const allJokes = useSelector(state => state.appReducer.jokes);
     const dispatch = useDispatch();

src/screens/Catalogue.tsx

@@ -6,10 +6,9 @@ import {StyleSheet, View} from "react-native";
 import {purpleColor} from "../assets/Theme";
 import {useDispatch, useSelector} from "react-redux";
 import {useEffect} from "react";
-import {getSampleJokesList} from "../redux/thunk/CatalogueSampleJokeThunk";
+import { getSampleJokesList } from "../redux/thunk/RecentsJokesThunk";
 
 export default function Catalogue() {
-    // const allJokes = [...customJokeStub, ...sampleJokeStub];
     // @ts-ignore
     const allJokes = useSelector(state => state.appReducer.jokes);
     const dispatch = useDispatch();

src/screens/HomeScreen.tsx

@@ -5,17 +5,21 @@ import JokesHomeSquare from "../components/JokesHomeSquare";
 import Categs from "../components/Categs";
 import {useDispatch, useSelector} from "react-redux";
 import {useEffect} from "react";
-import {getLastSampleJokesList} from "../redux/thunk/RecentsJokesThunk";
+import {getCategoriesList, getLastSampleJokesList} from "../redux/thunk/RecentsJokesThunk";
 
 export default function Catalogue() {
     // @ts-ignore
     const allJokes = useSelector(state => state.appReducer.jokes);
+    // @ts-ignore
+    const allcategories = useSelector(state => state.appReducer.categories)
     const dispatch = useDispatch();
 
     useEffect(() => {
         const loadJokes = async () => {
             // @ts-ignore
             await dispatch(getLastSampleJokesList());
+            // @ts-ignore
+            await dispatch(getCategoriesList());
         };
         loadJokes();
     }, [dispatch]);
@@ -36,7 +40,7 @@ export default function Catalogue() {
                         <Image source={require("../assets/fire_icon.png")}/>
                     </View>
                     <View style={styles.horizChip}>
-                        <Categs jokes={allJokes}/>
+                        <Categs categories={allcategories}/>
                     </View>
                 </View>
             </View>