Implement Validation for Filtering #86
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| const [error, setError] = useState<string | undefined>(undefined); | ||
|
|
||
| useEffect(() => { | ||
| const isValidTerm = searchParams?.workTerm |
There was a problem hiding this comment.
i'm fairly certain we don't need to check for random invalid search params, like if someone puts josh=best-pl-ever, we can safely ignore
There was a problem hiding this comment.
just a comment, not a change
| return ( | ||
| <> | ||
| <SearchFilter /> | ||
| {/* TODO: Loading animations */} | ||
| {error && showAlert && ( | ||
| <div | ||
| id="bad-input" |
There was a problem hiding this comment.
i think we should make this a component so we can reuse this toast pop up in other places, @RishikeshNK thoughts?
There was a problem hiding this comment.
Yup! I agree. We can move this to a separate component that takes in the message as a prop. @joshw2048
|
|
||
| import type { | ||
| import { |
There was a problem hiding this comment.
You can fix this warning by doing something like this:
import type {
ReviewType,
WorkEnvironmentType,
WorkTermType,
} from "@cooper/db/schema";
import { WorkEnvironment, WorkTerm } from "@cooper/db/schema";| @@ -22,6 +24,24 @@ export default function Roles({ | |||
| workEnvironment?: WorkEnvironmentType; | |||
| }; | |||
| }) { | |||
| const [error, setError] = useState<string | undefined>(undefined); | |||
|
|
|||
| useEffect(() => { | |||
There was a problem hiding this comment.
We could get away without using a useEffect or possibly a useState for tracking the errors!
We can define a RolesSearchParam schema in the validators package using Zod. Could be something like the following:
const RolesSearchParam = z.object({
cycle: z.nativeEnum(WorkTerm).optional(),
term: z.nativeEnum(WorkEnvironment).optional(),
});We can share this object between the web app and the list endpoint for reviews. For validation, we can do something like the following:
const validationResult = RolesSearchParam.safeParse(searchParams);
const reviews = api.review.list.useQuery({
options: validationResult.success ? validationResult.data : {},
});At the same time, we can also use the same success property to display the error modal / toast:
{!validationResult.success && (
<ErrorAlert message="Invalid search parameters." />
)}If you want more specific error messages, you can modify the Zod schema like this:
const RolesSearchParam = z.object({
cycle: z
.nativeEnum(WorkTerm, {
message: "Invalid cycle type",
})
.optional(),
term: z
.nativeEnum(WorkEnvironment, {
message: "Invalid term type",
})
.optional(),
});and get the errors using validationResult.error.
| return ( | ||
| <> | ||
| <SearchFilter /> | ||
| {/* TODO: Loading animations */} | ||
| {error && showAlert && ( | ||
| <div | ||
| id="bad-input" |
There was a problem hiding this comment.
Yup! I agree. We can move this to a separate component that takes in the message as a prop. @joshw2048
| return ( | ||
| <> | ||
| <SearchFilter /> | ||
| {/* TODO: Loading animations */} | ||
| {error && showAlert && ( | ||
| <div |
There was a problem hiding this comment.
Totally optional but I'd recommend taking a look at shadcn/ui. Almost all of our reusable components are built on top of shadcn. They do have a toast that you can use!
If you're interested, check out this docs page. You can add the component from the root folder using pnpm ui-add toast and use that component here.
Description
Makes sure that the workTerm and workEnvironment that is inputted is valid and gives an error otherwise.
Motivation and Context
Closes #72
How has this been tested?
Screenshots (if appropriate):
Types of changes
Checklist: