From 476ecb91629e36e0ce6ba4c00bb4c8239a86e91c Mon Sep 17 00:00:00 2001 From: anperederi Date: Fri, 15 Mar 2024 13:39:14 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Finish=20tp6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/JokeDetail.tsx | 3 +- src/components/JokeItem.tsx | 2 +- src/components/JokeItems.tsx | 2 - src/redux/actions/CustomJoke.ts | 24 +++++++--- src/redux/reducers/CustomReducer.ts | 5 +- src/redux/thunk/GetByThunk.ts | 6 +++ src/screens/Catalogue.tsx | 7 ++- src/screens/JokeDetailsScreen.tsx | 72 +++++++++++++++++++++++++---- 8 files changed, 96 insertions(+), 25 deletions(-) diff --git a/src/components/JokeDetail.tsx b/src/components/JokeDetail.tsx index 9c26b98..7ace5d9 100644 --- a/src/components/JokeDetail.tsx +++ b/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) { diff --git a/src/components/JokeItem.tsx b/src/components/JokeItem.tsx index f8a8be0..f03d8ac 100644 --- a/src/components/JokeItem.tsx +++ b/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) { {prop.joke.type} - {/**/} ); diff --git a/src/components/JokeItems.tsx b/src/components/JokeItems.tsx index f7bff66..01b2375 100644 --- a/src/components/JokeItems.tsx +++ b/src/components/JokeItems.tsx @@ -13,8 +13,6 @@ type JokeListItemProps = { export default function JokeItems(props: JokeListItemProps) { const navigation = useNavigation() - - return ( { 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, - payload: jokesList, + type: ActionType.FETCH_JOKES_BY_ID, + payload: customJoke, }; } \ No newline at end of file diff --git a/src/redux/reducers/CustomReducer.ts b/src/redux/reducers/CustomReducer.ts index 91fdddc..9811438 100644 --- a/src/redux/reducers/CustomReducer.ts +++ b/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; } diff --git a/src/redux/thunk/GetByThunk.ts b/src/redux/thunk/GetByThunk.ts index 2c15d5c..bcb1a26 100644 --- a/src/redux/thunk/GetByThunk.ts +++ b/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 = (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 = (uri:string, constructor : (json:any) => TItem, se } export const getJokeById = (id) => { return getItem('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('https://iut-weather-api.azurewebsites.net/jokes/' + id , (elt) => new CustomJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (item) => setCustomJokeById(item)) } \ No newline at end of file diff --git a/src/screens/Catalogue.tsx b/src/screens/Catalogue.tsx index 9b4ca8e..92ca324 100644 --- a/src/screens/Catalogue.tsx +++ b/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 ( diff --git a/src/screens/JokeDetailsScreen.tsx b/src/screens/JokeDetailsScreen.tsx index 43a1d8c..c1c518f 100644 --- a/src/screens/JokeDetailsScreen.tsx +++ b/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 { getJokeById } from "../redux/thunk/GetByThunk"; +import React, {useEffect, useState} from "react"; +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 () => { - // @ts-ignore - await dispatch(getJokeById(idJokeDetail)); - }; - loadJoke(); + if(idJokeDetail instanceof Number) { + const loadJoke = async () => { + // @ts-ignore + await dispatch(getJokeById(idJokeDetail)); + }; + 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 ( - + ) }; -- 2.36.3