From 595372bef0e3e6f095da09383988fe952ab1ab9a Mon Sep 17 00:00:00 2001 From: Valentino Date: Thu, 10 Feb 2022 13:34:44 +0000 Subject: [PATCH] Feat/logged in user data --- src/components/Header/Header.tsx | 249 +++++++++--------- .../CurrentUserModal/CurrentUserModal.tsx | 152 +++++++++++ .../components/CurrentUserModal/consts.ts | 18 ++ .../components/CurrentUserModal/index.ts | 1 + .../components/CurrentUserModal/types.ts | 7 + src/components/Header/components/index.ts | 1 + src/index.tsx | 16 +- src/modules/users/Users.tsx | 8 +- .../users/components/UserModal/UserModal.tsx | 7 +- src/services/auth/hooks/use-auth.ts | 4 +- src/services/auth/redux/index.ts | 2 +- src/services/auth/redux/reducers.ts | 11 +- src/services/auth/redux/selectors.ts | 2 + src/services/auth/types.ts | 8 + src/services/users/redux/actions.ts | 6 +- 15 files changed, 351 insertions(+), 141 deletions(-) create mode 100644 src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx create mode 100644 src/components/Header/components/CurrentUserModal/consts.ts create mode 100644 src/components/Header/components/CurrentUserModal/index.ts create mode 100644 src/components/Header/components/CurrentUserModal/types.ts create mode 100644 src/components/Header/components/index.ts diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a2c5a56..bc67c7b 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,10 +1,11 @@ -import React, { Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import { Disclosure, Menu, Transition } from '@headlessui/react'; import { MenuIcon, XIcon } from '@heroicons/react/outline'; import { useAuth } from 'src/services/auth'; import Gravatar from 'react-gravatar'; import { Link, useLocation } from 'react-router-dom'; import clsx from 'clsx'; +import { CurrentUserModal } from './components/CurrentUserModal'; const navigation = [ { name: 'Dashboard', to: '/dashboard' }, @@ -19,130 +20,138 @@ function classNames(...classes: any[]) { interface HeaderProps {} const Header: React.FC = () => { - const { logOut } = useAuth(); + const [currentUserModal, setCurrentUserModal] = useState(false); + const { logOut, currentUser } = useAuth(); const { pathname } = useLocation(); - return ( - - {({ open }) => ( -
-
-
-
- {/* Mobile menu button */} - - Open main menu - {open ? ( - -
-
-
- Stackspin - Stackspin -
-
- {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */} - {navigation.map((item) => ( - - {item.name} - - ))} -
-
- -
-
+ const currentUserModalOpen = () => { + setCurrentUserModal(true); + }; + const currentUserModalClose = () => setCurrentUserModal(false); - -
- {navigation.map((item) => ( - { - // // the object returned here is passed to the - // // anchor element's props - // return { - // className: isCurrent - // ? 'bg-primary-50 border-primary-400 text-primary-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium' - // : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium', - // 'aria-current': isCurrent ? 'page' : undefined, - // }; - // }} - > - {item.name} - - ))} + return ( + <> + + {({ open }) => ( +
+
+
+
+ {/* Mobile menu button */} + + Open main menu + {open ? ( + +
+
+ + Stackspin + Stackspin + +
+ {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */} + {navigation.map((item) => ( + + {item.name} + + ))} +
+
+ +
- -
- )} - + + +
+ {navigation.map((item) => ( + + {item.name} + + ))} +
+ +
+ )} + + + + ); }; diff --git a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx new file mode 100644 index 0000000..be7f18f --- /dev/null +++ b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx @@ -0,0 +1,152 @@ +import React, { useEffect } from 'react'; +import { useForm } from 'react-hook-form'; +import { Modal, Banner } from 'src/components'; +import { Input } from 'src/components/Form'; +import { useUsers } from 'src/services/users'; +import { CurrentUser } from 'src/services/auth'; +import { appAccessList } from './consts'; +import { UserModalProps } from './types'; + +export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => { + const { editUserById, userModalLoading } = useUsers(); + + const { control, reset, handleSubmit } = useForm({ + defaultValues: { + name: null, + email: null, + id: null, + preferredUsername: null, + }, + }); + + useEffect(() => { + if (user) { + reset(user); + } + + return () => { + reset({ name: null, email: null, id: null }); + }; + }, [user, reset]); + + const handleSave = async () => { + try { + if (user) { + await handleSubmit((data) => editUserById(data))(); + } + + onClose(); + } catch (e: any) { + // Continue + } + }; + + const handleKeyPress = (e: any) => { + if (e.key === 'Enter' || e.key === 'NumpadEnter') { + handleSave(); + } + }; + + const handleClose = () => { + onClose(); + }; + + return ( + +
+
+
+
+

Profile

+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ {/* + + + + +
+
+ +
+ +
+ +
+
+
+
+ +
+
+

App Access

+
+ +
+
+
    + {appAccessList.map((app: any) => { + return ( +
  • +
    +
    + {app.name} +

    {app.name}

    +
    +
    + +
    +
    +
    • + ); + })} +
+
+
+
+
+
+ + ); +}; diff --git a/src/components/Header/components/CurrentUserModal/consts.ts b/src/components/Header/components/CurrentUserModal/consts.ts new file mode 100644 index 0000000..080c939 --- /dev/null +++ b/src/components/Header/components/CurrentUserModal/consts.ts @@ -0,0 +1,18 @@ +export const appAccessList = [ + { + image: '/assets/wekan.svg', + name: 'Wekan', + }, + { + image: '/assets/wordpress.svg', + name: 'Wordpress', + }, + { + image: '/assets/nextcloud.svg', + name: 'NextCloud', + }, + { + image: '/assets/zulip.svg', + name: 'Zulip', + }, +]; diff --git a/src/components/Header/components/CurrentUserModal/index.ts b/src/components/Header/components/CurrentUserModal/index.ts new file mode 100644 index 0000000..7a5fd1a --- /dev/null +++ b/src/components/Header/components/CurrentUserModal/index.ts @@ -0,0 +1 @@ +export { CurrentUserModal } from './CurrentUserModal'; diff --git a/src/components/Header/components/CurrentUserModal/types.ts b/src/components/Header/components/CurrentUserModal/types.ts new file mode 100644 index 0000000..31814e0 --- /dev/null +++ b/src/components/Header/components/CurrentUserModal/types.ts @@ -0,0 +1,7 @@ +import { CurrentUser } from 'src/services/auth'; + +export type UserModalProps = { + open: boolean; + onClose: () => void; + user: CurrentUser; +}; diff --git a/src/components/Header/components/index.ts b/src/components/Header/components/index.ts new file mode 100644 index 0000000..7a5fd1a --- /dev/null +++ b/src/components/Header/components/index.ts @@ -0,0 +1 @@ +export { CurrentUserModal } from './CurrentUserModal'; diff --git a/src/index.tsx b/src/index.tsx index 7793052..a9d4857 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -40,14 +40,12 @@ axios.interceptors.response.use( ); ReactDOM.render( - - - - - - - - - , + + + + + + + , document.getElementById('root'), ); diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx index a38b722..3b061b2 100644 --- a/src/modules/users/Users.tsx +++ b/src/modules/users/Users.tsx @@ -66,7 +66,7 @@ export const Users: React.FC = () => { const { row } = props; return ( -
+