From b5a50d6bdaa2432db8045df3bbd8566c2ed19b2b Mon Sep 17 00:00:00 2001
From: Giacomo-Cattani <giacomo.cattani@stu.fondazionejobsacademy.org>
Date: Wed, 24 Apr 2024 11:38:04 +0200
Subject: [PATCH] feat: UserStore implementation

---
 package-lock.json         |  38 +++++-
 package.json              |   3 +-
 src/components/Navbar.tsx | 255 +++++++++++++++++++-------------------
 src/store/store.ts        |  31 +++++
 4 files changed, 200 insertions(+), 127 deletions(-)
 create mode 100644 src/store/store.ts

diff --git a/package-lock.json b/package-lock.json
index d604e5a..af48fb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "@mui/icons-material": "^5.15.15",
         "@mui/material": "^5.15.15",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -3843,6 +3844,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz",
@@ -3944,6 +3953,33 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 0bfa4ee..7371bf0 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 112df2a..e69817c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,138 +2,143 @@ import * as React from 'react';
 import { AppBar, Box, Toolbar, IconButton, Typography, Menu, MenuItem, Container, Avatar, Tooltip, TextField, InputAdornment } from '@mui/material';
 import AdbIcon from '@mui/icons-material/Adb';
 import SearchIcon from '@mui/icons-material/Search';
+import { UserStore } from '../store/store'
 
 const settings = ['Profile', 'Favourites', 'Logout'];
 
 function ResponsiveAppBar() {
-    const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
 
-    const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorElUser(event.currentTarget);
-    };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
 
-    const handleCloseUserMenu = () => {
-        setAnchorElUser(null);
-    };
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
 
