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 5 commits
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
2 changes: 1 addition & 1 deletion .env.example
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
@@ -1,3 +1,3 @@
NEXT_PUBLIC_API_BASE_URL=
NEXT_PUBLIC_APP_BASE_URL=
NEXT_PUBLIC_SSO_BASE_URL=
NEXT_PUBLIC_SSO_BASE_URL=
15 changes: 15 additions & 0 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';

const Button = ({ content, additionalStyle, onClick, disabled }) => {
Copy link
Member

Choose a reason for hiding this comment

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

Please add typescript for this component's props

return (
<button
className={`mx-auto w-40 max-w-full items-center py-2 text-white transition-all duration-500 hover:ring-8 disabled:cursor-not-allowed disabled:ring-0 ${additionalStyle}`}
onClick={onClick}
disabled={disabled}
>
{content}
</button>
);
};

export default Button;
29 changes: 12 additions & 17 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 Button from './Button';
import { ibmPlexSansThai } from './font';

export interface ModalProps {
Expand Down Expand Up @@ -58,25 +59,19 @@ export const Modal = ({
{children}
</div>
<div className="mt-6 flex flex-row justify-center gap-6">
<button
type="button"
className={` ${
`${answer1}` == ''
? 'aria-hidden hidden'
: 'inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-pink-600 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-pink-600/20 hover:ring-offset-4 hover:ring-offset-pink-600/50'
}
`}
{/* แก้ button */}
<Button
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)}
>
{answer1}
</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"
disabled=""
/>
<Button
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)}
>
{answer2}
</button>
disabled=""
/>
</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 Button from '@/components/Button';

const profilePic = '/images/pfp-placeholder.svg';

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

<button
{/* แก้ button */}
<Button
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
11 changes: 6 additions & 5 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 Button from '@/components/Button';

const profilePic = '/images/pfp-placeholder.svg';

Expand Down Expand Up @@ -139,13 +140,13 @@ 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
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"
{/* แก้ button */}
<Button
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}
>
ออกจากกลุ่ม
</button>
/>
</div>
</div>
);
Expand Down
19 changes: 12 additions & 7 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 Button from '@/components/Button';
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,20 @@ export default function ProfileInfoPanel() {
<p className="select-none text-center text-3xl font-bold text-purple-400">
{user?.firstname} <br /> {user?.lastname}
</p>

<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"
{/* แก้ Button */}
<Button
additionalStyle="rounded-lg bg-purple-400 ring-purple-400/30"
content={
<>
แก้ไขข้อมูล{' '}
<PencilSquareIcon className="ml-2 inline-block h-5" />
</>
}
onClick={() => {
router.push('/edit');
}}
>
แก้ไขข้อมูล
<PencilSquareIcon className="ml-2 inline-block h-5" />
</button>
disabled=""
/>
</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
11 changes: 6 additions & 5 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 Button from '@/components/Button';

function useAllBaans() {
const [allBaans, setAllBaans] = useState<IBaan[]>([]);
Expand Down Expand Up @@ -164,8 +165,10 @@ const BaanChoosing = () => {
)}
</div>

<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"
{/* แก้ button */}
<Button
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),
Expand All @@ -176,9 +179,7 @@ const BaanChoosing = () => {
}
}}
disabled={selectedBaan.some((b) => b.id === '')}
>
บันทึกการเลือก
</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