Skip to content

Commit 2abdacb

Browse files
MirthisMirthis
committed
minor deisgn tweaks
1 parent 349023a commit 2abdacb

18 files changed

+167
-187
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,5 @@ yarn-error.log*
4141
# typescript
4242
*.tsbuildinfo
4343

44-
/public/sitemap.xml#
4544

4645
/analyze

‎analyze/nodejs.html

-39
This file was deleted.

‎src/components/ApplicationCard.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { PencilLine, Trash2, UserCircle2 } from "lucide-react";
2+
3+
import { type ApplicationData } from "~/types/types";
4+
5+
import ServiceLinks from "./ServiceLinks";
6+
import { ProMarker } from "./utils";
7+
8+
const ApplicationCard = ({
9+
application,
10+
hasPro,
11+
handleEdit,
12+
handleDelete,
13+
}: {
14+
application: ApplicationData;
15+
hasPro: boolean;
16+
handleEdit: (application: ApplicationData) => void;
17+
handleDelete: (application: ApplicationData) => void;
18+
}) => {
19+
return (
20+
<div
21+
key={application.id}
22+
className="card h-full w-full border border-primary xl:w-96"
23+
>
24+
<div className="card-body flex flex-col gap-y-2">
25+
<h2 className="card-title">
26+
{application.title}{" "}
27+
{application.companyName ? ` @ ${application.companyName}` : ""}
28+
</h2>
29+
<div className="flex items-center gap-x-2">
30+
<UserCircle2 className="h-6 w-6" />
31+
<p>
32+
{application.applicant.firstName} {application.applicant.lastName} -{" "}
33+
{application.applicant.jobTitle}
34+
</p>
35+
</div>
36+
37+
<div>
38+
<div className="divider" />
39+
{application.applicant.isMain || hasPro ? (
40+
<ServiceLinks applicationId={application.id} />
41+
) : (
42+
<ProMarker text="Change applicant or upgrade to pro to access all the features for this application." />
43+
)}
44+
45+
<div className="divider" />
46+
</div>
47+
<div className="flex gap-y-2">
48+
<div className="card-actions justify-center text-sm flex-1 ">
49+
<button
50+
aria-label="Edit Application"
51+
className="font-bold uppercase text-secondary flex gap-x-2 items-center hover:underline underline-offset-2"
52+
onClick={() => handleEdit(application)}
53+
>
54+
<PencilLine className="h-6 w-6" />
55+
Edit
56+
</button>
57+
</div>
58+
<div className="card-actions justify-center text-sm flex-1 ">
59+
<button
60+
aria-label="Delete Application"
61+
className="font-bold flex gap-x-2 items-center uppercase text-error hover:underline underline-offset-2"
62+
onClick={() => handleDelete(application)}
63+
>
64+
<Trash2 className="h-6 w-6" />
65+
Delete
66+
</button>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
);
72+
};
73+
74+
export default ApplicationCard;

‎src/components/ApplicationSidebar.tsx

+43-63
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,18 @@ import { Briefcase, PencilLine, UserRound } from "lucide-react";
22

33
import { useState } from "react";
44

5-
import { api } from "~/lib/api";
6-
7-
import { useAppStore } from "~/store/appStore";
8-
import { useCoverLettersStore } from "~/store/coverLettersStore";
9-
import { useInterviewStore } from "~/store/interviewStore";
10-
import { useTestStore } from "~/store/testStore";
5+
import { type ApplicationData } from "~/types/types";
116

127
import ServiceLinks from "./ServiceLinks";
138
import Title from "./Title";
149
import EditApplicationModal from "./modals/EditApplicationModal";
15-
import { ApplicationDetailsSkeleton } from "./skeletons";
1610

