ajout addPage + Post Joke method

JokesApp/navigation/Navigation.tsx

@@ -32,7 +32,7 @@ export function Navigation(){
                 tabBarShowLabel: false,
                 tabBarStyle: styles.top,
             }}  >
-                <BottomTabNavigator.Screen name="Accueil" component={AccueilScreen}
+                <BottomTabNavigator.Screen name="Accueil" component={AddJokeScreen}
                                            options={{
                                                tabBarIcon: ({focused}) => (
                                                    <Image

JokesApp/redux/actions/sampleAction.ts

@@ -1,10 +1,12 @@
 import {SampleJoke} from "../../model/SampleJoke";
 import {JokeFactory} from "../../model/JokeFactory";
+import {CustomJoke} from "../../model/CustomJoke";
 
 export enum SampleActionType {
     FETCH_SAMPLE = 'FETCH_SAMPLE',
     FECTH_LAST_JOKES = 'FECTH_LAST_JOKES',
     FECTH_COMPLET_JOKE = 'FECTH_COMPLET_JOKE',
+    POST_CUSTOM_JOKE = 'POST_CUSTOM_JOKE',
 }
 
 export interface SampleAction {
@@ -15,7 +17,11 @@ export interface SampleAction {
 export interface SampleActionComplet {
     type: SampleActionType;
     payload: SampleJoke;
+}
 
+export interface postCustomAction {
+    type: SampleActionType;
+    payload: CustomJoke;
 }
 
 export type Action = SampleAction;
@@ -42,6 +48,13 @@ export const setCompletJokes = (completJoke: SampleJoke): SampleActionComplet =>
     }
 }
 
+export const setPostJoke = (postJoke: CustomJoke): postCustomAction => {
+    return {
+        type: SampleActionType.POST_CUSTOM_JOKE,
+        payload: postJoke
+    }
+}
+
 export const getSampleJoke = () => {
     return async dispatch => {
         try {
@@ -80,3 +93,29 @@ export const getCompletJokes = (id : number) => {
         }
     }
 }
+
+export const postJoke = (type : string, setup : string, punchline : string) => {
+    return async  dispatch => {
+        try {
+            console.log('type', type, 'setup', setup, 'punchline', punchline);
+            const reponse = await fetch('https://iut-weather-api.azurewebsites.net/jokes/', {
+                method: 'POST',
+                headers: {
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(
+                    {
+                        type: type,
+                        setup: setup,
+                        punchline: punchline
+                    }
+                )
+            });
+            const data = await reponse.json();
+            dispatch(setPostJoke(data));
+        } catch (error) {
+            console.log('Error---------', error);
+        }
+    }
+}

JokesApp/redux/reducers/sampleJokeReducer.ts

@@ -1,18 +1,21 @@
 import {SampleJoke} from "../../model/SampleJoke";
 import {Action, SampleActionType} from "../actions/sampleAction";
+import {CustomJoke} from "../../model/CustomJoke";
 
 
 interface state {
     sampleJoke: SampleJoke[];
     recentJokes: SampleJoke[];
     completJoke: SampleJoke;
+    postJoke: CustomJoke;
 }
 
 // initial state for sampleJokes
 const initialState: state = {
     completJoke: {} as SampleJoke,
     sampleJoke: [],
-    recentJokes: []
+    recentJokes: [],
+    postJoke: {} as CustomJoke,
 }
 
 // app reducer for sampleJokes
@@ -34,6 +37,11 @@ export default appReducer = (state = initialState, action: Action) => {
                 ...state,
                 completJoke: action.payload,
             }
+        case SampleActionType.POST_CUSTOM_JOKE:
+            return {
+                ...state,
+                postJoke: action.payload,
+            }
 
         default:
             return state;

JokesApp/screens/AddJokeScreen.tsx

@@ -1,33 +1,169 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-
+import { Button, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
+import { darksalmonColor, indigo, purpleColor, whiteColor } from "../Theme";
-import {indigo, purpleColor} from "../Theme";
+import { useDispatch, useSelector } from "react-redux";
+import { getSampleJoke, postJoke } from "../redux/actions/sampleAction";
 
 export function AddJokeScreen() {
+    const [joke, setJoke] = useState("");
+    const [jokeFall, setJokeFall] = useState("");
+    const [category, setCategory] = useState("");
+    const [categoryExceeded, setCategoryExceeded] = useState(false);
+    const [buttonDisabled, setButtonDisabled] = useState(true); // État pour activer/désactiver le bouton "CRÉER"
+    const MAX_CATEGORY_LENGTH = 10;
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (joke !== "" && jokeFall !== "" && category !== "") {
+            setButtonDisabled(false);
+        } else {
+            setButtonDisabled(true);
+        }
+    }, [joke, jokeFall, category]);
+    const postjoke = async () => {
+        // @ts-ignore
+        await dispatch(postJoke(joke, jokeFall, category));
+        clearFields();
+    };
+
+    const clearFields = () => {
+        setJoke("");
+        setJokeFall("");
+        setCategory("");
+        setCategoryExceeded(false);
+        setButtonDisabled(true);
+    };
+
+    const handleCategoryChange = (text) => {
+        if (text.length > MAX_CATEGORY_LENGTH) {
+            setCategoryExceeded(true);
+        } else {
+            setCategoryExceeded(false);
+            setCategory(text);
+        }
+    };
+
     return (
         <View style={styles.font}>
-            <Text style={styles.text}>Ajouter une blague</Text>
+            <Text style={styles.titleTextInput}>Blague</Text>
-            <Text style={styles.text}>In Work</Text>
+            <TextInput
-        </View>
+                editable
-    );
+                multiline
-}
+                style={styles.textInput}
+                value={joke}
+                onChangeText={(text) => setJoke(text)}
+            />
 
+            <Text style={styles.titleTextInput}>Chute de la blague</Text>
+            <TextInput
+                editable
+                multiline
+                style={styles.textInput}
+                value={jokeFall}
+                onChangeText={(text) => setJokeFall(text)}
+            />
 
+            <Text style={styles.titleTextInput}>Catégorie</Text>
+            <TextInput
+                editable
+                multiline
+                style={styles.textInput1}
+                value={category}
+                onChangeText={handleCategoryChange}
+            ></TextInput>
+            <View style={styles.characterCountContainer}>
+                <Text style={styles.characterCountText}>
+                    {category.length}/{MAX_CATEGORY_LENGTH}
+                </Text>
+            </View>
 
+            <TouchableOpacity
+                style={[styles.viewButtonCreate, { opacity: buttonDisabled ? 0.5 : 1 }]}
+                disabled={buttonDisabled} // Désactiver le bouton si buttonDisabled est vrai
+                onPress={postjoke}
+            >
+                <Text style={styles.textButton1}>CRÉER</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.viewButtonClear} onPress={clearFields}>
+                <Text style={styles.textButton2}>EFFACER</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
 
 const styles = StyleSheet.create({
     font: {
+        backgroundColor: purpleColor,
+        width: "100%",
+        height: "100%",
+    },
+    titleTextInput: {
+        fontSize: 20,
+        color: whiteColor,
+        textAlign: "left",
+        fontWeight: "bold",
+        marginTop: 25,
+        marginVertical: 10,
+        marginLeft: 10,
+    },
+    textInput: {
         backgroundColor: indigo,
-        width: '100%',
+        height: "13%",
-        height: '100%',
+        color: whiteColor,
-    },
+        textAlign: "left",
-    text: {
+        textAlignVertical: "top",
-        fontSize: 24,
+        margin: 10,
-        color: 'darksalmon',
+        padding: 30,
-        textAlign: 'center',
+        paddingTop: 15,
-        fontWeight: 'bold',
+    },
-        marginVertical: 20,
+    textInput1: {
-    }
+        backgroundColor: indigo,
-
+        height: "9%",
-
+        color: whiteColor,
+        textAlign: "left",
+        textAlignVertical: "top",
+        margin: 10,
+        padding: 20,
+        paddingTop: 10,
+        fontSize: 12,
+    },
+    viewButtonCreate: {
+        backgroundColor: darksalmonColor,
+        height: "7%",
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 20,
+        borderRadius: 10,
+    },
+    viewButtonClear: {
+        backgroundColor: whiteColor,
+        height: "7%",
+        marginLeft: 10,
+        marginRight: 10,
+        marginTop: 20,
+        borderRadius: 10,
+    },
+    textButton1: {
+        fontSize: 16,
+        color: whiteColor,
+        alignSelf: "center",
+        padding: 12,
+        fontWeight: "bold",
+    },
+    textButton2: {
+        fontSize: 16,
+        color: darksalmonColor,
+        alignSelf: "center",
+        padding: 12,
+        fontWeight: "bold",
+    },
+    characterCountContainer: {
+        alignItems: 'flex-end',
+        bottom: 10,
+        right: 10,
+    },
+    characterCountText: {
+        fontSize: 12,
+        color: whiteColor,
+    },
 });