diff --git a/JokesApp/components/DetailJoke.tsx b/JokesApp/components/DetailJoke.tsx
new file mode 100644
index 0000000..f630c56
--- /dev/null
+++ b/JokesApp/components/DetailJoke.tsx
@@ -0,0 +1,148 @@
+import {Button, Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {darksalmonColor, greyColor, indigo, purpleColor, whiteColor} from "../Theme";
+import React, {useState} from "react";
+import {SampleJoke} from "../model/SampleJoke";
+import {Joke} from "../model/Joke";
+
+type DetailJokeProps = {
+ item: SampleJoke;
+}
+
+
+export function DetailJoke(props: DetailJokeProps) {
+
+ const [isActivated, setIsActivated] = useState(false);
+ const [isActivated2, setIsActivated2] = useState(false);
+
+ function toggleActivation() {
+ setIsActivated(!isActivated);
+ }
+
+
+ function toggleActivation2() {
+ setIsActivated2(!isActivated2);
+ }
+
+ return (
+
+
+
+ Type : {props.item.type}
+
+
+ {props.item.description}
+
+
+
+
+
+
+
+ LA CHUTE
+
+
+ {isActivated2 ? {props.item.punchline} : null}
+
+ )
+}
+
+
+const styles = StyleSheet.create({
+
+ titleResume: {
+ fontSize: 15,
+ fontWeight: 'bold',
+ marginBottom: 20,
+ color: whiteColor,
+ },
+ listItem: {
+ flexDirection: 'column',
+ margin: 10,
+ height : '80%',
+ borderRadius: 20,
+ borderColor: whiteColor,
+ backgroundColor : indigo,
+ borderWidth: 1,
+ },
+ imageSettings: {
+ flex: 1,
+ width: '85%',
+ height: 100,
+ margin :30,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ contentList :{
+ margin: 10,
+ },
+ chip: {
+ borderRadius: 16,
+ backgroundColor: whiteColor,
+ padding: 5,
+ margin: 5,
+ marginLeft: 30,
+ alignSelf: 'flex-start',
+ },
+ contentSummary: {
+ color: greyColor,
+ fontWeight: 'bold',
+ fontSize: 16,
+ textAlign: 'left',
+ margin: 10,
+ marginLeft: 20,
+
+ },
+ buttons:
+ {
+ flexDirection: "row",
+ justifyContent: "flex-end",
+ alignItems: "flex-end",
+ marginBottom: 20,
+ },
+ button1:{
+ marginRight: 20,
+ borderRadius: 10,
+ width: 100,
+ height: 50,
+ alignItems: "center",
+ borderColor: '#ffffff',
+ borderWidth: 1
+ },
+ button2:{
+ flexDirection: "row",
+ justifyContent: "center",
+ marginRight: 30,
+ borderRadius: 10,
+ width: 140,
+ height: 50,
+ alignItems: "center",
+ borderColor: whiteColor,
+ borderWidth: 1,
+ backgroundColor: darksalmonColor,
+ },
+
+ img1:{
+ justifyContent: "center",
+ tintColor: darksalmonColor,
+ alignItems: "center",
+ marginTop: 2,
+ },
+
+
+ img2: {
+ tintColor: whiteColor,
+ justifyContent: "center",
+ alignItems: "center",
+ alignSelf: "center",
+ marginRight: 10,
+ },
+ bt2text: {
+ fontSize: 16,
+ color: whiteColor,
+ textAlign: 'center',
+ fontWeight: 'bold',
+ },
+
+});
+
diff --git a/JokesApp/components/HorizontalListJokeComponent.tsx b/JokesApp/components/HorizontalListJokeComponent.tsx
index b1667b3..9f4509b 100644
--- a/JokesApp/components/HorizontalListJokeComponent.tsx
+++ b/JokesApp/components/HorizontalListJokeComponent.tsx
@@ -17,7 +17,7 @@ export function HorizontalListJokeComponent(props: JokeListItemProps) {
uri: props.item.image}}/>
Résumé de la blague
- {props.item.summary()}
+ {props.item.summary}
diff --git a/JokesApp/components/ListeJokeComponent.tsx b/JokesApp/components/ListeJokeComponent.tsx
index d12d624..f1bf084 100644
--- a/JokesApp/components/ListeJokeComponent.tsx
+++ b/JokesApp/components/ListeJokeComponent.tsx
@@ -15,9 +15,9 @@ export function JokeListItems(props: JokeListItemProps) {
uri: props.item.image}}/>
Résumé de la blague
- {props.item.summary()}
+ {props.item.summary}
- Type : {props.item.type()}
+ Type : {props.item.type}
diff --git a/JokesApp/model/Joke.ts b/JokesApp/model/Joke.ts
index 826cda1..1a47c73 100644
--- a/JokesApp/model/Joke.ts
+++ b/JokesApp/model/Joke.ts
@@ -12,7 +12,7 @@ export abstract class Joke{
this._punchline = punchline
this._image = image
}
- public type(): string {
+ public get type(): string {
return this._type;
}
@@ -29,13 +29,13 @@ export abstract class Joke{
}
// Permet d'afficher les 25 premiers caractères du contexte de la blague suivis de ...
- public summary():string{
+ public get summary():string{
return this.setup.substring(0,25) + ' ...'
}
// Permet de retourner le type d'une blague + sont contexte
- public description():string{
- return this.type() + ' - ' +this.summary()
+ public get description():string{
+ return this.type + ' : ' + this.setup
}
diff --git a/JokesApp/model/JokeFactory.ts b/JokesApp/model/JokeFactory.ts
index 1e4b563..10ce616 100644
--- a/JokesApp/model/JokeFactory.ts
+++ b/JokesApp/model/JokeFactory.ts
@@ -26,4 +26,13 @@ export class JokeFactory {
return array;
}
+
+ static createSampleJokeById(jsonArray: string): SampleJoke {
+ let array = [];
+ let json = JSON.parse(jsonArray);
+ return new SampleJoke(json.type, json.setup, json.punchline,json.image, json.id)
+ //json.forEach(function (joke) {
+ // array.push(new SampleJoke(joke.type, joke.setup, joke.image,joke.punchline, joke.id));
+ //})
+ }
}
\ No newline at end of file
diff --git a/JokesApp/navigation/Navigation.tsx b/JokesApp/navigation/Navigation.tsx
index 36b294a..96e3cb8 100644
--- a/JokesApp/navigation/Navigation.tsx
+++ b/JokesApp/navigation/Navigation.tsx
@@ -7,6 +7,8 @@ import {darksalmonColor, greyColor, indigo, purpleColor} from "../Theme";
import {AccueilScreen} from "../screens/AccueilScreen";
import {AddJokeScreen} from "../screens/AddJokeScreen";
import {SettingsScreen} from "../screens/SettingsScreen";
+import {JokeListItems} from "../components/ListeJokeComponent";
+import StackNavigation from "./StackNavigation";
const homeIcon = require("../assets/home_icon.png");
const listIcon = require("../assets/list_icon.png");
const addIcon = require("../assets/add_icon.png");
@@ -39,13 +41,14 @@ export function Navigation(){
/>
)
}}/>
- (
- )
+ ),
+ headerShown: false,
}}/>
- )
+ ),
+
}}/>
)
}}/>
-
)
@@ -90,7 +93,7 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
top: {
- backgroundColor : "rgba(14, 14, 44, 1)"
+ backgroundColor : indigo
},
addJoke: {
flex: 1,
diff --git a/JokesApp/navigation/StackNavigation.tsx b/JokesApp/navigation/StackNavigation.tsx
new file mode 100644
index 0000000..ee39198
--- /dev/null
+++ b/JokesApp/navigation/StackNavigation.tsx
@@ -0,0 +1,37 @@
+import {createStackNavigator} from "@react-navigation/stack";
+import {NavigationContainer} from "@react-navigation/native";
+import {AccueilScreen} from "../screens/AccueilScreen";
+import {JokeListItems} from "../components/ListeJokeComponent";
+import {DetailJoke} from "../components/DetailJoke";
+import JokeDetailScreen from "../screens/JokeDetailScreen";
+import {ListJokeScreen} from "../screens/ListJokeScreen";
+import {darksalmonColor, indigo, purpleColor} from "../Theme";
+
+export default function StackNavigation() {
+
+ const Stack = createStackNavigator();
+ return(
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/JokesApp/package-lock.json b/JokesApp/package-lock.json
index 1a4da74..b4a85ed 100644
--- a/JokesApp/package-lock.json
+++ b/JokesApp/package-lock.json
@@ -10,8 +10,8 @@
"dependencies": {
"@expo/ngrok": "^2.5.0",
"@react-navigation/bottom-tabs": "^6.5.11",
- "@react-navigation/native": "^6.1.9",
- "@react-navigation/stack": "^6.3.20",
+ "@react-navigation/native": "^6.1.10",
+ "@react-navigation/stack": "^6.3.21",
"@reduxjs/toolkit": "^2.2.1",
"@types/react": "~18.2.45",
"expo": "~50.0.3",
@@ -6188,9 +6188,9 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/@react-navigation/elements": {
- "version": "1.3.21",
- "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz",
- "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==",
+ "version": "1.3.22",
+ "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.22.tgz",
+ "integrity": "sha512-HYKucs0TwQT8zMvgoZbJsY/3sZfzeP8Dk9IDv4agst3zlA7ReTx4+SROCG6VGC7JKqBCyQykHIwkSwxhapoc+Q==",
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
@@ -6199,9 +6199,9 @@
}
},
"node_modules/@react-navigation/native": {
- "version": "6.1.9",
- "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz",
- "integrity": "sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==",
+ "version": "6.1.10",
+ "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.10.tgz",
+ "integrity": "sha512-jDG89TbZItY7W7rIcS1RqT63vWOPD4XuQLNKqZO0DY7mKnKh/CGBd0eg3nDMXUl143Qp//IxJKe2TfBQRDEU4A==",
"dependencies": {
"@react-navigation/core": "^6.4.10",
"escape-string-regexp": "^4.0.0",
@@ -6233,11 +6233,11 @@
}
},
"node_modules/@react-navigation/stack": {
- "version": "6.3.20",
- "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.20.tgz",
- "integrity": "sha512-vE6mgZzOgoa5Uy7ayT97Cj+ZIK7DK+JBYVuKUViILlWZy6IWK7HFDuqoChSbZ1ajTIfAxj/acVGg1jkbAKsToA==",
+ "version": "6.3.21",
+ "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.21.tgz",
+ "integrity": "sha512-oh059bD9w6Q7YbcK3POXRHK+bfoafPU9gvunD0MHJGmPVe9bazn5OMNzRYextvB6BfwQy+v3dy76Opf0vIGcNg==",
"dependencies": {
- "@react-navigation/elements": "^1.3.21",
+ "@react-navigation/elements": "^1.3.22",
"color": "^4.2.3",
"warn-once": "^0.1.0"
},
diff --git a/JokesApp/package.json b/JokesApp/package.json
index f43c185..cacc6eb 100644
--- a/JokesApp/package.json
+++ b/JokesApp/package.json
@@ -11,8 +11,8 @@
"dependencies": {
"@expo/ngrok": "^2.5.0",
"@react-navigation/bottom-tabs": "^6.5.11",
- "@react-navigation/native": "^6.1.9",
- "@react-navigation/stack": "^6.3.20",
+ "@react-navigation/native": "^6.1.10",
+ "@react-navigation/stack": "^6.3.21",
"@reduxjs/toolkit": "^2.2.1",
"@types/react": "~18.2.45",
"expo": "~50.0.3",
diff --git a/JokesApp/redux/actions/sampleAction.ts b/JokesApp/redux/actions/sampleAction.ts
index 8e81c1b..ab50ce3 100644
--- a/JokesApp/redux/actions/sampleAction.ts
+++ b/JokesApp/redux/actions/sampleAction.ts
@@ -3,7 +3,8 @@ import {JokeFactory} from "../../model/JokeFactory";
export enum SampleActionType {
FETCH_SAMPLE = 'FETCH_SAMPLE',
- FECTH_LAST_JOKES = 'FECTH_LAST_JOKES'
+ FECTH_LAST_JOKES = 'FECTH_LAST_JOKES',
+ FECTH_COMPLET_JOKE = 'FECTH_COMPLET_JOKE',
}
export interface SampleAction {
@@ -11,6 +12,12 @@ export interface SampleAction {
payload: SampleJoke[];
}
+export interface SampleActionComplet {
+ type: SampleActionType;
+ payload: SampleJoke;
+
+}
+
export type Action = SampleAction;
@@ -28,25 +35,48 @@ export const setRecentJokes = (recentJokes: SampleJoke[]): SampleAction => {
}
}
-export const getSampleJoke = async() : Promise => {
+export const setCompletJokes = (completJoke: SampleJoke): SampleActionComplet => {
+ return {
+ type: SampleActionType.FECTH_COMPLET_JOKE,
+ payload: completJoke
+ }
+}
+
+export const getSampleJoke = () => {
+ return async dispatch => {
try {
const sample = await fetch('https://iut-weather-api.azurewebsites.net/jokes/samples');
const sampleJson = await sample.text();
- return JokeFactory.createSampleJokes(sampleJson);
- }
- catch (error) {
+ const joke = JokeFactory.createSampleJokes(sampleJson);
+ dispatch(setSample(joke));
+ } catch (error) {
console.log('Error---------', error);
}
+ }
}
-export const getLatestJokes = async() : Promise => {
- try {
- const sample = await fetch('https://iut-weather-api.azurewebsites.net/jokes/lasts');
- const sampleJson = await sample.text();
- return JokeFactory.createSampleJokes(sampleJson);
- }
- catch (error) {
- console.log('Error---------', error);
+export const getLatestJokes = () => {
+ return async dispatch => {
+ try {
+ const sample = await fetch('https://iut-weather-api.azurewebsites.net/jokes/lasts');
+ const sampleJson = await sample.text();
+ const latestJoke = JokeFactory.createSampleJokes(sampleJson);
+ dispatch(setRecentJokes(latestJoke));
+ } catch (error) {
+ console.log('Error---------', error);
+ }
}
-
}
+
+export const getCompletJokes = (id : number) => {
+ return async dispatch => {
+ try {
+ const sample = await fetch('https://iut-weather-api.azurewebsites.net/jokes/samples/' + id);
+ const sampleJson = await sample.text();
+ const jokeSelect = JokeFactory.createSampleJokeById(sampleJson);
+ dispatch(setCompletJokes(jokeSelect))
+ } catch (error) {
+ console.log('Error---------', error);
+ }
+ }
+}
\ No newline at end of file
diff --git a/JokesApp/redux/reducers/sampleJokeReducer.ts b/JokesApp/redux/reducers/sampleJokeReducer.ts
index 8cd6240..1a8cb73 100644
--- a/JokesApp/redux/reducers/sampleJokeReducer.ts
+++ b/JokesApp/redux/reducers/sampleJokeReducer.ts
@@ -5,12 +5,14 @@ import {Action, SampleActionType} from "../actions/sampleAction";
interface state {
sampleJoke: SampleJoke[];
recentJokes: SampleJoke[];
+ completJoke: SampleJoke;
}
// initial state for sampleJokes
const initialState: state = {
+ completJoke: {} as SampleJoke,
sampleJoke: [],
- recentJokes: [],
+ recentJokes: []
}
// app reducer for sampleJokes
@@ -27,6 +29,11 @@ export default appReducer = (state = initialState, action: Action) => {
...state,
recentJokes: action.payload
}
+ case SampleActionType.FECTH_COMPLET_JOKE:
+ return {
+ ...state,
+ completJoke: action.payload,
+ }
default:
return state;
diff --git a/JokesApp/screens/AccueilScreen.tsx b/JokesApp/screens/AccueilScreen.tsx
index 5dccc3c..15ebd43 100644
--- a/JokesApp/screens/AccueilScreen.tsx
+++ b/JokesApp/screens/AccueilScreen.tsx
@@ -22,7 +22,7 @@ export function AccueilScreen() {
const getJokes = async () => {
// @ts-ignore
- dispatch(setRecentJokes(await getLatestJokes()));
+ await dispatch(getLatestJokes());
};
getJokes();
diff --git a/JokesApp/screens/JokeDetailScreen.tsx b/JokesApp/screens/JokeDetailScreen.tsx
new file mode 100644
index 0000000..a120c2f
--- /dev/null
+++ b/JokesApp/screens/JokeDetailScreen.tsx
@@ -0,0 +1,47 @@
+import {View, Text, StyleSheet} from "react-native";
+import {indigo, purpleColor, whiteColor} from "../Theme";
+import React, {useEffect} from "react";
+import {CustomJoke} from "../model/CustomJoke";
+import {DetailJoke} from "../components/DetailJoke";
+import {Joke} from "../model/Joke";
+import {useDispatch, useSelector} from "react-redux";
+import {getCompletJokes, setCompletJokes, setSample} from "../redux/actions/sampleAction";
+import {validatePathConfig} from "@react-navigation/native";
+//svjh
+export default function JokeDetailScreen({route}) {
+ const jokeId = route.params.joke;
+ console.log(jokeId);
+ const DataGen = useSelector((state: any) => state.sampleReducer.completJoke);
+
+ const dispatch = useDispatch();
+ useEffect(() => {
+ const getDetails = async () => {
+ // @ts-ignore
+ await dispatch(getCompletJokes(jokeId))
+ };
+ getDetails();
+ }, [dispatch]);
+ console.log(DataGen);
+ return (
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ font: {
+ backgroundColor: purpleColor,
+ width: '100%',
+ height: '100%',
+
+ },
+ text: {
+ fontSize: 24,
+ color: 'darksalmon',
+ textAlign: 'center',
+ fontWeight: 'bold',
+ marginVertical: 20,
+ }
+});
\ No newline at end of file
diff --git a/JokesApp/screens/ListJokeScreen.tsx b/JokesApp/screens/ListJokeScreen.tsx
index c61b97c..3cbbea2 100644
--- a/JokesApp/screens/ListJokeScreen.tsx
+++ b/JokesApp/screens/ListJokeScreen.tsx
@@ -1,20 +1,18 @@
-import {FlatList, SafeAreaView, StyleSheet, Text, View} from "react-native";
+import {FlatList, SafeAreaView, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import React, {useEffect} from "react";
import {JokeListItems} from "../components/ListeJokeComponent";
import {indigo, purpleColor} from "../Theme";
import {CustomJoke} from "../model/CustomJoke";
import {useDispatch, useSelector} from 'react-redux';
-import {getLatestJokes, getSampleJoke, setSample} from "../redux/actions/sampleAction";
+import {getSampleJoke, setSample} from "../redux/actions/sampleAction";
-
-
-export function ListJokeScreen() {
+export function ListJokeScreen({route, navigation}) {
const DataGen = useSelector((state: any) => state.sampleReducer.sampleJoke);
const dispatch = useDispatch();
useEffect(() => {
const getJokes = async () => {
// @ts-ignore
- dispatch(setSample(await getSampleJoke()));
+ await dispatch(getSampleJoke());
};
getJokes();
}, [dispatch]);
@@ -22,14 +20,17 @@ export function ListJokeScreen() {
item.id.toString()}
- />
+ renderItem={({ item }) => (
+ navigation.navigate("JokeDetail", {"joke" : item.id})}>
+
+
+ )}
+ keyExtractor={(item: CustomJoke) => item.id.toString()}
+ />
);
}
-
const styles = StyleSheet.create({
title: {
@@ -52,6 +53,4 @@ const styles = StyleSheet.create({
top: {
backgroundColor : indigo,
},
-
-
-});
+});
\ No newline at end of file