Merge pull request #80

dev
SEP4Y-S24 · May 24, 2024 · eaca231 · eaca231
2 parents 6c2f207 + 8cb7e5b
commit eaca231
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 48 deletions.
diff --git a/src/features/messages/components/MessagesList.tsx b/src/features/messages/components/MessagesList.tsx
@@ -8,6 +8,8 @@ import { getPokemonPicById} from "../../avatarPic/api";
 import {getAllReceivedMessages, getAllSentMessages} from "../api/messageApi";
 import storage from "../../../utils/storage";
 import {getAllAlarmsByClockId} from "../../alarm/api/alarmApi";
+import SpinnerComponent from "../../spinner/SpinnerComponent";
+import Button from "../../../components/Elements/Button";
 
 
 
@@ -29,31 +31,22 @@ const MessagesList = () => {
         setCurrentPage(value);
     };
 
-    const [loading, setLoading] = useState<boolean>(false);
-    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
     useEffect(() => {
-        const fetchAlarms = async () => {
-            setLoading(true);
-            setError(null);
+        const fetchMessages = async () => {
             try {
-                console.log("messages in try")
                 const responseReceivedMessages = await getAllReceivedMessages(storage.getUser().userId);
                 const responseSentMessages = await getAllSentMessages(storage.getUser().userId);
 
-                console.log("messages after request ", responseReceivedMessages.messages, responseSentMessages.messages);
                 setReceivedMessages(responseReceivedMessages.messages);
                 setSentMessages(responseSentMessages.messages);
 
-                console.log("in set state ", sentMessages, receivedMessages)
-
             } catch (error) {
-                setError('Failed to get messages. Please try again later.');
-            } finally {
-                setLoading(false);
+                console.error('Failed to get messages. Please try again later.');
             }
         };
 
-        fetchAlarms().then(r => console.log('Alarms fetched'));
+        fetchMessages().then(() => setLoading(false));
     }, []);
 
     const messagesToDisplay = activeTab === 'received' ? receivedMessages : sentMessages;
@@ -63,40 +56,49 @@ const MessagesList = () => {
             <div className="flex items-center mb-2">
                 <ToggleMessages activeTab={activeTab} onTabChange={handleTabChange}/>
             </div>
-            {messagesToDisplay.length > 0 ? (
-                <>
-                    {messagesToDisplay
-                        .slice((currentPage - 1) * messagesPerPage, currentPage * messagesPerPage)
-                        .map((message:MessageResponseProps, index) => (
-                            <Message
-                                key={index}
-                                email={message.receiverId}
-                                text={message.message}
-                                //avatarId={message.avatarId}
-                                type={activeTab==="received"?"received":"sent"}
+            <div className={"pt-5"}>
+                {loading ? (
+                    <SpinnerComponent />
+                ) : (
+                    <>{messagesToDisplay.length > 0 ? (
+                            <>
+                                {messagesToDisplay
+                                    .slice((currentPage - 1) * messagesPerPage, currentPage * messagesPerPage)
+                                    .map((message:MessageResponseProps, index) => (
+                                        <Message
+                                            key={index}
+                                            email={message.receiverId}
+                                            text={message.message}
+                                            //avatarId={message.avatarId}
+                                            type={activeTab==="received"?"received":"sent"}
+                                        />
+                                    ))}
+                                {messagesToDisplay.length > messagesPerPage && (
+                                    <PaginationRounded
+                                        page={currentPage}
+                                        onChange={handleChangeOfPage}
+                                        className="flex flex-col items-center"
+                                        pages={Math.ceil(messagesToDisplay.length / messagesPerPage)}
+                                    />
+                                )}
+                            </>
+                        ) : (
+                            <Heading
+                                text={"You don't have any messages."}
+                                type={"heading4"}
+                                className="mb-3"
                             />
-                        ))}
-                    {messagesToDisplay.length > messagesPerPage && (
-                        <PaginationRounded
-                            page={currentPage}
-                            onChange={handleChangeOfPage}
-                            className="flex flex-col items-center"
-                            pages={Math.ceil(messagesToDisplay.length / messagesPerPage)}
-                        />
-                    )}
-                </>
-            ) : (
-                <Heading
-                    text={"You don't have any messages."}
-                    type={"heading4"}
-                    className="mb-3"
-                />
-            )}
+                        )}
+                    </>
+                )}
+            </div>
+
         </ContentInnerContainer>
     );
 
 }
 export default MessagesList;
