feat: create suggestionModal

caxewsh · Oct 3, 2024 · 31a937c · 31a937c
1 parent 41fc8cb
commit 31a937c
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/components/settingscreen/Settings.jsx b/components/settingscreen/Settings.jsx
@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState }  from "react";
 import { View, Text, TouchableOpacity, FlatList } from "react-native";
 import { PencilSquareIcon, EnvelopeIcon, ShareIcon, StarIcon } from "react-native-heroicons/solid";
+import SuggestionModal from "./SuggestionModal";
+
 
 const Settings = () => {
-    const showSuggestionModal = () => {
-      console.log("Showing suggestion modal");
+  const [showModal, setShowModal] = useState(false);
+
+  const showSuggestionModal = () => {
+      setShowModal(true);
     };
 
     const contactUs = () => {
@@ -32,12 +36,13 @@ const Settings = () => {
           scrollEnabled={false}
           keyExtractor={(item) => item.id}
           renderItem={({ item }) => (
-            <TouchableOpacity className="flex-row items-center mb-4 p-4 bg-gray-500 rounded-lg" onPress= {item.action} testID="optionButton">
+            <TouchableOpacity className="flex-row items-center mb-4 p-4 rounded-lg" onPress= {item.action} testID="optionButton">
                 {item.icon}
                 <Text className="text-white text-lg font-black mx-6">{item.label}</Text>
             </TouchableOpacity>
           )}
         />
+        {showModal && <SuggestionModal showModal={showModal} setShowModal={setShowModal} />}
     </View>
   );
 };

diff --git a/components/settingscreen/SuggestionModal.jsx b/components/settingscreen/SuggestionModal.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { View, Text, TextInput, TouchableOpacity, Modal } from "react-native";
+import { XCircleIcon } from "react-native-heroicons/solid";
+
+const SuggestionModal = ({ showModal, setShowModal }) => {
+  const [suggestion, setSuggestion] = React.useState("");
+
+  const handleChange = (text) => {
+    setSuggestion(text);
+  };
+
+  const handleSubmit = () => {
+    console.log("Submitted suggestion");
+    setShowModal(false); // Fermer la modale après soumission
+  };
+
+  return (
+    <Modal
+    className="rounded-xl border-zinc-600 border-6"
+      animationType="fade"
+      transparent={true}
+      visible={showModal}
+      onRequestClose={() => {
+        setShowModal(false); // Fermer la modale avec le bouton back ou autre
+      }}
+    >
+      <View className="flex-1 justify-center items-center bg-black/50" >
+        {/* Modale centrée */}
+        <View className="bg-cyan-900 p-6 rounded-lg w-11/12" >
+            <View className="flex">
+                <TouchableOpacity onPress={() => setShowModal(false)} className="self-end">
+                    <XCircleIcon color="white" size="30" className="mb-4" testID="exitModalButton" />
+                </TouchableOpacity>
+            </View>
+          <Text className="text-white text-center text-lg font-bold mb-4">
+            Ecris-nous ta suggestion :
+          </Text>
+          <TextInput
+            editable={true}
+            multiline={true}
+            numberOfLines={4}
+            maxLength={50}
+            className="bg-white font-semibold p-3 rounded-lg mb-4"
+            placeholder="Tape ici tes idées"
+            onChangeText={handleChange}
+            value={suggestion}
+          />
+          <TouchableOpacity onPress={handleSubmit} className="self-end">
+            <Text className="text-white text-lg font-semibold">Envoyer</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default SuggestionModal;