src/components/JokeDetail.tsx

@@ -2,9 +2,10 @@ import {StyleSheet, Text, View, Image, Button, TouchableOpacity} from 'react-nat
 import {SampleJoke} from "../model/SampleJoke";
 import {darksalmonColor, whiteColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
 import React, {useState} from "react";
+import {CustomJoke} from "../model/CustomJoke";
 
 type JokeItemProps = {
-    joke: SampleJoke;
+    joke: SampleJoke | CustomJoke;
 };
 
 export default function JokeDetail(props: JokeItemProps) {

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);
@@ -18,7 +19,6 @@ export default function JokeItem(prop: JokeListItemProps) {
                 <View style={styles.bottomContainer}>
                     <Text style={{color:'white'}}>{prop.joke.type}</Text>
                 </View>
-                {/*<Categ category={prop.joke.type}/>*/}
             </View>
         </View>
     );

src/components/JokeItems.tsx

@@ -13,8 +13,6 @@ type JokeListItemProps = {
 export default function JokeItems(props: JokeListItemProps) {
     const navigation = useNavigation()
 
-
-
     return (
         <FlatList
             data={props.jokes}

src/redux/actions/CustomJoke.ts

@@ -2,8 +2,9 @@ import {CustomJoke} from "../../model/CustomJoke";
 import {SampleJoke} from "../../model/SampleJoke";
 
 export enum ActionType {
-    FETCH_JOKES = 'FETCH_JOKES',
+    FETCH_CUSTOM_JOKES = 'FETCH_CUSTOM_JOKES',
     POST_CUSTOM_JOKE = "POST_CUSTOM_JOKE",
+    FETCH_JOKES_BY_ID = "FETCH_JOKES_BY_ID"
 }
 
 type actionPostFetch = {
@@ -11,11 +12,14 @@ type actionPostFetch = {
     payload: CustomJoke;
 }
 type actionGetFetch = {
-    type: ActionType.FETCH_JOKES;
+    type: ActionType.FETCH_CUSTOM_JOKES;
     payload: CustomJoke[];
 }
-
+type actionGetByFetch = {
-export type Action = actionPostFetch | actionGetFetch;
+    type: ActionType.FETCH_JOKES_BY_ID;
+    payload: CustomJoke;
+}
+export type Action = actionPostFetch | actionGetFetch | actionGetByFetch;
 
 export const setPostJoke = (customJoke: CustomJoke) => {
     return {
@@ -24,9 +28,15 @@ export const setPostJoke = (customJoke: CustomJoke) => {
     }
 }
 
-export const setCustomJokesList = (jokesList: CustomJoke[]) => {
+export const setCustomJokesList = (customJokesList: CustomJoke[]) => {
+    return {
+        type: ActionType.FETCH_CUSTOM_JOKES,
+        payload: customJokesList
+    };
+}
+export const setCustomJokeById = (customJoke: CustomJoke) => {
     return {
-        type: ActionType.FETCH_JOKES,
+        type: ActionType.FETCH_JOKES_BY_ID,
-        payload: jokesList,
+        payload: customJoke,
     };
 }

src/redux/reducers/CustomReducer.ts

@@ -18,9 +18,12 @@ const customReducer = (state: State = initialState, action: Action) => {
         case ActionType.POST_CUSTOM_JOKE:
             // @ts-ignore
             return {...state, customJoke: action.payload};
-        case ActionType.FETCH_JOKES:
+        case ActionType.FETCH_CUSTOM_JOKES:
             // @ts-ignore
             return {...state, customJokes: action.payload};
+        case ActionType.FETCH_JOKES_BY_ID:
+            // @ts-ignore
+            return {...state, customJoke: action.payload};
         default:
             return state;
     }

src/redux/thunk/GetByThunk.ts

@@ -1,5 +1,7 @@
 import {SampleJoke} from "../../model/SampleJoke";
 import { setJokeById} from "../actions/SampleAction";
+import {CustomJoke} from "../../model/CustomJoke";
+import {setCustomJokeById} from "../actions/CustomJoke";
 
 export const getItem = <TItem>(uri:string, constructor : (json:any) => TItem, setItem: (item: TItem) => any) => {
     //In order to use await your callback must be asynchronous using async keyword.
@@ -18,4 +20,8 @@ export const getItem = <TItem>(uri:string, constructor : (json:any) => TItem, se
 }
 export const getJokeById = (id) => {
     return getItem<SampleJoke>('https://iut-weather-api.azurewebsites.net/jokes/samples/' + id , (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (item) => setJokeById(item))
+}
+
+export const getCustomJokeById = (id) => {
+    return getItem<CustomJoke>('https://iut-weather-api.azurewebsites.net/jokes/' + id , (elt) => new CustomJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (item) => setCustomJokeById(item))
 }

src/screens/Catalogue.tsx

@@ -10,8 +10,10 @@ export default function Catalogue() {
     // @ts-ignore
     const sampleJokes = useSelector(state => state.sampleReducer.jokes);
     // @ts-ignore
-    const customJokes = useSelector(state => state.customReducer.customJoke);
+    const customJokes = useSelector(state => state.customReducer.customJokes);
     const dispatch = useDispatch();
+    const eye = require("../assets/eye_icon.png")
+    const hideEye = require("../assets/eye_off_icon.png")
 
     useEffect(() => {
         const loadSamplesJokes = async () => {
@@ -32,9 +34,6 @@ export default function Catalogue() {
         loadCustomJokes();
     };
 
-    const eye = require("../assets/eye_icon.png")
-    const hideEye = require("../assets/eye_off_icon.png")
-
     return (
         <SafeAreaView style={styles.container}>
             <View style={styles.columnContainer}>

src/screens/JokeDetailsScreen.tsx

@@ -2,26 +2,80 @@ import '../types/extension';
 import {StyleSheet, View} from "react-native";
 import {purpleColor} from "../assets/Theme";
 import {useDispatch, useSelector} from "react-redux";
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
-import { getJokeById } from "../redux/thunk/GetByThunk";
+import {getCustomJokeById, getJokeById} from "../redux/thunk/GetByThunk";
 import JokeDetail from "../components/JokeDetail";
+import {CustomJoke} from "../model/CustomJoke";
 
 export default function JokeDetailsScreen({route}) {
     const idJokeDetail = route.params.idJoke;
     // @ts-ignore
-    const joke = useSelector(state => state.sampleReducer.joke);
+    const joke = useSelector(state => state.sampleReducer.jokes);
+    // @ts-ignore
+    const customJoke = useSelector(state => state.customReducer.customJoke);
+    const [isCustomJoke, setCustomJoke] = useState(false); // état local pour contrôler la visibilité de la description
+    // @ts-ignore
     const dispatch = useDispatch();
 
     useEffect(() => {
-        const loadJoke = async () => {
+        if(idJokeDetail instanceof Number) {
-            // @ts-ignore
+            const loadJoke = async () => {
-            await dispatch(getJokeById(idJokeDetail));
+                // @ts-ignore
-        };
+                await dispatch(getJokeById(idJokeDetail));
-        loadJoke();
+            };
+            loadJoke();
+            setCustomJoke(!isCustomJoke)
+        } else {
+            const loadCustomJoke = async () => {
+                // @ts-ignore
+                await dispatch(getCustomJokeById(idJokeDetail));
+            };
+            loadCustomJoke();
+        }
+        // const loadJoke = async () => {
+        //     // @ts-ignore
+        //     await dispatch(getJokeById(idJokeDetail));
+        // };
+        // const loadCustomJoke = async () => {
+        //     // @ts-ignore
+        //     await dispatch(getCustomJokeById(idJokeDetail));
+        // };
+        // loadCustomJoke();
+        // loadJoke();
     }, [dispatch]);
+
+    // const loadCustomJoke = async () => {
+    //     // @ts-ignore
+    //     await dispatch(getCustomJokeById(idJokeDetail));
+    // };
+
+    // // @ts-ignore
+    // const sampleJokes = useSelector(state => state.sampleReducer.jokes);
+    // // @ts-ignore
+    // const customJokes = useSelector(state => state.customReducer.customJoke);
+    // const dispatch = useDispatch();
+    //
+    // useEffect(() => {
+    //     const loadSamplesJokes = async () => {
+    //         // @ts-ignore
+    //         await dispatch(getSampleJokesList());
+    //     };
+    //     loadSamplesJokes();
+    // }, [dispatch]);
+    //
+    // const loadCustomJokes = async () => {
+    //     // @ts-ignore
+    //     await dispatch(getCustomJokeById());
+    // };
+    //
+    // const [showCustomJoke, setCustomJoke] = useState(false); // état local pour contrôler la visibilité de la description
+    // const toggleDescription = () => {
+    //     setCustomJoke(!showCustomJoke);
+    //     loadCustomJokes();
+    // };
     return (
         <View style={styles.container}>
-            <JokeDetail joke={joke}/>
+            <JokeDetail joke={isCustomJoke ? joke : customJoke}/>
         </View>
     )
 };