17-
const ApplicationSideBar = ({ applicationId }: { applicationId: string }) => {
11+
const ApplicationSideBar = ({
12+
application,
13+
}: {
14+
application: ApplicationData;
15+
}) => {
1816
const [isEditApplicationOpen, setIsEditApplicationOpen] = useState(false);
19-
const {
20-
applicationId: storeApplicationId,
21-
setApplicationID: setStoreApplicationID,
22-
} = useAppStore((state) => state);
23-
const resetCoverLetters = useCoverLettersStore((state) => state.reset);
24-
const resetTest = useTestStore((state) => state.resetTest);
25-
const resetInterview = useInterviewStore((state) => state.resetInterview);
26-
27-
if (applicationId !== storeApplicationId) {
28-
resetCoverLetters();
29-
resetTest();
30-
resetInterview();
31-
setStoreApplicationID(applicationId);
32-
}
33-
34-
const { data: application, isFetching: isLoading } =
35-
api.application.get.useQuery({ id: applicationId });
3617

3718
return (
3819
<>
@@ -44,49 +25,48 @@ const ApplicationSideBar = ({ applicationId }: { applicationId: string }) => {
4425
/>
4526
)}
4627
<Title title="Application" type="section" />
47-
{isLoading && <ApplicationDetailsSkeleton />}
48-
{application && !isLoading && (
49-
<div className="space-y-2">
50-
{/* Job Details */}
51-
<div className="flex gap-x-4 items-center text-xl">
52-
<Briefcase className="w-8 h-8" />
53-
<div>
54-
<p>{application.title}</p>
55-
{application.companyName && <p>@{application.companyName}</p>}
56-
</div>
28+
{/* {isLoading && <ApplicationDetailsSkeleton />} */}
29+
{/* {application && !isLoading && ( */}
30+
<div className="space-y-2">
31+
{/* Job Details */}
32+
<div className="flex gap-x-4 items-center text-xl">
33+
<Briefcase className="w-8 h-8" />
34+
<div>
35+
<p>{application.title}</p>
36+
{application.companyName && <p>@{application.companyName}</p>}
5737
</div>
58-
{/* Applicant Details */}
59-
<div className="flex gap-x-4 items-center text-xl">
60-
<UserRound className="w-8 h-8" />
61-
<div>
62-
<p>
63-
{application.applicant.firstName}{" "}
64-
{application.applicant.lastName}
65-
</p>
66-
<p>{application.applicant.jobTitle}</p>
67-
</div>
38+
</div>
39+
{/* Applicant Details */}
40+
<div className="flex gap-x-4 items-center text-xl">
41+
<UserRound className="w-8 h-8" />
42+
<div>
43+
<p>
44+
{application.applicant.firstName} {application.applicant.lastName}
45+
</p>
46+
<p>{application.applicant.jobTitle}</p>
6847
</div>
48+
</div>
6949

70-
{/* Edit Application Link */}
71-
<div className="flex justify-end">
72-
<button
73-
aria-label="Edit Application"
74-
className="font-bold uppercase text-secondary flex gap-x-2 items-center hover:underline underline-offset-2"
75-
onClick={() => setIsEditApplicationOpen(true)}
76-
>
77-
<PencilLine className="h-8 w-8" />
78-
Edit
79-
</button>
80-
</div>
50+
{/* Edit Application Link */}
51+
<div className="flex justify-end">
52+
<button
53+
aria-label="Edit Application"
54+
className="font-bold uppercase text-secondary flex gap-x-2 items-center hover:underline underline-offset-2"
55+
onClick={() => setIsEditApplicationOpen(true)}
56+
>
57+
<PencilLine className="h-8 w-8" />
58+
Edit
59+
</button>
60+
</div>
8161

82-
{/* Divider */}
83-
<div className="divider" />
62+
{/* Divider */}
63+
<div className="divider" />
8464

85-
{/* Link to services */}
86-
{/* <Title title="I neeed..." type="subsection" /> */}
87-
<ServiceLinks applicationId={application.id} />
88-
</div>
89-
)}
65+
{/* Link to services */}
66+
{/* <Title title="I need..." type="subsection" /> */}
67+
<ServiceLinks applicationId={application.id} />
68+
</div>
69+
{/* )} */}
9070
</>
9171
);
9272
};

