I'm a Front-end developer from Sร i Gรฒn, Vietnam, currently living in Toronto, Canada.
๐ Checkout my personal website: https://andrewnt.dev
๐ง Contact me: [email protected]
๐ Let's connect: https://www.linkedin.com/in/andrewnt219/
Home Page: https://rent-near-me.vercel.app/
I'm a Front-end developer from Sร i Gรฒn, Vietnam, currently living in Toronto, Canada.
๐ Checkout my personal website: https://andrewnt.dev
๐ง Contact me: [email protected]
๐ Let's connect: https://www.linkedin.com/in/andrewnt219/
https://minimals.cc/components
Currently, after finishing registering for an account, the UI shows nothing to indicate the finished task.
Config codebase to support i18n
Move away from Supabase to Firebase
The LayoutProvider
right now seems to be there to support only the Modal
s. It wraps inside the DefaultLayout
which I don't remember why I made such decision.
LayoutProvider
becomes ModalProvider
and wrap it under AuthProvider
(and also under SnackbarProvider
when #98 is marged)\useLayoutModals
to simply useModals
Modal
should be put inside ModalProvider
so that no 2 modals can be shown at the same time (supported by useModalGroup
)From #63:
error
parameter in getErrorMessage()
in src/utils/api-responses.ts
to unknwon
ModeLType
From #70:
show
and onDismiss
mandataory propsuseModalGroup
- making return ModalControl
non-optional typeonCreateAccountClick
and onAlreadyHaveAccountClick
inside the componenetsBranch: dev
Cannot open the login modal
Login modal should open
Inside the details of a house, have a button to compare with another selected house.
Branch: dev
The modal is closed
Login should open and show an error message
I suspect this is because react-hook-form doesn't properly handle errors thrown in handleSubmit
. I might have done it wrong, but their docs is not accurate. This does not handle the throw (even though their docs says so)
const onSubmit = () => {
throw new Error('Something is wrong')
}
handleSubmit(onSubmit).catch((e) => {
// you will need to catch that error
})
In the other project, I handle this with mutation from react-query. SWR seems to has the same concept for mutation, but I'm not sure.
Right now, almost every form field (TextField
, PasswordField
, DatePicker
, SelectField
) requires a id
prop so it can use it for a11y
purpose (for the aria-describedby
attribute).
After #95 is merged which includes the useUid
hook, we should make the id
prop optional. If an id
is not passed into the components above, we should generate a random id
and use it instead
Need to add aria-describedby
on inputs.
Form
looks pretty verbose and a lot of redundant stylings.
Let's pick a component library and gradually make our own version with Tailwindcss.
===========================================
Tasks:
PasswordActionField
to be more reuseable by creatinng a ActionField
componenet with the following props:
children
and a hook to access that context (i.e.: useActionCollapsible()
) which exposes properties and functions such as isOpen
, open()
, close()
and toggle()
so that any child componenet within the ActionCollapsible
can control it (example use case: A form can close the collapsible when it successfully submitted)Opening the Login or Register modal from the user menu requires the UserMenuLink to be a button (with onClick attribute)
Examples of protected routes:
Allow deactivating account from /account/security
Currently, we have this long-winded code for every form to pass the name
and, more importantly, the control
of the form to the useController
hook of each field in the form.
const controllers: Controllers<RegisterFormModel> = {
firstName: {
control,
name: 'firstName',
},
lastName: {
control,
name: 'lastName',
},
gender: {
control,
name: 'gender',
},
dob: {
control,
name: 'dob',
},
email: {
control,
name: 'email',
},
password: {
control,
name: 'password',
},
};
We can avoid passing the control
of the form to individual fields by wrapping the form around a <FormProvider>
exported from react-form-hook
(See the description of the control
property in the docs).
By doing this, we can eleminate the controllers
altogether and pass only the name
directly to the fields.
Official example for the use of <FormProvider>
can be found here.
@vitokhangnguyen I have tried zod on two other projects, and honestly, I feel that the code is much more concise than using a class and yup, especially the duplication in the current constructor, and another duplicate in yup.object()
. Here's an example using zod
import { z } from 'zod';
export const addCourseReviewSchema = z.object({
courseId: z.string().min(1, 'Have to select a course ID'),
difficulty: z
.string()
.transform((val) => +val)
.refine((val) => val <= 5, { message: 'Maximum value is 5' })
.refine((val) => val >= 1, { message: 'Minimum value is 1' }),
professorIdList: z
.string()
.array()
.min(1, { message: 'Minimum one related professor' }),
title: z.string().min(1, { message: 'Review must have a title' }),
});
export type AddCourseReviewFormValues = z.infer<typeof addCourseReviewSchema>;
Validation
import { HasMessage, TResult, TResultSuccess, ValidateQuery } from '@common';
import { withApiHandler } from '@lib/api/withApiHandler';
import { signupFormSchema, SignupFormValues } from '@modules/auth';
import { AuthService } from '@modules/auth/server-index';
import {
getErrorMessage,
ResultError,
ResultOk,
ResultSuccess,
} from '@utils/api-utils';
import { errorsToString } from '@utils/parse-utils';
import { NextApiHandler } from 'next';
type PostData = HasMessage;
export type Auth_SignupByPassword_PostData = TResultSuccess<PostData>;
export type Auth_SignupByPassword_PostBody = SignupFormValues;
const post: NextApiHandler<TResult<PostData>> = async (req, res) => {
const bodyResult = validateBody(req.body);
if (bodyResult.type === 'error') return res.status(422).json(bodyResult);
try {
await AuthService.signUpByPassword(bodyResult.data);
} catch (error) {
return res
.status(500)
.json(ResultError(`Fail to sign up: ${getErrorMessage(error)}`));
}
return res.status(201).json(ResultOk());
};
const validateBody: ValidateQuery<Auth_SignupByPassword_PostBody> = (body) => {
const result = signupFormSchema.safeParse(body);
if (!result.success) {
return ResultError(errorsToString(result.error.errors));
}
return ResultSuccess(body);
};
export default withApiHandler({ post });
Better ask users for anonymous data collection
Metadata
Filters
Allow tenants to share their preferences abouit their dream houses and housemates, as well as, their personalities.
This information will be shared with the owner when the tenant expresses their interests.
When input has an error, the ring and border overlap.
At the moment, date-fns
is only used for formatting date in DatePickerInput. This should be easily replaced with dayjs
. See https://react-day-picker.js.org/docs/input
rent-near-me/src/libs/react-day-picker/DatePicker.tsx
Lines 50 to 51 in 9457692
Either change how we implement it or add onKeyPress + tabIndex.
em
. See: https://zellwk.com/blog/media-query-units/px
for queries. See https://adamwathan.me/dont-use-em-for-media-queries/TextField
with type="email"
and a submit button which will send an email containing the reset password link. Firebase SDK supports this feature and we can customize the email content on Firebase console. After submitting, close the modal and show a succes snackbar, TextField
with the current user's emailA declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.