Skip to content

Commit 257cf16

Browse files
MirthisMirthis
committed
style non-page scrollbars, add loading status to applicant fform
1 parent 46381eb commit 257cf16

9 files changed

+64
-39
lines changed

‎package-lock.json

+20
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"prettier": "^2.8.8",
6666
"prettier-plugin-tailwindcss": "^0.2.6",
6767
"prisma": "^5.0.0",
68+
"tailwind-scrollbar": "^3.0.5",
6869
"tailwindcss": "^3.3.0",
6970
"typescript": "^5.0.2"
7071
},

‎src/components/forms/ApplicantForm.tsx

+31-10
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
44
import { useEffect } from "react";
55
import { useForm } from "react-hook-form";
66

7+
import { api } from "~/lib/api";
78
import {
89
APPL_EXP_MAX_LENGTH,
910
APPL_RESUME_MAX_LENGTH,
@@ -16,25 +17,45 @@ import Spinner from "../utils/Spinner";
1617

1718
const ApplicantForm = ({
1819
applicant,
19-
onSubmit,
2020
forceNewOnEdit = false,
21+
onSuccess,
2122
}: {
2223
applicant: ApplicantFormData | undefined;
23-
onSubmit: (data: ApplicantFormData) => void;
2424
forceNewOnEdit?: boolean;
25+
onSuccess?: () => void;
2526
}) => {
27+
const utils = api.useContext();
28+
2629
const {
2730
register,
2831
handleSubmit,
2932
reset,
3033
watch,
31-
formState: { errors, isValid, isSubmitting, isDirty },
34+
formState: { errors, isValid, isDirty },
3235
} = useForm<ApplicantFormData>({
3336
resolver: zodResolver(applicantSchema),
3437
mode: "onTouched",
3538
defaultValues: applicant,
3639
});
3740

41+
const { mutateAsync: upsertApplicant, isLoading: isSubmitting } =
42+
api.applicant.createOrUpdate.useMutation({
43+
onSuccess: () => {
44+
void utils.applicant.getForLoggedUser.invalidate();
45+
void utils.user.getOnboardingState.invalidate();
46+
onSuccess?.();
47+
},
48+
});
49+
50+
const onSubmit = (data: ApplicantFormData) => {
51+
const setAsMain = !applicant || applicant.isMain;
52+
53+
void upsertApplicant({
54+
applicant: data,
55+
setAsMain,
56+
});
57+
};
58+
3859
useEffect(() => {
3960
reset(applicant);
4061
}, [applicant, reset]);
@@ -56,7 +77,7 @@ const ApplicantForm = ({
5677
<div className="relative w-1/2">
5778
<input
5879
type="text"
59-
className="peer input-bordered input-primary input block w-full focus:outline-offset-0"
80+
className="peer input-bordered input-secondary input block w-full focus:outline-offset-0"
6081
placeholder=" "
6182
id={"firstName"}
6283
{...register("firstName")}
@@ -73,7 +94,7 @@ const ApplicantForm = ({
7394
<input
7495
type="text"
7596
id="lastName"
76-
className="peer input-bordered input-primary input block w-full focus:outline-offset-0"
97+
className="peer input-bordered input-secondary input block w-full focus:outline-offset-0"
7798
placeholder=" "
7899
{...register("lastName")}
79100
disabled={isSubmitting}
@@ -98,7 +119,7 @@ const ApplicantForm = ({
98119
<input
99120
type="text"
100121
id="title"
101-
className="peer input-bordered input-primary input block w-full focus:outline-offset-0"
122+
className="peer input-bordered input-secondary input block w-full focus:outline-offset-0"
102123
placeholder=" "
103124
{...register("jobTitle")}
104125
disabled={isSubmitting}
@@ -118,7 +139,7 @@ const ApplicantForm = ({
118139
<div className="relative">
119140
<textarea
120141
id="resume"
121-
className="peer textarea-bordered textarea-primary textarea w-full focus:outline-offset-0"
142+
className="peer textarea-bordered textarea-secondary scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300 textarea w-full focus:outline-offset-0"
122143
placeholder=" "
123144
{...register("resume")}
124145
disabled={isSubmitting}
@@ -144,7 +165,7 @@ const ApplicantForm = ({
144165
<div className="relative">
145166
<textarea
146167
id="skills"
147-
className="peer textarea-bordered textarea-primary textarea w-full focus:outline-offset-0"
168+
className="peer textarea-bordered textarea-secondary scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300 textarea w-full focus:outline-offset-0"
148169
placeholder=" "
149170
{...register("skills")}
150171
disabled={isSubmitting}
@@ -171,7 +192,7 @@ const ApplicantForm = ({
171192
<div className="relative">
172193
<textarea
173194
id="experience"
174-
className="peer textarea-bordered textarea-primary textarea w-full focus:outline-offset-0"
195+
className="peer textarea-bordered textarea-secondary textarea w-full focus:outline-offset-0 scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300"
175196
placeholder=" "
176197
{...register("experience")}
177198
disabled={isSubmitting}
@@ -196,7 +217,7 @@ const ApplicantForm = ({
196217
</div>
197218

198219
<button
199-
disabled={!isValid || isSubmitting}
220+
disabled={!isValid || isSubmitting || !isDirty}
200221
type="submit"
201222
className="btn-primary btn"
202223
>

‎src/components/modals/EditApplicationModal.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const EditApplicationModal = ({
130130
<input
131131
type="text"
132132
id="title"
133-
className="peer input-bordered input-primary input block w-full focus:outline-offset-0"
133+
className="peer input-bordered input-secondary input block w-full focus:outline-offset-0"
134134
placeholder=" "
135135
{...register("title")}
136136
/>
@@ -149,7 +149,7 @@ const EditApplicationModal = ({
149149
<div className="relative">
150150
<textarea
151151
id="description"
152-
className="peer textarea-bordered textarea-primary textarea w-full focus:outline-offset-0"
152+
className="peer textarea-bordered textarea-secondary scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300 textarea w-full focus:outline-offset-0"
153153
placeholder=" "
154154
{...register("description")}
155155
rows={5}
@@ -170,7 +170,7 @@ const EditApplicationModal = ({
170170
<input
171171
id="companyName"
172172
type="text"
173-
className="peer input-bordered input-primary input block w-full focus:outline-offset-0"
173+
className="peer input-bordered input-secondary input block w-full focus:outline-offset-0"
174174
placeholder=" "
175175
{...register("companyName")}
176176
/>
@@ -189,7 +189,7 @@ const EditApplicationModal = ({
189189
<div className="relative">
190190
<textarea
191191
id="companyDetails"
192-
className="peer textarea-bordered textarea-primary textarea w-full focus:outline-offset-0"
192+
className="peer textarea-bordered textarea-secondary scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300 textarea w-full focus:outline-offset-0"
193193
placeholder=" "
194194
{...register("companyDetails")}
195195
rows={5}

‎src/components/modals/EditProfileApplicantModal.tsx

+2-22
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { DocumentArrowUpIcon, PencilIcon } from "@heroicons/react/24/outline";
22

33
import { useEffect, useState } from "react";
44

5-
import { api } from "~/lib/api";
65
import { cn } from "~/lib/utils";
76
import {
87
type ApplicantData,
@@ -25,8 +24,6 @@ const EditProfileApplicantModal = ({
2524
onClose: () => void;
2625
initApplicant?: ApplicantData | undefined;
2726
}) => {
28-
const utils = api.useContext();
29-
3027
const [mode, setMode] = useState<EditProfileMode>("upload");
3128
const [applicant, setApplicant] = useState<ApplicantFormData | undefined>(
3229
initApplicant
@@ -40,31 +37,14 @@ const EditProfileApplicantModal = ({
4037
setApplicant(initApplicant);
4138
}, [initApplicant]);
4239

43-
const { mutateAsync: upsertApplicant } =
44-
api.applicant.createOrUpdate.useMutation({
45-
onSuccess: () => {
46-
void utils.applicant.getForLoggedUser.invalidate();
47-
void utils.user.getOnboardingState.invalidate();
48-
onClose();
49-
},
50-
});
51-
52-
const onSubmit = (data: ApplicantFormData) => {
53-
const setAsMain = !initApplicant || initApplicant.isMain;
54-
55-
void upsertApplicant({
56-
applicant: data,
57-
setAsMain,
58-
});
59-
};
60-
6140
const onParseSuccess = (parsedResume: ParsedResume) => {
6241
const newApplicant: ApplicantFormData = {
6342
firstName: parsedResume.firstName,
6443
lastName: parsedResume.lastName,
6544
jobTitle: parsedResume.jobTitle,
6645
resume: parsedResume.summary,
6746
skills: parsedResume.skills.join("\n"),
47+
isMain: applicant?.isMain ?? true,
6848
experience: parsedResume.experience
6949
.map(
7050
({ company, title, description }) =>
@@ -112,7 +92,7 @@ const EditProfileApplicantModal = ({
11292
</div>
11393
<div className="pt-2">
11494
{mode === "edit" && (
115-
<ApplicantForm applicant={applicant} onSubmit={onSubmit} />
95+
<ApplicantForm applicant={applicant} onSuccess={() => onClose()} />
11696
)}
11797
{mode === "upload" && (
11898
<div>

‎src/pages/coverletter/[id].tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ const CoverLetterPage: NextPage = () => {
291291
292292
className="max-h-[calc(100vh-23rem)] max-w-none lg:max-h-[calc(100vh-20rem)]"
293293
> */}
294-
<div className="max-h-[calc(100vh-23rem)] overflow-auto relative rounded-md bg-base-200 p-2">
294+
<div className="max-h-[calc(100vh-23rem)] scrollbar-thin scrollbar-thumb-secondary hover:scrollbar-thumb-secondary/50 scrollbar-track-base-300 overflow-auto relative rounded-md bg-base-200 p-2">
295295
{/* {displayedText} */}
296296
<div>
297297
{formatApiMessage(displayedText).map((p, i) => (

‎src/pages/profile.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,9 @@ const ProfilePage: NextPage = () => {
133133
</div>
134134
</div>
135135
)}
136+
<div className="divider lg:hidden" />
136137
<div className="flex-1">
137-
<Title title="Other Applicants" type="subsubsection" />
138+
<Title title="Other Applicants" type="subsection" />
138139
{otherApplicants && otherApplicants.length === 0 && (
139140
<p>You have no other applicants saved.</p>
140141
)}

‎src/types/schemas.ts

+2
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@ export const applicantSchema = z.object({
179179
z.string().length(0),
180180
z.null(),
181181
]),
182+
183+
isMain: z.boolean(),
182184
});
183185

184186
export const applicationRequestSchema = appplicationSchema.merge(

‎tailwind.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default {
55
theme: {
66
extend: {},
77
},
8-
plugins: [require("daisyui")],
8+
plugins: [require("daisyui"), require("tailwind-scrollbar")],
99
daisyui: {
1010
themes: [
1111
// "business",

0 commit comments

Comments
 (0)