diff --git a/src/components/Categ.tsx b/src/components/Categ.tsx
index c364d50..201299b 100644
--- a/src/components/Categ.tsx
+++ b/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 (
- {prop.joke.type}
+ {prop.category.name}
);
}
@@ -22,7 +21,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 10,
margin: 10,
borderRadius: 20,
- width : 100,
+ width : 120,
alignItems : 'center'
}
});
\ No newline at end of file
diff --git a/src/components/Categs.tsx b/src/components/Categs.tsx
index 359a52d..1a3daea 100644
--- a/src/components/Categs.tsx
+++ b/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 (
item.type.toString()}
+ data={props.categories.sort((a, b) => b.number - a.number)}
+ keyExtractor={(item) => item.name}
renderItem={
- ({ item }: { item: CustomJoke | SampleJoke }) => (
-
+ ({ item }: { item: Category }) => (
+
)
}
/>
diff --git a/src/components/JokeItem.tsx b/src/components/JokeItem.tsx
index d8fa93b..01bbe27 100644
--- a/src/components/JokeItem.tsx
+++ b/src/components/JokeItem.tsx
@@ -16,7 +16,7 @@ export default function JokeItem(prop: JokeListItemProps) {
Résumé de la blague
{prop.joke.description()}
-
+ {/**/}
);
diff --git a/src/model/Category.ts b/src/model/Category.ts
new file mode 100644
index 0000000..82956f1
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/redux/actions/JokeAction.ts b/src/redux/actions/JokeAction.ts
index 6560d46..b2e0f21 100644
--- a/src/redux/actions/JokeAction.ts
+++ b/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,
diff --git a/src/redux/reducers/jokeReducer.ts b/src/redux/reducers/jokeReducer.ts
index 2516674..2e82085 100644
--- a/src/redux/reducers/jokeReducer.ts
+++ b/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;
diff --git a/src/redux/thunk/CatalogueSampleJokeThunk.ts b/src/redux/thunk/CatalogueSampleJokeThunk.ts
deleted file mode 100644
index 526ded7..0000000
--- a/src/redux/thunk/CatalogueSampleJokeThunk.ts
+++ /dev/null
@@ -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))
- }
- }
-}
\ No newline at end of file
diff --git a/src/redux/thunk/RecentsJokesThunk.ts b/src/redux/thunk/RecentsJokesThunk.ts
index e74a34c..dfcb140 100644
--- a/src/redux/thunk/RecentsJokesThunk.ts
+++ b/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 = (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))
}
\ No newline at end of file
diff --git a/src/screens/AddScreen.tsx b/src/screens/AddScreen.tsx
index fa8ba46..c0c22f1 100644
--- a/src/screens/AddScreen.tsx
+++ b/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();
diff --git a/src/screens/Catalogue.tsx b/src/screens/Catalogue.tsx
index e51b4c2..9ea393e 100644
--- a/src/screens/Catalogue.tsx
+++ b/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();
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index 949381e..399b902 100644
--- a/src/screens/HomeScreen.tsx
+++ b/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() {
-
+