Merge pull request #12 from vladimirvikulin/code-refactoring

refactored components code
vladimirvikulin · May 25, 2024 · 6171a66 · 6171a66
2 parents 6f588fd + 617c83b
commit 6171a66
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 4 deletions.
diff --git a/src/components/AddGroupForm/AddGroupForm.js b/src/components/AddGroupForm/AddGroupForm.js
@@ -3,6 +3,7 @@ import MyButton from '../ui/button/MyButton';
 import MyInput from '../ui/input/MyInput';
 import { useDispatch } from 'react-redux';
 import { fetchCreateGroup } from '../../redux/slices/groups';
+import PropTypes from 'prop-types';
 
 const AddGroupForm = ({setModalGroupVisible}) => {
     const [title, setTitle] = useState('')
@@ -33,4 +34,9 @@ const AddGroupForm = ({setModalGroupVisible}) => {
         </div>
     );
 }
+
+AddGroupForm.propTypes = {
+    setModalGroupVisible: PropTypes.func.isRequired,
+  };
+
 export default AddGroupForm;
diff --git a/src/components/AddTaskForm/AddTaskForm.js b/src/components/AddTaskForm/AddTaskForm.js
@@ -3,6 +3,7 @@ import MyButton from '../ui/button/MyButton';
 import MyInput from '../ui/input/MyInput';
 import { useDispatch } from 'react-redux';
 import { fetchCreateTask } from '../../redux/slices/groups';
+import PropTypes from 'prop-types';
 
 const AddTaskForm = ({setVisible, id}) => {
     const [title, setTitle] = useState('')
@@ -33,4 +34,9 @@ const AddTaskForm = ({setVisible, id}) => {
     );
 };
 
+AddTaskForm.propTypes = {
+    setVisible: PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
+};
+
 export default AddTaskForm;
diff --git a/src/components/Group/Group.js b/src/components/Group/Group.js
@@ -7,6 +7,7 @@ import styles from './Group.module.css';
 import MyModal from '../ui/modal/MyModal';
 import { useDispatch } from 'react-redux';
 import { fetchDeleteTask, fetchUpdateGroup, fetchUpdateTask } from '../../redux/slices/groups';
