Skip to content
This repository has been archived by the owner on Aug 9, 2023. It is now read-only.

refactor: button component #66

Merged
merged 6 commits into from
Jul 29, 2023
Merged

refactor: button component #66

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fb8dfac
refactor: button component
PwFaze Jul 22, 2023
f586e34
style: formatting code
PwFaze Jul 29, 2023
cce170e
style: formatting code
PwFaze Jul 29, 2023
94bda26
style: .env.example
PwFaze Jul 29, 2023
40fff81
style: formatting code
PwFaze Jul 29, 2023
f9b03a6
refactor: add type to ts && remove unnecessary code
PwFaze Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .env.example
View file
Open in desktop
boomchanotai marked this conversation as resolved.
Show resolved Hide resolved

This file was deleted.

19 changes: 19 additions & 0 deletions src/components/DefaultButton.tsx
View file
Open in desktop
boomchanotai marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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 ` +
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to explicitly declare a variable, just write to the className attribute of the button.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use import clsx from 'clsx' to concatenate class.

additionalStyle;

return (
<button
className={buttonClassName}
onClick={onClick}
disabled={disabled}
>
{content}
</button>
);
};

export default DefaultButton;
22 changes: 18 additions & 4 deletions src/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -58,7 +59,20 @@ export const Modal = ({
{children}
</div>
<div className="mt-6 flex flex-row justify-center gap-6">
<button
{/* แก้ button */}
<DefaultButton
content={answer1}
additionalStyle="bg-pink-600 mx-0 shadow-sm rounded-3xl font-semibold text-lg hover:ring-2 hover:ring-pink-600/20 hover:ring-offset-4 hover:ring-offset-pink-600/50"
onClick={() => onClose(1)}
disabled=""
/>
<DefaultButton
content={answer2}
additionalStyle="bg-purple-300 mx-0 shadow-sm rounded-3xl font-semibold text-lg hover:ring-2 hover:ring-purple-600/20 hover:ring-offset-4 hover:ring-offset-purple-600/50"
onClick={() => onClose(2)}
disabled=""
/>
{/* <button
type="button"
className={` ${
`${answer1}` == ''
Expand All @@ -69,14 +83,14 @@ export const Modal = ({
onClick={() => onClose(1)}
>
{answer1}
</button>
<button
</button> */}
{/* <button
type="button"
className="inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-purple-300 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-purple-300/20 hover:ring-offset-4 hover:ring-offset-purple-300/50"
onClick={() => onClose(2)}
>
{answer2}
</button>
</button> */}
</div>
</Dialog.Panel>
</Transition.Child>
Expand Down
15 changes: 13 additions & 2 deletions src/components/Profile/BaanSelection/components/BaanPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -81,15 +82,25 @@ export default function BaanPanel() {
<hr className="h-8" />
)}

<button
{/* แก้ button */}
<DefaultButton
additionalStyle="rounded-lg bg-pink-400 ring-pink-400/30 text-xl disabled:bg-pink-300 enabled:hover:ring-8 disabled:ring-4"
content={<>เปลี่ยนอันดับ </>}
onClick={() => {
router.push('/baan-selection');
}}
disabled={isNotGroupOwner}
// disabled=""
/>
{/* <button
className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:bg-pink-300"
onClick={() => {
router.push('/baan-selection');
}}
disabled={isNotGroupOwner}
>
เปลี่ยนอันดับ
</button>
</button> */}
</div>
</div>
);
Expand Down
13 changes: 11 additions & 2 deletions src/components/Profile/BaanSelection/components/GroupPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -139,13 +140,21 @@ export default function GroupPanel() {
</div>
<div className="mt-6 flex flex-col place-items-center items-center justify-center gap-2 text-center text-sm">
<hr className="h-8" />
<button
{/* แก้ button */}
<DefaultButton
additionalStyle="rounded-lg bg-pink-400 ring-pink-400/30 text-xl disabled:bg-pink-300"
content={<>ออกจากกลุ่ม </>}
onClick={() => openModal('modal-leave-group')}
disabled={!isAuthenticated || group?.leaderID === user?.id}
// disabled=""
/>
{/* <button
className="mx-auto rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:cursor-not-allowed disabled:bg-pink-300"
onClick={() => openModal('modal-leave-group')}
disabled={!isAuthenticated || group?.leaderID === user?.id}
>
ออกจากกลุ่ม
</button>
</button> */}
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uncomment and delete these after finished

</div>
);
Expand Down
19 changes: 17 additions & 2 deletions src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -25,16 +26,30 @@ export default function ProfileInfoPanel() {
<p className="select-none text-center text-3xl font-bold text-purple-400">
{user?.firstname} <br /> {user?.lastname}
</p>
{/* แก้ Button */}
<DefaultButton
additionalStyle="rounded-lg bg-purple-400 ring-purple-400/30"
content={
<>
แก้ไขข้อมูล{' '}
<PencilSquareIcon className="ml-2 inline-block h-5" />
</>
}
onClick={() => {
router.push('/edit');
}}
disabled=""
/>

<button
{/* <button
className="mx-auto mt-8 flex w-40 max-w-full items-center justify-center rounded-lg bg-purple-400 px-4 py-2 text-base ring-4 ring-purple-400/30 transition-all duration-500 hover:ring-8"
onClick={() => {
router.push('/edit');
}}
>
แก้ไขข้อมูล
<PencilSquareIcon className="ml-2 inline-block h-5" />
</button>
</button> */}
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions src/context/AuthContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
const token = localStorage.getItem('token');
if (token) {
const userProfile = await getUserProfile();
console.log(userProfile);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please delete console.log if it not necessary

if (!userProfile) {
localStorage.clear();
window.location.href = '/';
Expand Down
21 changes: 19 additions & 2 deletions src/pages/baan-selection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<IBaan[]>([]);
Expand Down Expand Up @@ -164,7 +165,23 @@ const BaanChoosing = () => {
)}
</div>

<button
{/* แก้ button */}
<DefaultButton
additionalStyle="rounded-lg bg-pink-400 mt-6 ring-4 ring-pink-400/30 text-xl disabled:bg-pink-300 disabled:ring-4"
content={<>บันทึกการเลือก </>}
onClick={async () => {
const { status } = await httpPut('/group/select', {
baans: selectedBaan.map((e) => e.id),
});

if (status === 200) {
router.push('/profile');
}
}}
disabled={selectedBaan.some((b) => b.id === '')}
// disabled=""
/>
{/* <button
className="mx-auto mt-6 rounded-lg bg-pink-400 px-3 py-2 text-xl text-white ring-4 ring-pink-400/30 transition-all duration-500 enabled:hover:ring-8 disabled:cursor-not-allowed disabled:bg-pink-300"
onClick={async () => {
const { status } = await httpPut('/group/select', {
Expand All @@ -178,7 +195,7 @@ const BaanChoosing = () => {
disabled={selectedBaan.some((b) => b.id === '')}
>
บันทึกการเลือก
</button>
</button> */}
</div>
<div className="flex min-h-full w-full flex-col border bg-black/50 p-8 backdrop-blur-sm max-xl:rounded-b-3xl xl:w-3/5 xl:rounded-r-3xl">
<div className="flex items-center gap-2">
Expand Down