+//TODO add avatar pic  when backend is ready
 const Message: React.FC<ShowMessageProps> = ({
                                                          email,
                                                          text,

diff --git a/src/features/messages/components/SendMessage.tsx b/src/features/messages/components/SendMessage.tsx
@@ -1,20 +1,22 @@
 import Heading from "../../../components/Elements/Headings/Heading";
 import TextArea from "../../../components/Form/TextArea";
 import SelectForm from "../../../components/Form/selectForm";
-import { useState } from "react";
+import React, { useState } from "react";
 import { MessageProps, SendMessageProps } from "../types";
 import PopUp from "../../../components/Elements/PopUp/PopUp";
 import Button from "../../../components/Elements/Button";
 import { ContentInnerContainer } from "../../../components/Layout/ContentInnerContainer";
 import { sendMessage } from "../api/messageApi";
 import storage from "../../../utils/storage";
+import SpinnerComponent from "../../spinner/SpinnerComponent";
 
 const SendMessage = ({}: any) => {
   const [message, setMessage] = useState<MessageProps>({
     text: "",
     receiver: { id: 0, name: "Select" },
     clock: { id: 0, name: "Select" },
   });
+  const [isSubmitting, setIsSubmitting] = useState(false);
 //TODO replace with api call later
   const receiverOptions = [
     { id: 1, name: "Receiver 1" },
@@ -85,6 +87,8 @@ const SendMessage = ({}: any) => {
 
     if (validateFields()) {
 
+      setIsSubmitting(true);
+
       const messageToSend: SendMessageProps = {
         message: message.text,
         receiverId: "f8a383e2-38ee-4755-ac1f-c6aa881a5798",
@@ -93,6 +97,7 @@ const SendMessage = ({}: any) => {
       };
       sendMessage(messageToSend)
         .then((response:any) => {
+
           console.log("Message sent successfully:", response);
           setShowPopup(true);
           setMessage({
@@ -102,10 +107,12 @@ const SendMessage = ({}: any) => {
           });
         })
         .catch((error:any) => {
+
           console.error("Error sending message:", error);
           // Handle error, such as displaying an error message to the user
         });
     }
+    setIsSubmitting(false);
     console.log("Message:", message);
     console.log("Receiver:", message.receiver);
     console.log("Clock:", message.clock);
@@ -164,11 +171,18 @@ const SendMessage = ({}: any) => {
           }
           error={clockError}
         />
-        <Button
-          text="Click me"
-          styleType={"info"}
-          onClick={handleSendMessage}
-        />
+        <div className={"pt-5"}>
+          {isSubmitting ? (
+              <SpinnerComponent />
+          ) : (
+              <Button
+                  text="Click me"
+                  styleType={"info"}
+                  onClick={handleSendMessage}
+              />
+          )}
+        </div>
+
 
         {successMessage && <p className="text-green mt-3">{successMessage}</p>}
 

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
@@ -62,7 +62,7 @@ export const Settings = () => {
   return (
     <>
       <ContentLayout className="relative">
-        <ContentInnerContainer className={"w-full md:flex-1 mb-4 relative z-50 "}>
+        <ContentInnerContainer className={"w-full md:flex-1 mb-4 relative "}>
             <Heading text={"Switch to a different clock"} type={"heading1"}/>
             <Heading text={"To see a data of a different clock"} type={"heading4"}/>
           {clocksDummyList.length > 0 ? (