‎src/components/BasicCard.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ const BasicCard = ({
3131
{Icon && <Icon className="h-16 w-16" />}
3232
<h2 className="card-title">{title}</h2>
3333
<p>{description}</p>
34-
{restrictToPro && (
35-
<p className="text-sm text-error">
36-
<ProMarker />
37-
</p>
38-
)}
34+
{restrictToPro && <ProMarker />}
3935
</div>
4036
</div>
4137
</button>

‎src/components/ServiceLinks.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ServiceLink = ({
2626
<div className="border hover:text-base-100 border-primary-focus rounded-full p-2 hover:bg-primary-focus">
2727
<Icon className="h-8 w-8 " />
2828
</div>
29-
<p className="">{text}</p>
29+
<p className="text-center">{text}</p>
3030
</Link>
3131
);
3232
};

‎src/components/UserWidgetSignedIn.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const UserWidgetSignedIn = () => {
8585
: "text-accent"
8686
} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
8787
>
88-
Upgrae to Pro
88+
Upgrade to Pro
8989
</button>
9090
</Link>
9191
) : (

‎src/components/modals/DeleteApplicationModal.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { type ApplicationData } from "~/types/types";
55
import Spinner from "../utils/Spinner";
66
import Modal from "./Modal";
77

8-
const DeleteApplictionbModal = ({
8+
const DeleteApplicationModal = ({
99
isOpen,
1010
onClose,
1111
application,
@@ -60,7 +60,7 @@ const DeleteApplictionbModal = ({
6060
onClick={handleConfirm}
6161
disabled={isLoading}
6262
>
63-
{!isLoading ? <p>Confirm</p> : <Spinner text="Deleteting..." />}
63+
{!isLoading ? <p>Confirm</p> : <Spinner text="Deleting..." />}
6464
</button>
6565
</div>
6666
{isError && (
@@ -72,4 +72,4 @@ const DeleteApplictionbModal = ({
7272
);
7373
};
7474

75-
export default DeleteApplictionbModal;
75+
export default DeleteApplicationModal;

‎src/components/modals/DeleteProfileApplicantModal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { type ApplicantFormData } from "~/types/types";
55
import Spinner from "../utils/Spinner";
66
import Modal from "./Modal";
77

8-
const DeleteProfileApplicantbModal = ({
8+
const DeleteProfileApplicantModal = ({
99
isOpen,
1010
onClose,
1111
applicant,
@@ -77,4 +77,4 @@ const DeleteProfileApplicantbModal = ({
7777
);
7878
};
7979

80-
export default DeleteProfileApplicantbModal;
80+
export default DeleteProfileApplicantModal;

‎src/hooks/useApplication.tsx

+21-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,28 @@ import { useRouter } from "next/router";
22

33
import { api } from "~/lib/api";
44

5-
export const useApplication = (applicationId: string) => {
5+
import { useAppStore } from "~/store/appStore";
6+
import { useCoverLettersStore } from "~/store/coverLettersStore";
7+
import { useInterviewStore } from "~/store/interviewStore";
8+
import { useTestStore } from "~/store/testStore";
9+
10+
export const useApplication = (applicationId: string | undefined) => {
611
const router = useRouter();
12+
const {
13+
applicationId: storeApplicationId,
14+
setApplicationID: setStoreApplicationID,
15+
} = useAppStore((state) => state);
16+
17+
const resetCoverLetters = useCoverLettersStore((state) => state.reset);
18+
const resetTest = useTestStore((state) => state.resetTest);
19+
const resetInterview = useInterviewStore((state) => state.resetInterview);
20+
21+
if (applicationId !== storeApplicationId) {
22+
resetCoverLetters();
23+
resetTest();
24+
resetInterview();
25+
setStoreApplicationID(applicationId);
26+
}
727

828
const { data, isFetching } = api.application.get.useQuery(
929
{

‎src/lib/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,5 @@ export function absoluteUrl(path: string) {
6666
}
6767

6868
export const getIdFromUrlQuery = (query: ParsedUrlQuery) => {
69-
return query.id && !Array.isArray(query.id) ? query.id : "N/A";
69+
return query.id && !Array.isArray(query.id) ? query.id : undefined;
7070
};

‎src/pages/api/webhooks/clerk/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
3838

3939
// If there are no headers, error out
4040
if (!svix_id || !svix_timestamp || !svix_signature) {
41-
return res.status(400).json({ error: "Error occured -- no svix headers" });
41+
return res.status(400).json({ error: "Error occurred -- no svix headers" });
4242
}
4343

4444
// Get the body
@@ -74,7 +74,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
7474
});
7575

7676
// FIXME: add default price field to db and retrieve from there
77-
// const priceId = "price_1NVE8uJ8kIO1cCrZFmbcdiJC";
77+
// const priceId = "";
7878

7979
// create trial subscription
8080
// const trialSubscription = await stripe.subscriptions.create({

‎src/pages/application/[id]/coverletters.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,18 @@ const CoverLetterPage: NextPage = () => {
2828
} = useCoverLettersStore((state) => state);
2929

3030
const applicationId = getIdFromUrlQuery(router.query);
31+
console.log({ applicationId });
3132

3233
const { application, isFetching: isLoadingApplication } =
3334
useApplication(applicationId);
3435

3536
const { isFetching: isLoadingCoverLetters } =
3637
api.coverLetters.getAll.useQuery(
3738
{
38-
applicationId,
39+
applicationId: applicationId ?? "N/A",
3940
},
4041
{
41-
// enabled: router.query.id !== application?.id,
42+
enabled: !!applicationId,
4243
onSuccess: (data) => {
4344
setCoverLetters(data);
4445
const currentCoverLetter = data[0];
@@ -69,7 +70,7 @@ const CoverLetterPage: NextPage = () => {
6970
>
7071
<div className="flex gap-x-2 min-h-screen">
7172
<div className="hidden lg:block w-96 shrink-0">
72-
<ApplicationSideBar applicationId={applicationId} />
73+
{application && <ApplicationSideBar application={application} />}
7374
</div>
7475
<div className="flex-1 border-0 lg:border-l pl-2 flex-shrink pb-20 space-y-2">
7576
<Title title="Create Cover Letter" type="section" />

‎src/pages/application/[id]/interview.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,7 @@ const InterviewPage: NextPage = () => {
112112
>
113113
<div className="flex gap-x-2 min-h-screen">
114114
<div className="hidden lg:block w-96 shrink-0">
115-
{applicationId && (
116-
<ApplicationSideBar applicationId={applicationId} />
117-
)}
115+
{application && <ApplicationSideBar application={application} />}
118116
</div>
119117

120118
<div className="flex-1 border-0 lg:border-l pl-2 flex-shrink pb-20">

‎src/pages/application/[id]/test.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const InterviewPage: NextPage = () => {
4747
const jobSkills = application?.skillsSummary.split(", ") ?? [];
4848

4949
const startTest = () => {
50+
if (!applicationId) return;
5051
initTest(testSkill);
5152
getNewQuestion({
5253
applicationId,
@@ -63,9 +64,7 @@ const InterviewPage: NextPage = () => {
6364
>
6465
<div className="flex gap-x-2 min-h-screen">
6566
<div className="hidden lg:block w-96 shrink-0">
66-
{applicationId && (
67-
<ApplicationSideBar applicationId={applicationId} />
68-
)}
67+
{application && <ApplicationSideBar application={application} />}
6968
</div>
7069

7170
<div className="flex-1 border-0 lg:border-l pl-2 flex-shrink pb-20">

0 commit comments

Comments
 (0)