+import PropTypes from 'prop-types';
 
 const Group = ({
   group,
@@ -99,4 +100,21 @@ const Group = ({
     );
 };
 
+Group.propTypes = {
+    group: PropTypes.shape({
+        _id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        tasks: PropTypes.arrayOf(
+            PropTypes.shape({
+                _id: PropTypes.string.isRequired,
+                title: PropTypes.string.isRequired,
+                status: PropTypes.bool.isRequired,
+                priority: PropTypes.bool,
+            })
+        ).isRequired,
+    }).isRequired,
+    setStatistics: PropTypes.func.isRequired,
+    removeGroup: PropTypes.func.isRequired,
+};
+
 export default Group;
diff --git a/src/components/GroupFilter/GroupsFilter.js b/src/components/GroupFilter/GroupsFilter.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import MyInput from '../ui/input/MyInput';
 import MySelect from '../ui/select/MySelect';
+import PropTypes from 'prop-types';
 
 const GroupsFilter = ({filter, setFilter}) => {
     return (
@@ -23,4 +24,12 @@ const GroupsFilter = ({filter, setFilter}) => {
     );
 };
 
+GroupsFilter.propTypes = {
+    filter: PropTypes.shape({
+        searchGroup: PropTypes.string.isRequired,
+        selectedSort: PropTypes.string.isRequired
+    }).isRequired,
+    setFilter: PropTypes.func.isRequired
+};
+
 export default GroupsFilter;
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -25,11 +25,9 @@ const Header = () => {
           </Link>
           <div>
             {isAuth ? (
-              <>
                 <MyButton onClick={onClickLogout}>
                   Вийти
                 </MyButton>
-              </>
             ) : (
               <>
                 <Link to="/login">

diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -11,8 +11,8 @@
   }
 
   .logo {
-    background-color: khaki;;
-    color: white;;
+    background-color: khaki;
+    color: white;
     font-weight: 700;
     line-height: 35px;
     text-transform: uppercase;

diff --git a/src/components/Task/Task.js b/src/components/Task/Task.js
@@ -1,6 +1,7 @@
 import MyButton from '../ui/button/MyButton';
 import MyInput from '../ui/input/MyInput';
 import styles from './Task.module.css';
+import PropTypes from 'prop-types';
 
 const Task = (props) => {
     return (
@@ -49,4 +50,22 @@ const Task = (props) => {
     );
 };
 
+Task.propTypes = {
+   task: PropTypes.shape({
+       _id: PropTypes.string.isRequired,
+       title: PropTypes.string.isRequired,
+       status: PropTypes.bool.isRequired,
+       priority: PropTypes.string
+   }).isRequired,
+   edit: PropTypes.string,
+   value: PropTypes.string.isRequired,
+   setValue: PropTypes.func.isRequired,
+   number: PropTypes.number.isRequired,
+   priorityTask: PropTypes.func.isRequired,
+   saveTask: PropTypes.func.isRequired,
+   editTask: PropTypes.func.isRequired,
+   removeTask: PropTypes.func.isRequired,
+   statusTask: PropTypes.func.isRequired
+};
+
 export default Task;
diff --git a/src/components/ui/button/MyButton.js b/src/components/ui/button/MyButton.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import classes from './MyButton.module.css';
+import PropTypes from 'prop-types';
 
 const MyButton = (props) => {
     const { disabled, children } = props;
@@ -13,4 +14,8 @@ const MyButton = (props) => {
     );
   };
 
+MyButton.propTypes = {
+    disabled: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+};
 export default MyButton;
diff --git a/src/components/ui/modal/MyModal.js b/src/components/ui/modal/MyModal.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import styles from './MyModal.module.css';
+import PropTypes from 'prop-types';
+
 const MyModal = ({ visible, setVisible, children }) => {
     const { myModal, active, myModalContent } = styles;
     const modalClasses = [myModal, visible && active];
@@ -15,4 +17,10 @@ const MyModal = ({ visible, setVisible, children }) => {
     );
 };
 
+MyModal.propTypes = {
+    visible: PropTypes.bool.isRequired,
+    setVisible: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired,
+};
+
 export default MyModal;
diff --git a/src/components/ui/select/MySelect.js b/src/components/ui/select/MySelect.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import classes from './MySelect.module.css';
+import PropTypes from 'prop-types';
 
 const MySelect = (props) => {
     return (
@@ -18,4 +19,15 @@ const MySelect = (props) => {
     );
 };
 
+MySelect.propTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    defaultValue: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+    })).isRequired,
+};
+
+
 export default MySelect;
diff --git a/src/pages/List/List.js b/src/pages/List/List.js
@@ -9,6 +9,7 @@ import MyButton from '../../components/ui/button/MyButton';
 import { fetchGroups, fetchRemoveGroup, selectGroups } from '../../redux/slices/groups';
 import { selectIsAuth } from '../../redux/slices/auth';
 import { Link, Navigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 const List = ({setStatistics}) => {
     const isAuth = useSelector(selectIsAuth);
@@ -89,4 +90,9 @@ const List = ({setStatistics}) => {
     );
 };
 
+
+List.propTypes = {
+    setStatistics: PropTypes.func.isRequired,
+};
+
 export default List;
diff --git a/src/pages/TaskStatistics/TaskStatistics.js b/src/pages/TaskStatistics/TaskStatistics.js
@@ -4,6 +4,7 @@ import { Pie } from 'react-chartjs-2';
 import { Link } from "react-router-dom";
 import styles from './TaskStatistics.module.css'
 import MyButton from '../../components/ui/button/MyButton';
+import PropTypes from 'prop-types';
 
 ChartJS.register(ArcElement, Tooltip, Legend, Title);
 
@@ -85,4 +86,16 @@ const optionsForPriority = {
   )
 }
 
+TaskStatistics.propTypes = {
+  statistics: PropTypes.shape({
+      completed: PropTypes.number.isRequired,
+      notCompleted: PropTypes.number.isRequired,
+      topPriorityGroups: PropTypes.arrayOf(PropTypes.shape({
+          group: PropTypes.string.isRequired,
+          count: PropTypes.number.isRequired,
+      })),
+      title: PropTypes.string,
+  }).isRequired,
+};
+
 export default TaskStatistics;