From ba514954e6a4d15ef228934cc26fe21e109806b6 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Fri, 3 Dec 2021 22:10:41 +0300 Subject: [PATCH] refactor: refactored dialog --- .../DeleteLessonDialog/DeleteLessonDialog.tsx | 14 ++---- .../DeleteUserDialog/DeleteUserDialog.tsx | 6 +-- .../Dialogs}/DeleteUserDialog/index.ts | 0 src/contexts/index.ts | 8 ---- .../components/CourseList/CourseList.tsx | 4 +- .../edit/components/LessonList/LessonList.tsx | 13 +++--- .../components/EditUserForm/EditUserForm.tsx | 45 +++++++------------ .../users/components/UserList/UserList.tsx | 43 ++++++++---------- src/providers/index.tsx | 11 +---- src/stores/pages/EditCourseStore.ts | 16 +------ src/types/index.d.ts | 18 -------- 11 files changed, 54 insertions(+), 124 deletions(-) rename src/{pages/users/components => components/Dialogs}/DeleteUserDialog/DeleteUserDialog.tsx (90%) rename src/{pages/users/components => components/Dialogs}/DeleteUserDialog/index.ts (100%) diff --git a/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx b/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx index dfaf8c4..7a6084c 100644 --- a/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx +++ b/src/components/Dialogs/DeleteLessonDialog/DeleteLessonDialog.tsx @@ -14,26 +14,20 @@ import ConfirmDialog from '@educt/components/ConfirmDialog/ConfirmDialog'; * Hooks */ import { useDeleteLesson } from '@educt/hooks/queries'; -import { useRootStore } from '@educt/hooks/useRootStore'; type DeleteLessonDialogPropsType = { + lesson: Pick; isOpen: boolean; onClose: () => void; }; -//TODO pass lesson by prop -const DeleteLessonDialog: React.FC = ({ isOpen, onClose }) => { - const { - pageStore: { - editCourseStore: { deletingLesson }, - }, - } = useRootStore(); +const DeleteLessonDialog: React.FC = ({ lesson, isOpen, onClose }) => { const { deleteLesson, isLoading } = useDeleteLesson(); const handleDelete = async (isConfirmed: boolean) => { - if (isConfirmed && deletingLesson) { + if (isConfirmed) { try { - await deleteLesson(deletingLesson.id); + await deleteLesson(lesson.id); } catch (error: any) { console.error(error); } diff --git a/src/pages/users/components/DeleteUserDialog/DeleteUserDialog.tsx b/src/components/Dialogs/DeleteUserDialog/DeleteUserDialog.tsx similarity index 90% rename from src/pages/users/components/DeleteUserDialog/DeleteUserDialog.tsx rename to src/components/Dialogs/DeleteUserDialog/DeleteUserDialog.tsx index 54aee08..9e41895 100644 --- a/src/pages/users/components/DeleteUserDialog/DeleteUserDialog.tsx +++ b/src/components/Dialogs/DeleteUserDialog/DeleteUserDialog.tsx @@ -23,14 +23,14 @@ import { useRootStore } from '@educt/hooks/useRootStore'; import { useDeleteUser } from '@educt/hooks/queries'; type DeleteUserDialogPropsType = { - user: IUser; + user: Pick; isOpen: boolean; onClose: () => void; }; const DeleteUserDialog: React.FC = ({ isOpen, onClose, user }) => { const { userStore } = useRootStore(); - const { setDeletingUser, searchingRole, searchingPage, search } = useContext(UsersPageContext); + const { searchingRole, searchingPage, search } = useContext(UsersPageContext); const { deleteUser, isLoading } = useDeleteUser(); const { pagination } = userStore; @@ -52,8 +52,6 @@ const DeleteUserDialog: React.FC = ({ isOpen, onClose }); } catch (error: any) { console.error(error); - } finally { - setDeletingUser(undefined); } } diff --git a/src/pages/users/components/DeleteUserDialog/index.ts b/src/components/Dialogs/DeleteUserDialog/index.ts similarity index 100% rename from src/pages/users/components/DeleteUserDialog/index.ts rename to src/components/Dialogs/DeleteUserDialog/index.ts diff --git a/src/contexts/index.ts b/src/contexts/index.ts index 2502637..066f0f8 100644 --- a/src/contexts/index.ts +++ b/src/contexts/index.ts @@ -18,10 +18,6 @@ export const UsersPageContext = createContext({ setSearchingPage: () => {}, search: undefined, setSearch: () => {}, - editingUser: undefined, - setEditingUser: () => {}, - deletingUser: undefined, - setDeletingUser: () => {}, }); export const CoursesPageContext = createContext({ @@ -29,8 +25,4 @@ export const CoursesPageContext = createContext({ setSelectedCategory: () => {}, courseStatus: undefined, setCourseStatus: () => {}, - - //TODO: remove - deletingCourse: undefined, - setDeletingCourse: () => {}, }); diff --git a/src/pages/courses/components/CourseList/CourseList.tsx b/src/pages/courses/components/CourseList/CourseList.tsx index 2ccb741..a3b4b79 100644 --- a/src/pages/courses/components/CourseList/CourseList.tsx +++ b/src/pages/courses/components/CourseList/CourseList.tsx @@ -43,7 +43,7 @@ const CourseList: React.FC = ({ render: Item }) => { const { setCourseStatus } = useSetCourseStatus(); const { courses, isLoading } = courseStore; - const deleteHandler = (course: Pick) => { + const handleDeleteCourse = (course: Pick) => { setDeleting(course); onOpenDeleteDialog(); }; @@ -71,7 +71,7 @@ const CourseList: React.FC = ({ render: Item }) => { deleteHandler({ id: course.id, title: course.title })} + onDelete={() => handleDeleteCourse({ id: course.id, title: course.title })} onSetStatus={setCourseStatus} /> ))} diff --git a/src/pages/courses/edit/components/LessonList/LessonList.tsx b/src/pages/courses/edit/components/LessonList/LessonList.tsx index b8cb377..cd6694e 100644 --- a/src/pages/courses/edit/components/LessonList/LessonList.tsx +++ b/src/pages/courses/edit/components/LessonList/LessonList.tsx @@ -1,10 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; import { observer } from 'mobx-react'; import { ItemProps, Virtuoso } from 'react-virtuoso'; import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult } from 'react-beautiful-dnd'; +import moment from 'moment'; import { Flex, Box, Text, IconButton, Icon, Button } from '@chakra-ui/react'; import { DeleteIcon, DragHandleIcon } from '@chakra-ui/icons'; -import moment from 'moment'; /** * Types @@ -58,13 +58,14 @@ const LessonList: React.FC = ({ course }) => { pageStore: { editCourseStore }, } = useRootStore(); const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure(); + const [deleting, setDeleting] = useState | null>(null); const handleError = useErrorHandler(); const lessons = course.lessons; const handleCreateLesson = (): void => history.push('/lessons/create'); const handleEditLesson = (id: string): void => history.push(`/lessons/edit/${id}`); const handleDeleteLesson = (lesson: ILesson): void => { - editCourseStore.setDeletingLesson(lesson); + setDeleting({ id: lesson.id, title: lesson.title }); onOpenDeleteDialog(); }; @@ -143,7 +144,7 @@ const LessonList: React.FC = ({ course }) => { - = ({ course }) => { {lessons.length !== 0 ? ( <> - + {deleting && ( + + )} Total: ({lessons.length}) diff --git a/src/pages/users/components/EditUserForm/EditUserForm.tsx b/src/pages/users/components/EditUserForm/EditUserForm.tsx index 198b4b7..7027781 100644 --- a/src/pages/users/components/EditUserForm/EditUserForm.tsx +++ b/src/pages/users/components/EditUserForm/EditUserForm.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React from 'react'; import * as helpers from '@educt/helpers'; import { Modal, @@ -33,19 +33,15 @@ import { SubmitHandler } from 'react-hook-form'; /** * Hooks */ +import { useEffect, useMemo } from 'react'; import { useForm } from 'react-hook-form'; import { useRootStore } from '@educt/hooks/useRootStore'; - -/** - * Contexts - */ -import { UsersPageContext } from '@educt/contexts'; +import { useUpdateUser } from '@educt/hooks/queries'; /** * Schema */ import UpdateUserSchema from './EditUserForm.validator'; -import { useUpdateUser } from '@educt/hooks/queries'; type UpdateUserFormPropsType = { user: IUser; @@ -62,9 +58,11 @@ type UpdateUserInputType = { password: string | null; }; -const UpdateUserForm: React.FC = ({ user, onClose, isOpen }) => { - const { userStore } = useRootStore(); - const { setEditingUser } = useContext(UsersPageContext); +const UpdateUserForm: React.FC = props => { + const { user, onClose, isOpen } = props; + const { + userStore: { me }, + } = useRootStore(); const { updateUser, isLoading } = useUpdateUser(); const { register, @@ -73,18 +71,11 @@ const UpdateUserForm: React.FC = ({ user, onClose, isOp formState: { errors, isDirty, dirtyFields }, } = useForm({ resolver: yupResolver(UpdateUserSchema), - defaultValues: { - first_name: user.first_name, - last_name: user.last_name, - email: user.email, - role: user.roles[0].slug, - login: '', - password: '', - }, + defaultValues: useMemo(() => { + return props.user; + }, [props]), }); - const { me } = userStore; - if (me === null) return null; /** @@ -94,20 +85,18 @@ const UpdateUserForm: React.FC = ({ user, onClose, isOp try { const params = helpers.getDirtyFields(dirtyFields, data); await updateUser(user.id, params); - onCloseModal(); + onClose(); } catch (error: any) { console.error(error); } }; - const onCloseModal = () => { - reset({}); - setEditingUser(undefined); - onClose(); - }; + useEffect(() => { + reset(props.user); + }, [props.user]); return ( - +
@@ -187,7 +176,7 @@ const UpdateUserForm: React.FC = ({ user, onClose, isOp > Save - +
diff --git a/src/pages/users/components/UserList/UserList.tsx b/src/pages/users/components/UserList/UserList.tsx index dc85974..e5d9040 100644 --- a/src/pages/users/components/UserList/UserList.tsx +++ b/src/pages/users/components/UserList/UserList.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { observer } from 'mobx-react'; import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; import { Flex, Box, Stack, Text } from '@chakra-ui/layout'; @@ -9,7 +9,7 @@ import { Button } from '@chakra-ui/button'; */ import LoadingList from '@educt/components/LoadingList'; import EditUserForm from '../EditUserForm'; -import DeleteUserDialog from '../DeleteUserDialog'; +import DeleteUserDialog from '@educt/components/Dialogs/DeleteUserDialog'; /** * Types @@ -29,26 +29,29 @@ import { useEffect, useContext } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import { useRootStore } from '@educt/hooks/useRootStore'; import { useDisclosure } from '@chakra-ui/hooks'; +import { IUser } from '@educt/interfaces'; type UserListPropsType = { render: React.FC; limit?: number }; const UserList: React.FC = ({ render: Item, limit }) => { const { userStore } = useRootStore(); - const { - searchingRole, - search, - searchingPage, - setSearchingPage, - editingUser, - setEditingUser, - deletingUser, - setDeletingUser, - } = useContext(UsersPageContext); + const { searchingRole, search, searchingPage, setSearchingPage } = useContext(UsersPageContext); const handleError = useErrorHandler(); + const [deleting, setDeleting] = useState | null>(null); + const [editing, setEditing] = useState(null); const { onOpen: onOpenEditModal, onClose: onCloseEditModal, isOpen: isOpenEditModal } = useDisclosure(); const { onOpen: onOpenDeleteDialog, onClose: onCloseDeleteDialog, isOpen: isOpenDeleteDialog } = useDisclosure(); const { users, pagination, me, isLoading } = userStore; + const handleEditUser = (user: IUser) => { + setEditing(user); + onOpenEditModal(); + }; + const handleDeleteUser = (user: Pick) => { + setDeleting(user); + onOpenDeleteDialog(); + }; + /** * Fetch users handler */ @@ -69,10 +72,8 @@ const UserList: React.FC = ({ render: Item, limit }) => { return ( - {editingUser && } - {deletingUser && ( - - )} + {editing && } + {deleting && } {users.length !== 0 ? ( <> @@ -86,14 +87,8 @@ const UserList: React.FC = ({ render: Item, limit }) => { { - setEditingUser(user); - onOpenEditModal(); - }} - onDelete={user => { - setDeletingUser(user); - onOpenDeleteDialog(); - }} + onEdit={user => handleEditUser(user)} + onDelete={user => handleDeleteUser({ id: user.id, fullname: user.fullname })} /> ))} diff --git a/src/providers/index.tsx b/src/providers/index.tsx index 65b21cb..a9daa1b 100644 --- a/src/providers/index.tsx +++ b/src/providers/index.tsx @@ -35,8 +35,6 @@ export const UsersPageContextProvider: React.FC = ({ children }) => { const [searchingRole, setSearchingRole] = useState(undefined); const [searchingPage, setSearchingPage] = useState(1); const [search, setSearch] = useState(undefined); - const [editingUser, setEditingUser] = useState(undefined); - const [deletingUser, setDeletingUser] = useState(undefined); return ( { setSearchingPage, search, setSearch, - editingUser, - setEditingUser, - deletingUser, - setDeletingUser, }} > {children} @@ -64,7 +58,6 @@ export const UsersPageContextProvider: React.FC = ({ children }) => { export const CoursesPageContextProvider: React.FC = ({ children }) => { const [selectedCategory, setSelectedCategory] = useState(undefined); const [courseStatus, setCourseStatus] = useState(undefined); - const [deletingCourse, setDeletingCourse] = useState | undefined>(undefined); const context = React.useMemo( () => ({ @@ -72,10 +65,8 @@ export const CoursesPageContextProvider: React.FC = ({ children }) => { setCourseStatus, selectedCategory, setSelectedCategory, - deletingCourse, - setDeletingCourse, }), - [courseStatus, setCourseStatus, selectedCategory, setSelectedCategory, deletingCourse, setDeletingCourse] + [courseStatus, setCourseStatus, selectedCategory, setSelectedCategory] ); return {children}; diff --git a/src/stores/pages/EditCourseStore.ts b/src/stores/pages/EditCourseStore.ts index 4850a6d..3a3d586 100644 --- a/src/stores/pages/EditCourseStore.ts +++ b/src/stores/pages/EditCourseStore.ts @@ -1,6 +1,6 @@ import { makeAutoObservable, runInAction } from 'mobx'; import * as helpers from '@educt/helpers'; -import { ICourse, ILesson } from '@educt/interfaces'; +import { ICourse } from '@educt/interfaces'; import PageStore from '../PageStore'; import { CourseServiceInstance, LessonServiceInstance } from '@educt/services'; @@ -10,12 +10,6 @@ export default class EditCourseStore { public course: Omit | null = null; - public isDeleting: boolean = false; - - public deletingCourse: Pick | undefined; - - public deletingLesson: ILesson | undefined; - constructor(pageStore: PageStore) { this.pageStore = pageStore; @@ -75,12 +69,4 @@ export default class EditCourseStore { this.course.lessons = helpers.arrayMove(this.course.lessons, oldIndex, newIndex); } } - - public setDeletingLesson(lesson: ILesson) { - this.deletingLesson = lesson; - } - - public setDeletingCourse(course: Pick | undefined) { - this.deletingCourse = course; - } } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 26c52fa..6dc0175 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -71,23 +71,11 @@ export type UsersPageContextType = { search: string | undefined; setSearch: React.Dispatch>; - /** - * Set editing user state when press on edit button - */ - editingUser: IUser | undefined; - setEditingUser: React.Dispatch>; - /** * Search users by page */ searchingPage: number; setSearchingPage: React.Dispatch>; - - /** - * Set deleting user state when press on delete button - */ - deletingUser: IUser | undefined; - setDeletingUser: React.Dispatch>; }; export type CoursesPageContextType = { @@ -102,12 +90,6 @@ export type CoursesPageContextType = { */ courseStatus: CourseStatusEnum | undefined; setCourseStatus: React.Dispatch>; - - /** - * Set deleting course state when press on delete button - */ - deletingCourse: Pick | undefined; - setDeletingCourse: React.Dispatch | undefined>>; }; export type FetchCoursesParams = { /**