Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

created link button to new item #227

Closed
wants to merge 2 commits into from
Closed

created link button to new item #227

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a2ade4
created link button to new item
May 27, 2024
6dbd685
add style
May 27, 2024
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
Next Next commit
created link button to new item
  • Loading branch information
aboiko1281 committed May 27, 2024
commit 2a2ade4f10893118b45847215d5f1d115ccf2b30
14 changes: 11 additions & 3 deletions app/(dashboard)/add-item/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,17 @@ const AddItemPage = () => {
...data,
};

await insertRow('items', dataItem);
reset();
router.push('/add-item/success');
try {
const response = await insertRow('items', dataItem);
if (response === false) {
throw 'InsertFailed';
Comment on lines +58 to +60
Copy link
Contributor

Choose a reason for hiding this comment

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

Based on the refactor for insertRow suggested in this review let's also adapt this implementation of the function so we can handle the error it would throw in case of a failure. It should just be a case of replicating the same pattern.

💡 Also, I really liked the fact that you attempted to enforce our types in your refactor of insertRow but let's move that declaration up to here instead.

I'm suggesting this because I think it will be a better separation of concerns - it means we let our util return the data just as is and then we get TypeScript to evaluate if it matches the type we expected once it's been returned here. That way the static testing will be working for us and alerting us if anything changes in future and our Types need a review or there is an issue with the data returned.

}
const { id } = response;
reset();
router.push(`/add-item/success?id=${id}`);
} catch (e) {
console.log('Failed to create new item');
}
};

const category = watch('item_type');
Expand Down
12 changes: 11 additions & 1 deletion app/(dashboard)/add-item/success/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
'use client';
import Link from 'next/link';
import ButtonRounded from '@/components/buttons/ButtonRounded';
import ButtonGoToItem from '@/components/buttons/ButtonGoToItem';

const SuccessPage = () => {
import React from 'react';
import { useSearchParams } from 'next/navigation';

const SuccessPage = async () => {
const searchParams = useSearchParams();
const idItem = searchParams.get('id');
return (
<div className='my-10 flex flex-col items-center gap-5'>
<h1 className='text-center text-xl font-bold'>
Expand All @@ -10,6 +17,9 @@ const SuccessPage = () => {
<Link href='/add-item'>
<ButtonRounded type='button'>ADD ANOTHER ITEM</ButtonRounded>
</Link>
<Link href={`/item/${idItem}`}>
<ButtonGoToItem type='button'>GO TO YOUR ITEM</ButtonGoToItem>
Copy link
Contributor

Choose a reason for hiding this comment

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

We don't need a new component here. The ButtonRounded.tsx component can be re-used for this situation by just passing the appropriate props - let's apply it instead 👍

</Link>
</div>
);
};
Expand Down
31 changes: 31 additions & 0 deletions components/buttons/ButtonGoToItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
'use client';
import React from 'react';

type ButtonRoundedPropTypes = {
children: string;
type: 'button' | 'submit' | 'reset';
isDisabled?: boolean;
clickHandler?: (event: React.MouseEvent<HTMLButtonElement>) => void;
};

const ButtonGoToItem: React.FC<ButtonRoundedPropTypes> = ({
children,
clickHandler,
isDisabled,
type,
}) => {
return (
<button
className='button button-rounded button-stroke disabled:bg-hoverGreen'
onClick={clickHandler}
role='button'
type={type}
disabled={isDisabled}
aria-label={`${children}`}
>
{children}
</button>
);
};

export default ButtonGoToItem;
4 changes: 3 additions & 1 deletion supabase/models/insertRow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default async function insertRow(
try {
// setSubmitting(true);
const supabase = newClient();
await supabase.from(table).insert(InsertValues).select();
const response = await supabase.from(table).insert(InsertValues).select();
const [createdRecord] = response?.data ?? [];
return createdRecord as PartialItem;
} catch (error) {
// setSubmitting(false);
console.log('An unexpected error occurred');
Comment on lines +10 to 15
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const response = await supabase.from(table).insert(InsertValues).select();
const [createdRecord] = response?.data ?? [];
return createdRecord as PartialItem;
} catch (error) {
// setSubmitting(false);
console.log('An unexpected error occurred');
const {data, error} = await supabase.from(table).insert(InsertValues).select();
return data as PartialIem;
} catch (error) {
throw error
console.error(`Error inserting rows to the database: ${error}`);

Using the nullish coalescing operator here will mean we always get an array even if there was an error - we definitely don't want that because it would hide any issues happening in our query to the database.

Instead, we can refactor the function to actually throw the error back up to be handled appropriately wherever we called this query.

Expand Down
Loading