From fb8dfac0deec9836625237e0931f19fa2962a5a9 Mon Sep 17 00:00:00 2001 From: PwFaze Date: Sat, 22 Jul 2023 17:51:04 +0700 Subject: [PATCH 1/6] refactor: button component --- .env.example | 3 --- src/components/DefaultButton.tsx | 19 ++++++++++++++++ src/components/Modal.tsx | 22 +++++++++++++++---- .../BaanSelection/components/BaanPanel.tsx | 15 +++++++++++-- .../BaanSelection/components/GroupPanel.tsx | 13 +++++++++-- .../components/ProfileInfoPanel.tsx | 19 ++++++++++++++-- src/context/AuthContext.tsx | 1 + src/pages/baan-selection/index.tsx | 21 ++++++++++++++++-- 8 files changed, 98 insertions(+), 15 deletions(-) delete mode 100644 .env.example create mode 100644 src/components/DefaultButton.tsx diff --git a/.env.example b/.env.example deleted file mode 100644 index 4e861f9..0000000 --- a/.env.example +++ /dev/null @@ -1,3 +0,0 @@ -NEXT_PUBLIC_API_BASE_URL= -NEXT_PUBLIC_APP_BASE_URL= -NEXT_PUBLIC_SSO_BASE_URL= \ No newline at end of file diff --git a/src/components/DefaultButton.tsx b/src/components/DefaultButton.tsx new file mode 100644 index 0000000..083ff2d --- /dev/null +++ b/src/components/DefaultButton.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +const DefaultButton = ({ content, additionalStyle, onClick, disabled }) => { + const buttonClassName = + `max-w-full w-40 mx-auto items-center py-2 text-white transition-all duration-500 hover:ring-8 disabled:cursor-not-allowed disabled:ring-0 ` + + additionalStyle; + + return ( + + ); +}; + +export default DefaultButton; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 56c7c44..5dbde4a 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,5 +1,6 @@ import { Dialog, Transition } from '@headlessui/react'; import { Fragment, ReactNode } from 'react'; +import DefaultButton from './DefaultButton'; import { ibmPlexSansThai } from './font'; export interface ModalProps { @@ -58,7 +59,20 @@ export const Modal = ({ {children}
- - + */}
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx index 50f5747..c5b3c49 100644 --- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx +++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router'; import { useAuth } from '@/context/AuthContext'; import { useMemo } from 'react'; import { BaanSize, IShortBaan } from '@/types/baan'; +import DefaultButton from '@/components/DefaultButton'; const profilePic = '/images/pfp-placeholder.svg'; @@ -81,7 +82,17 @@ export default function BaanPanel() {
)} - + */} ); diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx index 270d79e..6363690 100644 --- a/src/components/Profile/BaanSelection/components/GroupPanel.tsx +++ b/src/components/Profile/BaanSelection/components/GroupPanel.tsx @@ -6,6 +6,7 @@ import { httpDelete } from '@/utils/axios'; import { Modal } from '@/components/Modal'; import { useAppContext } from '@/context/ModalContext'; import { StarIcon, XMarkIcon } from '@heroicons/react/24/solid'; +import DefaultButton from '@/components/DefaultButton'; const profilePic = '/images/pfp-placeholder.svg'; @@ -139,13 +140,21 @@ export default function GroupPanel() {
- + */}
); diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx index 77995c6..858ff8c 100644 --- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx +++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx @@ -1,3 +1,4 @@ +import DefaultButton from '@/components/DefaultButton'; import { useAuth } from '@/context/AuthContext'; import { StarIcon, PencilSquareIcon } from '@heroicons/react/24/solid'; import Image from 'next/image'; @@ -25,8 +26,22 @@ export default function ProfileInfoPanel() {

{user?.firstname}
{user?.lastname}

+ {/* แก้ Button */} + + แก้ไขข้อมูล{' '} + + + } + onClick={() => { + router.push('/edit'); + }} + disabled="" + /> - + */} ); diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx index 9fcd644..697837a 100644 --- a/src/context/AuthContext.tsx +++ b/src/context/AuthContext.tsx @@ -46,6 +46,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => { const token = localStorage.getItem('token'); if (token) { const userProfile = await getUserProfile(); + console.log(userProfile); if (!userProfile) { localStorage.clear(); window.location.href = '/'; diff --git a/src/pages/baan-selection/index.tsx b/src/pages/baan-selection/index.tsx index 03ee9ee..51cc48c 100644 --- a/src/pages/baan-selection/index.tsx +++ b/src/pages/baan-selection/index.tsx @@ -11,6 +11,7 @@ import { transformBaanDTOtoIBaan } from '@/utils/baan'; import { useRouter } from 'next/router'; import { useAuth } from '@/context/AuthContext'; import { useToast } from '@/components/Toast'; +import DefaultButton from '@/components/DefaultButton'; function useAllBaans() { const [allBaans, setAllBaans] = useState([]); @@ -164,7 +165,23 @@ const BaanChoosing = () => { )} - + */}
From f586e342b3250a6d0fd6e031d85ae50fc3482aa1 Mon Sep 17 00:00:00 2001 From: PwFaze Date: Sat, 29 Jul 2023 16:33:12 +0700 Subject: [PATCH 2/6] style: formatting code --- src/components/Button.tsx | 15 +++++++++++ src/components/DefaultButton.tsx | 19 -------------- src/components/Modal.tsx | 25 +++---------------- .../BaanSelection/components/BaanPanel.tsx | 4 +-- .../BaanSelection/components/GroupPanel.tsx | 12 ++------- .../components/ProfileInfoPanel.tsx | 14 ++--------- src/pages/baan-selection/index.tsx | 20 ++------------- src/pages/try.tsx | 7 ++++++ 8 files changed, 33 insertions(+), 83 deletions(-) create mode 100644 src/components/Button.tsx delete mode 100644 src/components/DefaultButton.tsx create mode 100644 src/pages/try.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..f520314 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +function Button({ content, additionalStyle, onClick, disabled }) { + return ( + + ); +} + +export default Button; diff --git a/src/components/DefaultButton.tsx b/src/components/DefaultButton.tsx deleted file mode 100644 index 083ff2d..0000000 --- a/src/components/DefaultButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const DefaultButton = ({ content, additionalStyle, onClick, disabled }) => { - const buttonClassName = - `max-w-full w-40 mx-auto items-center py-2 text-white transition-all duration-500 hover:ring-8 disabled:cursor-not-allowed disabled:ring-0 ` + - additionalStyle; - - return ( - - ); -}; - -export default DefaultButton; diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 5dbde4a..1aaa4ab 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,6 +1,6 @@ import { Dialog, Transition } from '@headlessui/react'; import { Fragment, ReactNode } from 'react'; -import DefaultButton from './DefaultButton'; +import Button from './Button'; import { ibmPlexSansThai } from './font'; export interface ModalProps { @@ -60,37 +60,18 @@ export const Modal = ({
{/* แก้ button */} - onClose(1)} disabled="" /> - onClose(2)} disabled="" /> - {/* */} - {/* */}
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx index c5b3c49..4460d79 100644 --- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx +++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx @@ -4,7 +4,7 @@ import { useRouter } from 'next/router'; import { useAuth } from '@/context/AuthContext'; import { useMemo } from 'react'; import { BaanSize, IShortBaan } from '@/types/baan'; -import DefaultButton from '@/components/DefaultButton'; +import Button from '@/components/Button'; const profilePic = '/images/pfp-placeholder.svg'; @@ -83,7 +83,7 @@ export default function BaanPanel() { )} {/* แก้ button */} - เปลี่ยนอันดับ } onClick={() => { diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx index 6363690..6899df1 100644 --- a/src/components/Profile/BaanSelection/components/GroupPanel.tsx +++ b/src/components/Profile/BaanSelection/components/GroupPanel.tsx @@ -6,7 +6,7 @@ import { httpDelete } from '@/utils/axios'; import { Modal } from '@/components/Modal'; import { useAppContext } from '@/context/ModalContext'; import { StarIcon, XMarkIcon } from '@heroicons/react/24/solid'; -import DefaultButton from '@/components/DefaultButton'; +import Button from '@/components/Button'; const profilePic = '/images/pfp-placeholder.svg'; @@ -141,20 +141,12 @@ export default function GroupPanel() {
{/* แก้ button */} - ออกจากกลุ่ม } onClick={() => openModal('modal-leave-group')} disabled={!isAuthenticated || group?.leaderID === user?.id} - // disabled="" /> - {/* */}
); diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx index 858ff8c..24da651 100644 --- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx +++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx @@ -1,4 +1,4 @@ -import DefaultButton from '@/components/DefaultButton'; +import Button from '@/components/Button'; import { useAuth } from '@/context/AuthContext'; import { StarIcon, PencilSquareIcon } from '@heroicons/react/24/solid'; import Image from 'next/image'; @@ -27,7 +27,7 @@ export default function ProfileInfoPanel() { {user?.firstname}
{user?.lastname}

{/* แก้ Button */} - @@ -40,16 +40,6 @@ export default function ProfileInfoPanel() { }} disabled="" /> - - {/* */} ); diff --git a/src/pages/baan-selection/index.tsx b/src/pages/baan-selection/index.tsx index 51cc48c..8d759c5 100644 --- a/src/pages/baan-selection/index.tsx +++ b/src/pages/baan-selection/index.tsx @@ -11,7 +11,7 @@ import { transformBaanDTOtoIBaan } from '@/utils/baan'; import { useRouter } from 'next/router'; import { useAuth } from '@/context/AuthContext'; import { useToast } from '@/components/Toast'; -import DefaultButton from '@/components/DefaultButton'; +import Button from '@/components/Button'; function useAllBaans() { const [allBaans, setAllBaans] = useState([]); @@ -166,7 +166,7 @@ const BaanChoosing = () => { {/* แก้ button */} - บันทึกการเลือก } onClick={async () => { @@ -179,23 +179,7 @@ const BaanChoosing = () => { } }} disabled={selectedBaan.some((b) => b.id === '')} - // disabled="" /> - {/* */}
diff --git a/src/pages/try.tsx b/src/pages/try.tsx new file mode 100644 index 0000000..c8bc92a --- /dev/null +++ b/src/pages/try.tsx @@ -0,0 +1,7 @@ +import BaanSelection from '@/components/Profile/BaanSelection'; + +const Test = () => { + return ; +}; + +export default Test; From cce170e35c8d8915acbe564b891c40e1e790bda8 Mon Sep 17 00:00:00 2001 From: PwFaze Date: Sat, 29 Jul 2023 16:36:16 +0700 Subject: [PATCH 3/6] style: formatting code --- src/components/Button.tsx | 16 ++++++++++++++-- src/pages/try.tsx | 7 ------- 2 files changed, 14 insertions(+), 9 deletions(-) delete mode 100644 src/pages/try.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index f520314..ccb483c 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,6 +1,18 @@ import React from 'react'; -function Button({ content, additionalStyle, onClick, disabled }) { +interface ButtonProps { + content: string; + additionalStyle?: string; + onClick?: () => void; + disabled?: boolean; +} + +const Button: React.FC = ({ + content, + additionalStyle, + onClick, + disabled, +}) => { return (
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx index 4460d79..a4b4204 100644 --- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx +++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx @@ -90,17 +90,7 @@ export default function BaanPanel() { router.push('/baan-selection'); }} disabled={isNotGroupOwner} - // disabled="" /> - {/* */}
); diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx index 24da651..ab08867 100644 --- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx +++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx @@ -38,7 +38,7 @@ export default function ProfileInfoPanel() { onClick={() => { router.push('/edit'); }} - disabled="" + disabled={false} /> diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx index 697837a..d1cf85a 100644 --- a/src/context/AuthContext.tsx +++ b/src/context/AuthContext.tsx @@ -46,7 +46,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => { const token = localStorage.getItem('token'); if (token) { const userProfile = await getUserProfile(); - console.log(userProfile); + if (!userProfile) { localStorage.clear(); window.location.href = '/';