Merge pull request #56 from nico-iaco/feature/profilePage

Reorganized profile page🎨
nico-iaco · Jan 14, 2023 · 64526b4 · 64526b4
2 parents 17c2fb6 + 5c8d6bb
commit 64526b4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/src/page/addMeal/AddMealPage.tsx b/src/page/addMeal/AddMealPage.tsx
@@ -7,17 +7,18 @@ import {setCurrentMeal, setError} from "../../action/Action";
 import {Container, Grid} from "@mui/material";
 import {ArrowBack} from "@mui/icons-material";
 import {MealDataComponent} from "../../component/MealDataComponent";
-import {getUser} from "../../selector/Selector";
+import {getCurrentMealDate, getUser} from "../../selector/Selector";
 import {getAnalytics, logEvent} from "firebase/analytics";
 import {AppBarComponent} from "../../component/AppBarComponent";
 
 const AddMealPage = () => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
+    const currentMealDate = useSelector(getCurrentMealDate);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
     const [mealType, setMealType] = useState(MealType.OTHERS);
-    const [date, setDate] = useState(new Date());
+    const [date, setDate] = useState(new Date(currentMealDate));
 
     const user = useSelector(getUser);
 

diff --git a/src/page/profile/ProfilePage.tsx b/src/page/profile/ProfilePage.tsx
@@ -1,10 +1,11 @@
-import {Avatar, Button, Container, Grid} from "@mui/material";
+import {Avatar, Button, Container, Grid, List, ListItem, ListItemIcon, ListItemText} from "@mui/material";
 import {useDispatch, useSelector} from "react-redux";
 import {getUser} from "../../selector/Selector";
 import {getAuth} from "firebase/auth";
 import {clearUser, setCurrentTabIndex, setError} from "../../action/Action";
 import {stringAvatar} from "../../utils/colorUtils";
 import {AppBarComponent} from "../../component/AppBarComponent";
+import {Email} from "@mui/icons-material";
 
 const ProfilePage = () => {
     const currentUser = useSelector(getUser);
@@ -28,24 +29,29 @@ const ProfilePage = () => {
             <Grid item xs={8}>
                 <AppBarComponent
                     title={"Profile"}
+                    rightButton={<Button color={"inherit"} onClick={logout}>Logout</Button>}
                 />
             </Grid>
             <Container className="container">
-                <Grid item xs={8} className="container">
-                    <Avatar {...stringAvatar(currentUser?.displayName || "")} />
-                    <h5>Hi {currentUser?.displayName}</h5>
-                </Grid>
-                <Grid item xs={8} className="container">
-
+                <Grid item xs={8} container className="container">
+                    <Grid item xs={3}>
+                        <Avatar
+                            {...stringAvatar(currentUser?.displayName || "")}
+                        />
+                    </Grid>
+                    <Grid item xs={7}>
+                        <h4>Hi {currentUser?.displayName}</h4>
+                    </Grid>
                 </Grid>
                 <Grid item xs={8} className="container">
-                    <Button
-                        variant="contained"
-                        color={"secondary"}
-                        onClick={logout}
-                    >
-                        Logout
-                    </Button>
+                    <List>
+                        <ListItem disablePadding>
+                            <ListItemIcon>
+                                <Email/>
+                            </ListItemIcon>
+                            <ListItemText primary="Email" secondary={currentUser?.email}/>
+                        </ListItem>
+                    </List>
                 </Grid>
             </Container>
         </Grid>

diff --git a/src/utils/colorUtils.ts b/src/utils/colorUtils.ts
@@ -42,6 +42,10 @@ export function stringAvatar(name: string) {
     return {
         sx: {
             bgcolor: stringToColor(name),
+            width: 56,
+            height: 56,
+            fontSize: 24,
+            marginRight: 2
         },
         children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
     };