Merge pull request #51 from Genio2003/feat/message-clear

Clear dismissed messages
Project-Betoniera · Jan 26, 2024 · 4a03cdc · 4a03cdc
2 parents 5745cda + 4537eea
commit 4a03cdc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
@@ -1,9 +1,10 @@
-import { Avatar, Body1, Divider, Dropdown, Option, Subtitle1, Subtitle2, makeStyles } from "@fluentui/react-components";
-import { CheckmarkStarburstFilled } from "@fluentui/react-icons";
+import { Avatar, Body1, Button, Divider, Dropdown, Option, Subtitle1, Subtitle2, makeStyles } from "@fluentui/react-components";
+import { CheckmarkStarburstFilled, CommentDismissFilled } from "@fluentui/react-icons";
 import { useContext } from "react";
 import { AppTheme, ThemeContext } from "../context/ThemeContext";
 import { UserContext } from "../context/UserContext";
 import AdminPanel from "./AdminPanel";
+import { MessagesContext } from '../context/MessagesContext';
 
 const useStyles = makeStyles({
     userContainer: {
@@ -26,16 +27,6 @@ const useStyles = makeStyles({
         marginTop: "1rem",
         marginBottom: "1rem",
     },
-    displayRow: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        columnGap: "0.5rem",
-    },
-    displayColumn: {
-        display: "flex",
-        flexDirection: "column",
-    },
     text: {
         display: "block",
         overflowX: "hidden",
@@ -49,6 +40,7 @@ export const UserProfile: React.FC = () => {
     const { name, email, isAdmin } = useContext(UserContext).user;
     const { course } = useContext(UserContext).course;
     const { theme, setTheme } = useContext(ThemeContext);
+    const { reloadMessages } = useContext(MessagesContext);
 
     const themeValues = {
         "auto": "Automatico",
@@ -72,13 +64,16 @@ export const UserProfile: React.FC = () => {
                     <AdminPanel />
                 </div>
                 <Subtitle2>Tema</Subtitle2>
-                <div className={styles.displayRow}>
-                    <Dropdown onOptionSelect={(_event, data) => setTheme(data.selectedOptions[0] as AppTheme)} value={themeValues[theme]} selectedOptions={[theme]} >
-                        <Option value="auto" text="Automatico">Automatico</Option>
-                        <Option value="light" text="Chiaro">Chiaro</Option>
-                        <Option value="dark" text="Scuro">Scuro</Option>
-                    </Dropdown>
-                </div>
+                <Dropdown onOptionSelect={(_event, data) => setTheme(data.selectedOptions[0] as AppTheme)} value={themeValues[theme]} selectedOptions={[theme]} >
+                    <Option value="auto" text="Automatico">Automatico</Option>
+                    <Option value="light" text="Chiaro">Chiaro</Option>
+                    <Option value="dark" text="Scuro">Scuro</Option>
+                </Dropdown>
+                <Subtitle2>Utilità</Subtitle2>
+                <Button icon={<CommentDismissFilled />} onClick={() => {
+                    localStorage.removeItem("dismissedMessages");
+                    reloadMessages();
+                }}>Reimposta messaggi ignorati</Button>
             </div>
         </div>
     );

diff --git a/src/context/MessagesContext.tsx b/src/context/MessagesContext.tsx
@@ -2,13 +2,19 @@ import { createContext, useEffect, useState } from "react";
 import { MessageDto } from "../dto/MessageDto";
 import useRequests from "../libraries/requests/requests";
 
-export const MessagesContext = createContext({ messages: [] as MessageDto[], setMessages: (value: MessageDto[]) => { console.log(value); }, dismissMessage: (id: number) => { console.log(id); }, doNotShowAgain: (id: number) => { console.log(id); } });
+export const MessagesContext = createContext({
+    messages: [] as MessageDto[],
+    setMessages: (value: MessageDto[]) => { console.log(value); },
+    reloadMessages: () => { console.log("reloadMessages"); },
+    dismissMessage: (id: number) => { console.log(id); },
+    doNotShowAgain: (id: number) => { console.log(id); }
+});
 
 export function MessagesContextProvider({ children }: { children: JSX.Element; }) {
     const [messages, setMessages] = useState<MessageDto[]>([]);
     const requests = useRequests();
 
-    useEffect(() => {
+    const reloadMessages = () => {
         // Get dismissed messages from local storage
         const dismissedMessages: number[] = JSON.parse(localStorage.getItem("dismissedMessages") || "[]");
 
@@ -18,7 +24,9 @@ export function MessagesContextProvider({ children }: { children: JSX.Element; }
         }).catch(() => {
             setMessages([]);
         });
-    }, []);
+    }
+
+    useEffect(reloadMessages, []);
 
     const dismissMessage = (id: number) => { setMessages((messages) => messages.filter((message) => message.id !== id)); };
     const doNotShowAgain = (id: number) => {
@@ -31,7 +39,7 @@ export function MessagesContextProvider({ children }: { children: JSX.Element; }
     };
 
     return (
-        <MessagesContext.Provider value={{ messages, setMessages, dismissMessage, doNotShowAgain }}>
+        <MessagesContext.Provider value={{ messages, setMessages, reloadMessages, dismissMessage, doNotShowAgain }}>
             {children}
         </MessagesContext.Provider>
     );