Major changes

Added Google pfp to Avatar
Fixed auth on reload

Controllers/AuthController.cs

@@ -44,6 +44,20 @@ public async Task<IActionResult> GoogleCallback([FromBody] GoogleSignInRequest r
             }
         }
 
+        [HttpGet("profile-picture")]
+        [Authorize]
+        public ActionResult<string> GetProfilePicture()
+        {
+            // Retrieve the profile picture URL from the claims
+            var profilePictureUrl = HttpContext.User.FindFirst("picture")?.Value;
+            if (string.IsNullOrEmpty(profilePictureUrl))
+            {
+                return NotFound("Profile picture not found");
+            }
+
+            return Ok(profilePictureUrl);
+        }
+
         private string GenerateJwtToken(string googleId, string email, string fullName)
         {
             var privateKey = _configuration["Jwt:PrivateKey"]?.Trim();

Controllers/TodoController.cs

@@ -32,8 +32,8 @@ public ActionResult<Todo> Get(string id)
             return Ok(todo);
         }
 
-        [HttpDelete("{id:length(24)}")]
-        public async Task<ActionResult> Delete(string id)
+        [HttpDelete]
+        public async Task<ActionResult> Delete([FromQuery] string id)
         {
             var todo = _todoService.Get(id);
             if (todo == null)
@@ -49,7 +49,7 @@ public async Task<ActionResult> Delete(string id)
             }
 
             _todoService.Delete(id);
-            return Ok();
+            return NoContent();
         }
 
         [HttpPut("update")]

client/package.json

@@ -35,7 +35,9 @@
     "@tiptap/extension-text-style": "2.8.0",
     "@tiptap/extension-underline": "^2.8.0",
     "@tiptap/starter-kit": "^2.6.6",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/react-color": "^3.0.12",
+    "lodash.debounce": "^4.0.8",
     "mui-color-input": "^4.0.1",
     "mui-tiptap": "^1.10.0",
     "react": "^18.3.1",

client/src/components/ColorPickerToolbar.tsx

@@ -1,32 +1,40 @@
+import { styled } from '@mui/material/styles';
 import { Box, IconButton, Popover } from "@mui/material";
 import CustomCirclePicker from "@components/CustomCirclePicker";
-import { ColorResult } from "react-color"; // Note: Keep ColorResult since it represents the color selected in the picker
+import { ColorResult } from "react-color";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Editor } from "@tiptap/core";
 import FormatColorTextIcon from "@mui/icons-material/FormatColorText";
 import { getAllTextColors } from "@utils/getAllTextColors";
 
+const OutlinedIconButton = styled(IconButton)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 6,
+    '&.Mui-selected': {
+        backgroundColor: theme.palette.action.selected,
+        color: theme.palette.primary.main,
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+        },
+    },
+}));
+
 interface ColorPickerToolbarProps {
     editor: Editor;
 }
 
 export const ColorPickerToolbar: React.FC<ColorPickerToolbarProps> = ({
     editor,
 }) => {
-    const [colorPickerAnchor, setColorPickerAnchor] =
-        useState<null | HTMLElement>(null);
-    const [currentColor, setCurrentColor] = useState<string | undefined>(
-        undefined
-    );
+    const [colorPickerAnchor, setColorPickerAnchor] = useState<null | HTMLElement>(null);
+    const [currentColor, setCurrentColor] = useState<string | undefined>(undefined);
 
-    const handleColorChange = useCallback(
-        (color: ColorResult) => {
-            setCurrentColor(color.hex); // Assuming color.hex is a string
-            editor?.chain().focus().setColor(color.hex).run();
-            setColorPickerAnchor(null);
-        },
-        [editor]
-    );
+    const handleColorChange = useCallback((color: ColorResult) => {
+        setCurrentColor(color.hex);
+        editor?.chain().focus().setColor(color.hex).run();
+        setColorPickerAnchor(null);
+    }, [editor]);
 
     const handleColorPickerOpen = (event: React.MouseEvent<HTMLElement>) => {
         setColorPickerAnchor(event.currentTarget);
@@ -39,7 +47,7 @@ export const ColorPickerToolbar: React.FC<ColorPickerToolbarProps> = ({
     const state = editor.state;
 
     const color = useMemo(() => {
-        return getAllTextColors(state.selection, state.doc); // This returns string | undefined
+        return getAllTextColors(state.selection, state.doc);
     }, [state.selection, state.doc]);
 
     useEffect(() => {
@@ -54,13 +62,13 @@ export const ColorPickerToolbar: React.FC<ColorPickerToolbarProps> = ({
 
     return (
         <Box>
-            <IconButton onClick={handleColorPickerOpen} size="medium">
+            <OutlinedIconButton onClick={handleColorPickerOpen} size="medium">
                 <FormatColorTextIcon
                     sx={{
                         color: currentColor ? currentColor : "inherit",
                     }}
                 />
-            </IconButton>
+            </OutlinedIconButton>
             <Popover
                 open={colorPickerOpen}
                 anchorEl={colorPickerAnchor}
@@ -93,4 +101,4 @@ export const ColorPickerToolbar: React.FC<ColorPickerToolbarProps> = ({
             </Popover>
         </Box>
     );
-};
+};

client/src/components/CustomCirclePicker.tsx

@@ -10,6 +10,7 @@ const StyledCirclePicker = styled(CirclePicker)(({ theme }) => ({
         width: "100% !important",
         gap: theme.spacing(0.5),
         justifyContent: "flex-start",
+        backgroundColor: "inherit"
     },
     "& > span > div": {
         margin: "0 !important",
@@ -83,4 +84,4 @@ const CustomCirclePicker: React.FC<CustomCirclePickerProps> = ({
     );
 };
 
-export default CustomCirclePicker;
+export default CustomCirclePicker;