fixed animations

Keith-Web3 · Apr 23, 2023 · fc10229 · fc10229
1 parent 097c840
commit fc10229
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 33 deletions.
diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx
@@ -3,8 +3,8 @@ import { nanoid } from 'nanoid'
 
 import Header from '../shared/Header'
 import Body from '../shared/Body'
-import '../../sass/pages/homepage.scss'
 import NavBar from '../shared/NavBar'
+import '../../sass/pages/homepage.scss'
 
 const Homepage: React.FC = function () {
   const [isNavOpened, setIsNavOpened] = useState(false)

diff --git a/src/components/shared/Board.tsx b/src/components/shared/Board.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import '../../sass/shared/board.scss'
 import useStore from '../store/store'
+import { motion } from 'framer-motion'
 
 const Board: React.FC<{
   name: string
@@ -29,7 +30,8 @@ const Board: React.FC<{
       {tasks && (
         <div className="board__tasks">
           {tasks.map(task => (
-            <div
+            <motion.div
+              layout
               key={task.id}
               className="board__task"
               onClick={() =>
@@ -45,7 +47,7 @@ const Board: React.FC<{
                 {task.subtasks.filter(el => el.completed).length} of{' '}
                 {task.subtasks.length} subtasks
               </p>
-            </div>
+            </motion.div>
           ))}
         </div>
       )}

diff --git a/src/components/shared/Body.tsx b/src/components/shared/Body.tsx
@@ -18,8 +18,7 @@ const Body: React.FC<{
   const modalType = useStore(state => state.modalType)
   return (
     <motion.main
-      layout
-      // transition={{ type: 'spring', stiffness: 500, damping: 30 }}
+      layout // transition={{ type: 'spring', stiffness: 500, damping: 30 }}
       className="body"
     >
       {!currentBoard.status.every(el => !el.tasks.length) && (
@@ -46,12 +45,7 @@ const Body: React.FC<{
       <div className="hide-sidebar" onClick={() => setIsSideBarHidden(false)}>
         <img src={eye} alt="eye" />
       </div>
-      {ReactDOM.createPortal(
-        <AnimatePresence>
-          <Modal />
-        </AnimatePresence>,
-        document.getElementById('modal-root')!
-      )}
+      {ReactDOM.createPortal(<Modal />, document.getElementById('modal-root')!)}
     </motion.main>
   )
 }

diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -50,10 +50,15 @@ const Header: React.FC<{
       // transition={{ type: 'spring', stiffness: 500, damping: 30 }}
       className="header"
     >
-      <div className="header__sidebar-hidden">
+      <motion.div
+        layout
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="header__sidebar-hidden"
+      >
         <img src={logo} alt="logo" />
         <p>kanban</p>
-      </div>
+      </motion.div>
       <img className="header__logo" src={logo} alt="logo" />
       <p className="header__title">{currentBoard.name}</p>
       <motion.img

diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { nanoid } from 'nanoid'
 
 import ModifyTask from './ModifyTask'
@@ -8,41 +8,41 @@ import useStore from '../store/store'
 import ModifyBoards from './ModifyBoards'
 
 const Modal: React.FC = function () {
-  const currentBoard = useStore(state => state.currentBoard())
+  const currentBoard = useStore(state => state.currentBoard)
   const [modalType, setModalType] = useStore(state => [
     state.modalType,
     state.setModalType,
   ])
-  return modalType.showModal ? (
-    <>
+  return (
+    <AnimatePresence>
       {modalType.modalType === 'task-info' && (
         <ViewTask {...modalType.modalInfo!} />
       )}
       {modalType.modalType === 'add-task' && (
         <ModifyTask title="add new task" button="create task" />
       )}
       {modalType.modalType === 'edit-task' && (
-        <ModifyTask editTask title="edit task" button="save changes" />
+        <ModifyTask title="edit task" button="save changes" />
       )}
       {modalType.modalType === 'create-board' && (
         <ModifyBoards title="add new board" button="create new board" />
       )}
       {modalType.modalType === 'edit-board' && (
         <ModifyBoards title="edit board" button="save changes" />
       )}
-      <motion.div
-        key={nanoid()}
-        className="backdrop"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        onClick={() => {
-          setModalType({ showModal: false, modalType: '' })
-        }}
-      ></motion.div>
-    </>
-  ) : (
-    <></>
+      {modalType.showModal && (
+        <motion.div
+          key={nanoid()}
+          className="backdrop"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={() => {
+            setModalType({ showModal: false, modalType: '' })
+          }}
+        ></motion.div>
+      )}
+    </AnimatePresence>
   )
 }
 

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import { motion } from 'framer-motion'
 
 import '../../sass/ui/button.scss'
 
@@ -9,13 +10,14 @@ const Button: React.FC<{
   disabled?: boolean
 }> = function ({ children, className, onClick, disabled = false }) {
   return (
-    <button
+    <motion.button
+      layout
       disabled={disabled}
       onClick={onClick}
       className={`button ${className}`}
     >
       {children}
-    </button>
+    </motion.button>
   )
 }