-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Complete dashboard data display,GET request from server and SkillForm UI
- Loading branch information
1 parent
50febbe
commit cf5446d
Showing
36 changed files
with
767 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| { | ||
| "cSpell.ignoreWords": ["persistor", "semibold"] | ||
| "cSpell.ignoreWords": ["metas", "persistor", "semibold"] | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,33 @@ | ||
| import { useEffect } from 'react'; | ||
| // Import from RTK | ||
| import { useAuthenticateQuery } from '../../redux/services/authApi'; | ||
| import { useLazyAuthenticateQuery } from '../../redux/services/authApi'; | ||
| import { setUser } from '../../redux/slices/authSlice'; | ||
| import { useAppDispatch, useAppSelector } from '../../hooks/rtkHook'; | ||
|
|
||
| export const Authentication = () => { | ||
| const { data, error, isFetching } = useAuthenticateQuery(); | ||
| const [trigger, result] = useLazyAuthenticateQuery(); | ||
|
|
||
| // Get isAuthenticated state from store | ||
| const { isAuthenticated, user } = useAppSelector((state) => state.auth); | ||
| const { user, accessToken } = useAppSelector((state) => state.auth); | ||
|
|
||
| // Handle authenticateUser and change state in the store | ||
| const dispatch = useAppDispatch(); | ||
| const authenticateUser = async () => { | ||
| if (isFetching) { | ||
| console.log('Loading...'); | ||
| } | ||
| if (data?.success) { | ||
| await trigger(); | ||
| if (result?.data?.success) { | ||
| console.log('Authenticated'); | ||
| dispatch(setUser({ user: data?.user })); | ||
| } else if (error) { | ||
| console.log('Authentication Error'); | ||
| dispatch(setUser({ user: result?.data?.user })); | ||
| } else if (result.error) { | ||
| console.log('Authentication Error', result.error); | ||
| } | ||
| }; | ||
|
|
||
| // Only re-render when data.success (boolean) is changed | ||
| useEffect(() => { | ||
| if (isAuthenticated && user === data?.user) authenticateUser(); | ||
| }, [data?.success]); | ||
| if (user !== result?.data?.user && accessToken) { | ||
| authenticateUser(); | ||
| } | ||
| }, [result?.data?.user, accessToken]); | ||
|
|
||
| return <></>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Fragment } from 'react'; | ||
| import { Popover, Transition } from '@headlessui/react'; | ||
| import { DotsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline'; | ||
|
|
||
| const CardOptions = () => { | ||
| return ( | ||
| <Popover className='relative'> | ||
| {({ open }) => ( | ||
| <> | ||
| <Popover.Button className='flex items-center justify-center rounded-full w-7 h-7 hover:bg-slate-400'> | ||
| <DotsHorizontalIcon | ||
| className={`${open ? '' : ''} | ||
| h-6 w-6 text-white group-hover:text-opacity-80 transition ease-in-out duration-150`} | ||
| aria-hidden='true' | ||
| /> | ||
| </Popover.Button> | ||
| <Transition | ||
| as={Fragment} | ||
| enter='transition ease-out duration-200' | ||
| enterFrom='opacity-0 translate-y-1' | ||
| enterTo='opacity-100 translate-y-0' | ||
| leave='transition ease-in duration-150' | ||
| leaveFrom='opacity-100 translate-y-0' | ||
| leaveTo='opacity-0 translate-y-1' | ||
| > | ||
| <Popover.Panel className='absolute right-0 z-10 mt-1 '> | ||
| <div className='overflow-hidden rounded-lg shadow-lg '> | ||
| <div className='flex flex-col p-2 space-y-2 bg-white '> | ||
| {/* Edit button */} | ||
| <button | ||
| type='button' | ||
| onClick={() => {}} | ||
| className='flex items-center px-3 py-1 rounded-md w-28 hover:cursor-pointer hover:bg-slate-300' | ||
| > | ||
| <PencilIcon className='w-4 h-4 ' /> | ||
| <p className='ml-4 text-sm'>Edit</p> | ||
| </button> | ||
| {/* Delete button */} | ||
| <button | ||
| type='button' | ||
| onClick={() => {}} | ||
| className='flex items-center px-3 py-1 rounded-md w-28 hover:cursor-pointer hover:bg-slate-300' | ||
| > | ||
| <TrashIcon className='w-4 h-4 ' /> | ||
| <p className='ml-4 text-sm'>Delete</p> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </Popover.Panel> | ||
| </Transition> | ||
| </> | ||
| )} | ||
| </Popover> | ||
| ); | ||
| }; | ||
|
|
||
| export default CardOptions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| import React from 'react'; | ||
|
|
||
| // Import Form Components | ||
| import GlassInput from './GlassInput/GlassInput'; | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React, { Fragment, useRef, useState } from 'react'; | ||
|
|
||
| // Import from HeadlessUI | ||
| import { Transition, Dialog } from '@headlessui/react'; | ||
|
|
||
| // Import components | ||
| import Button from './SkillAddButton/SkillAddButton'; | ||
| import SkillForm from '../SkillForm/SkillForm'; | ||
|
|
||
| // Import interfaces | ||
| import { skillInput } from '../../interfaces/formInputs'; | ||
| import { statusEnum } from '../../interfaces/skillApiResponse'; | ||
|
|
||
| interface PropTypes { | ||
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| const SkillAdd = ({ children }: PropTypes) => { | ||
| const [isOpen, setIsOpen] = useState<boolean>(false); | ||
| const initialFocusRef = useRef(null); | ||
|
|
||
| const openModal = (): void => { | ||
| setIsOpen(true); | ||
| }; | ||
|
|
||
| const closeModal = (): void => { | ||
| setIsOpen(false); | ||
| }; | ||
|
|
||
| // Form States | ||
| const initialFormStates: skillInput = { | ||
| title: '', | ||
| description: '', | ||
| status: statusEnum.Planned, | ||
| url: '', | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {!isOpen && ( | ||
| <div> | ||
| <Transition | ||
| show={!isOpen} | ||
| enter='transition-opacity duration-150' | ||
| enterFrom='opacity-0' | ||
| enterTo='opacity-100' | ||
| leave='transition-opacity duration-150' | ||
| leaveFrom='opacity-100' | ||
| leaveTo='opacity-0' | ||
| > | ||
| <Button openModal={openModal} /> | ||
| </Transition> | ||
| </div> | ||
| )} | ||
| <Transition as={Fragment} show={isOpen}> | ||
| <Dialog | ||
| as='div' | ||
| className='fixed inset-0 z-10' | ||
| onClose={closeModal} | ||
| initialFocus={initialFocusRef} | ||
| > | ||
| <div className='min-h-screen'> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter='ease-out duration-300' | ||
| enterFrom='opacity-0' | ||
| enterTo='opacity-100' | ||
| leave='ease-in duration-200' | ||
| leaveFrom='opacity-100' | ||
| leaveTo='opacity-0' | ||
| > | ||
| <Dialog.Overlay className='fixed inset-0 bg-slate-700/10 backdrop-blur-sm ' /> | ||
| </Transition.Child> | ||
|
|
||
| <Transition.Child | ||
| as={Fragment} | ||
| enter='ease-out duration-300' | ||
| enterFrom='translate-y-3 opacity-90' | ||
| enterTo='translate-y-0 opacity-100' | ||
| leave='ease-in duration-200' | ||
| leaveFrom='translate-y-0 ' | ||
| leaveTo='translate-y-3 ' | ||
| > | ||
| <div className='flex items-center justify-center w-screen h-screen '> | ||
| <SkillForm | ||
| initialStates={initialFormStates} | ||
| formTitle='Create Skill' | ||
| closeModal={closeModal} | ||
| /> | ||
| </div> | ||
| </Transition.Child> | ||
| </div> | ||
| </Dialog> | ||
| </Transition> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SkillAdd; |
21 changes: 21 additions & 0 deletions
21
client/src/components/SkillAdd/SkillAddButton/SkillAddButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { PlusIcon } from '@heroicons/react/solid'; | ||
|
|
||
| type PropTypes = { | ||
| className?: string; | ||
| openModal: () => void; | ||
| }; | ||
|
|
||
| const SkillAddButton = ({ className, openModal }: PropTypes) => { | ||
| return ( | ||
| <button | ||
| title='Add skill' | ||
| type='button' | ||
| className={`flex items-center justify-center w-12 h-12 bg-white rounded-full sm:w-9 sm:h-9 bg-black/30 hover:ring-4 hover:ring-white/80 fixed z-50 transform translate-x-1/2 bottom-2 right-1/2 sm:bottom-0 sm:translate-x-0 sm:relative sm:right-2 sm:ml-6`} | ||
| onClick={openModal} | ||
| > | ||
| <PlusIcon className='w-10 h-10 text-white sm:w-8 sm:h-8' /> | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default SkillAddButton; |
Oops, something went wrong.