-    return (
-        <AppBar position="static" style={{ backgroundColor: "#132E32" }}>
-            <Container maxWidth="xl">
-                <Toolbar disableGutters style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-                    <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="a"
-                        href="#app-bar-with-responsive-menu"
-                        sx={{
-                            display: { xs: 'none', md: 'flex' },
-                            fontFamily: 'monospace',
-                            fontWeight: 700,
-                            letterSpacing: '.3rem',
-                            color: 'inherit',
-                            textDecoration: 'none',
-                            textAlign: 'center',
-                        }}
-                    >
-                        LOGO
-                    </Typography>
-                    <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-                    <TextField
-                        autoComplete='off'
-                        className="test"
-                        label="Cerca localita'"
-                        size="small"
-                        sx={{
-                            "& fieldset": { border: 'none' },
-                            display: { xs: 'flex', md: 'none' },
-                            marginRight: 1,
-                            textAlign: 'center',
-                        }}
-                        InputProps={{
-                            style: {
-                                borderRadius: "150px",
-                                border: '#176087 2px solid',
-                                color: 'white',
-                            },
-                            endAdornment: (
-                                <InputAdornment position="start">
-                                    <SearchIcon style={{ color: 'white' }} />
-                                </InputAdornment>
-                            )
-                        }}
-                        InputLabelProps={{
-                            style: {
-                                color: 'white',
-                                outline: 'none',
-                            }
-                        }}
-                    />
-                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-                        <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-                            <TextField
 
-                                autoComplete='off'
-                                className="test"
-                                label="Cerca localita'"
-                                size="small"
-                                sx={{
-                                    "& fieldset": { border: 'none' },
-                                    width: '50%',
-                                }}
-                                InputProps={{
-                                    style: {
-                                        borderRadius: "150px",
-                                        border: '#176087 2px solid',
-                                        color: 'white',
-                                    },
-                                    endAdornment: (
-                                        <InputAdornment position="start">
-                                            <SearchIcon style={{ color: 'white' }} />
-                                        </InputAdornment>
-                                    )
-                                }}
-                                InputLabelProps={{
-                                    style: {
-                                        color: 'white',
-                                        outline: 'none',
-                                    }
-                                }}
-                            />
-                        </div>
-                    </Box>
-                    <Box sx={{ flexGrow: 0, mr: 5 }}>
-                        <Tooltip title="Open settings">
-                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
-                            </IconButton>
-                        </Tooltip>
-                        <Menu
-                            sx={{ mt: '45px' }}
-                            id="menu-appbar"
-                            anchorEl={anchorElUser}
-                            anchorOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            keepMounted
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right',
-                            }}
-                            open={Boolean(anchorElUser)}
-                            onClose={handleCloseUserMenu}
-                        >
-                            {settings.map((setting) => (
-                                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                                    <Typography textAlign="center">{setting}</Typography>
-                                </MenuItem>
-                            ))}
-                        </Menu>
-                    </Box>
-                </Toolbar>
-            </Container>
-        </AppBar>
-    );
+  const isLogged = UserStore((state) => state.isLogged)
+
+  return (
+
+    <AppBar position="static" style={{ backgroundColor: "#132E32" }}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="#app-bar-with-responsive-menu"
+            sx={{
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.3rem',
+              color: 'inherit',
+              textDecoration: 'none',
+              textAlign: 'center',
+            }}
+          >
+            {isLogged}
+            LOGO
+          </Typography>
+          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
+          <TextField
+            autoComplete='off'
+            className="test"
+            label="Cerca localita'"
+            size="small"
+            sx={{
+              "& fieldset": { border: 'none' },
+              display: { xs: 'flex', md: 'none' },
+              marginRight: 1,
+              textAlign: 'center',
+            }}
+            InputProps={{
+              style: {
+                borderRadius: "150px",
+                border: '#176087 2px solid',
+                color: 'white',
+              },
+              endAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: 'white' }} />
+                </InputAdornment>
+              )
+            }}
+            InputLabelProps={{
+              style: {
+                color: 'white',
+                outline: 'none',
+              }
+            }}
+          />
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+              <TextField
+                autoComplete='off'
+                className="test"
+                label="Cerca localita'"
+                size="small"
+                sx={{
+                  "& fieldset": { border: 'none' },
+                  width: '50%',
+                }}
+                InputProps={{
+                  style: {
+                    borderRadius: "150px",
+                    border: '#176087 2px solid',
+                    color: 'white',
+                  },
+                  endAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon style={{ color: 'white' }} />
+                    </InputAdornment>
+                  )
+                }}
+                InputLabelProps={{
+                  style: {
+                    color: 'white',
+                    outline: 'none',
+                  }
+                }}
+              />
+            </div>
+          </Box>
+          <Box sx={{ flexGrow: 0, mr: 5 }}>
+            <Tooltip title="Open settings">
+              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              sx={{ mt: '45px' }}
+              id="menu-appbar"
+              anchorEl={anchorElUser}
+              anchorOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right',
+              }}
+              open={Boolean(anchorElUser)}
+              onClose={handleCloseUserMenu}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting} onClick={handleCloseUserMenu}>
+                  <Typography textAlign="center">{setting}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
 }
 export default ResponsiveAppBar;
diff --git a/src/store/store.ts b/src/store/store.ts
new file mode 100644
index 0000000..644646d
--- /dev/null
+++ b/src/store/store.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+interface User {
+  isLogged: boolean;
+  email: string;
+  username: string;
+  avatar: string;
+  setIsLogged: () => void;
+  setEmail: () => void;
+  setUsername: () => void;
+  setAvatar: () => void;
+}
+
+export const UserStore = create<User>((set) => ({
+  isLogged: false,
+  email: "",
+  username: "",
+  avatar: "",
+  setIsLogged: () => {
+    set((state) => ({ isLogged: !state.isLogged }));
+  },
+  setEmail: () => {
+    set((state) => ({ email: state.email }));
+  },
+  setUsername: () => {
+    set((state) => ({ username: state.username }));
+  },
+  setAvatar: () => {
+    set((state) => ({ avatar: state.avatar }));
+  },
+}));