Add status mode and on Kanban on localstorage, add ToolTip for all icons

rafaelfigueredog · Jun 29, 2021 · 51b8b3b · 51b8b3b
1 parent 8af7462
commit 51b8b3b
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 36 deletions.
diff --git a/src/Layout/index.js b/src/Layout/index.js
@@ -23,11 +23,12 @@ export default function Layout( {paletteType, setPaletteType} ) {
 
 
     useEffect(() => {
-        if (localStorage.getItem("notes") === null) {
-            return; 
-        }
-        const data = JSON.parse(localStorage.getItem('notes'));
-        setNotes(data); 
+        const notesFromBackEnd = JSON.parse(localStorage.getItem('notes') || []);
+        const modeFromBackEnd = (JSON.parse(localStorage.getItem('mode')) || 0);
+        const onKanbanFromBackEnd = (JSON.parse(localStorage.getItem('onKanban')) || 0); 
+        setOnKanban(onKanbanFromBackEnd);
+        setNotes(notesFromBackEnd); 
+        setMode(modeFromBackEnd);
     }, [])
 
 

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -6,6 +6,7 @@ import Brightness4Icon from '@material-ui/icons/Brightness4'
 import {BsLightning} from 'react-icons/bs'; 
 import {BsKanban} from 'react-icons/bs';
 import {Badge} from '@material-ui/core'; 
+import ToolTip from '@material-ui/core/Tooltip'
 
 const useStyles = makeStyles((theme) => {
     return {
@@ -41,6 +42,17 @@ const useStyles = makeStyles((theme) => {
 
 export default function Header( {paletteType, setPaletteType, mode, setMode, onKanban} ) {
     const classes = useStyles(); 
+
+    const handleToProductive = () => {
+        setMode(1); 
+        localStorage.setItem('mode', JSON.stringify(1)); 
+    }
+
+    const handleToBrainstorming = () => {
+        localStorage.setItem('mode', JSON.stringify(0)); 
+        setMode(0); 
+    }
+
     return (
         <AppBar className={classes.AppBar} elevation={0} >
             <Toolbar>
@@ -52,18 +64,25 @@ export default function Header( {paletteType, setPaletteType, mode, setMode, onK
                     </span>
                 </Typography>  
 
-                <IconButton onClick={() => setPaletteType(!paletteType)} title='theme' >
-                    { paletteType?  <Brightness4Icon /> : <Brightness7Icon /> }
-                </IconButton>
+                <ToolTip title={!paletteType? 'light theme' : 'dark theme'} >
+                    <IconButton onClick={() => setPaletteType(!paletteType)} >
+                        { paletteType?  <Brightness4Icon /> : <Brightness7Icon /> }
+                    </IconButton>
+                </ToolTip>
+
+                <ToolTip title='Productive'>
+                    <IconButton onClick={() => handleToProductive()}  >
+                        <Badge color={paletteType? 'secondary' : 'primary' } badgeContent={onKanban}>
+                            <BsKanban className={ mode? classes.activeIcon : null }/>
+                        </Badge>
+                    </IconButton> 
+                </ToolTip>  
 
-                <IconButton onClick={() => setMode(1)} title='Productive' >
-                    <Badge color={paletteType? 'secondary' : 'primary' } badgeContent={onKanban}>
-                        <BsKanban className={ mode? classes.activeIcon : null }/>
-                    </Badge>
-                </IconButton> 
-                <IconButton onClick={() => setMode(0)}  title='Brainstorming' >
-                    <BsLightning className={ !mode? classes.activeIcon : null }/>
-                </IconButton>                    
+                <ToolTip title='Brainstorming'>
+                    <IconButton onClick={() => handleToBrainstorming()} >
+                        <BsLightning className={ !mode? classes.activeIcon : null }/>
+                    </IconButton>
+                </ToolTip>                    
             </Toolbar>
         </AppBar>
     )

diff --git a/src/components/NoteCard/index.js b/src/components/NoteCard/index.js
@@ -5,14 +5,16 @@ import CardHeader from '@material-ui/core/CardHeader'
 import CardContent from '@material-ui/core/CardContent'
 import IconButton from '@material-ui/core/IconButton'
 import Typography from '@material-ui/core/Typography'
-import { CircularProgress, makeStyles } from '@material-ui/core';
-import { RiPaletteLine } from 'react-icons/ri'
+import {makeStyles} from '@material-ui/core';
+import {RiPaletteLine} from 'react-icons/ri'
 import {RiDeleteBin2Line} from 'react-icons/ri'
 import {BsKanban} from 'react-icons/bs'
 import {BsCheckCircle} from 'react-icons/bs'
 import {RiArrowGoBackFill} from 'react-icons/ri'
+import {Tooltip} from '@material-ui/core';
 import palette from './palette'
 
+
 const useStyles = makeStyles((theme) => {
     return {
         card: {
@@ -59,7 +61,9 @@ export default function NoteCard({note, notes, setNotes, onKanban, setOnKanban})
         setNotes(updateNotes)
         setOnKanban((onKanban + 1)); 
 
+
         /* Local Storage */
+        localStorage.setItem("onKanban", JSON.stringify(onKanban+1)); 
         localStorage.setItem("notes", JSON.stringify(updateNotes)); 
     }
 
@@ -135,16 +139,23 @@ export default function NoteCard({note, notes, setNotes, onKanban, setOnKanban})
                 </CardContent>
             }
             <CardContent className={classes.containerIcons} >
-                <PopoverColors  icon={<RiPaletteLine title='Select color'/>} palette={palette} selectColor={selectColor}  />
-                <IconButton  onClick={() => handleToDelete(note.id)} >
-                    <RiDeleteBin2Line  title='Delete note' />
-                </IconButton>
+
+                <PopoverColors  icon={<RiPaletteLine />} palette={palette} selectColor={selectColor} noteColor={note.color}  />
+
+                <Tooltip title='Delete' placement='bottom-start' >
+                    <IconButton  onClick={() => handleToDelete(note.id)} >
+                        <RiDeleteBin2Line  title='Delete note' />
+                    </IconButton>
+                </Tooltip>
+
                 {
                     note.state === 0 &&  
-                    <IconButton  onClick={() => handleToChangeState(note.id, 1)}>
-                        <BsKanban title='Add to-do'/>
-                    </IconButton>
-                }
+                    <Tooltip title='Add in to-do' placement='bottom-start' >
+                        <IconButton  onClick={() => handleToChangeState(note.id, 1)}>
+                            <BsKanban />
+                        </IconButton>
+                    </Tooltip>
+                }   
             </CardContent>
        </Card>
     )

diff --git a/src/components/PopoverColors/index.js b/src/components/PopoverColors/index.js
@@ -1,26 +1,28 @@
 import React from 'react';
 import Popover from '@material-ui/core/Popover';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
-import { IconButton, makeStyles } from '@material-ui/core';
-import { FaCircle } from 'react-icons/fa'
+import { IconButton, makeStyles, Tooltip } from '@material-ui/core';
+import {RiCheckboxBlankCircleFill, RiCheckboxCircleFill} from 'react-icons/ri'
 
 const useStyles = makeStyles(theme => {
   return {
     icon: {
-      width: theme.spacing(2), 
+      width: theme.spacing(2.5), 
     }
   }
 })
 
-export default function PopoverColors( {icon, palette, selectColor} ) {
+export default function PopoverColors( {icon, palette, selectColor, noteColor} ) {
   const classes = useStyles(); 
   return (
     <PopupState variant="popover" popupId="demo-popup-popover">
       {(popupState) => (
         <div>
-          <IconButton variant="contained" {...bindTrigger(popupState)} >
-            {icon}
-          </IconButton>
+          <Tooltip title='Change color' placement='bottom-start' >
+            <IconButton variant="contained" {...bindTrigger(popupState)} >
+              {icon}
+            </IconButton>
+          </Tooltip>
           <Popover
             {...bindPopover(popupState)}
             anchorOrigin={{
@@ -32,9 +34,13 @@ export default function PopoverColors( {icon, palette, selectColor} ) {
               horizontal: 'center',
             }}
           >
-            {palette.map(color => (
+            {palette.map((color) => (
               <IconButton key={color.id} onClick={() => {selectColor(color.id)}}  >
-                <FaCircle className={classes.icon} color={ color.light } />  
+                {
+                  noteColor.id === color.id ? 
+                    <RiCheckboxCircleFill className={classes.icon} color={ color.light }/>
+                  : <RiCheckboxBlankCircleFill className={classes.icon} color={ color.light } />
+                }
               </IconButton>
             ))} 
           </Popover>

diff --git a/src/components/ProductiveView/index.js b/src/components/ProductiveView/index.js
@@ -130,6 +130,7 @@ export default function ProductiveView({notes, setNotes, onKanban, setOnKanban,
 
   if ( onKanban ) {
     setOnKanban(0); 
+    localStorage.setItem('onKanban', JSON.stringify(0));
   }
 
   return (
@@ -146,7 +147,7 @@ export default function ProductiveView({notes, setNotes, onKanban, setOnKanban,
         {Object.entries(columns).map(([columnId, column], index) => {
             return (
               <div
-                class='column'
+                className='column'
                 key={columnId}
               >
                 <Droppable droppableId={columnId} key={columnId}>