From 67035e199f4256dab71cab1c9042f877d0c86b76 Mon Sep 17 00:00:00 2001
From: Scott Quested <me@scottquested.com>
Date: Wed, 24 Jan 2024 16:12:30 +0000
Subject: [PATCH] Update order of jobs query + update small styling with
 loaders

---
 README.md                                     | 48 +++++++++---------
 convex/actionsNode.ts                         |  4 --
 convex/queries.ts                             |  1 +
 package.json                                  | 10 ++--
 src/app/header.tsx                            |  2 +-
 .../DashboardLayout/DashboardLayout.tsx       |  9 ++--
 src/components/JobCard/JobCard.tsx            | 50 +++++++++++--------
 src/components/JobList/JobList.tsx            |  2 +-
 8 files changed, 66 insertions(+), 60 deletions(-)

diff --git a/README.md b/README.md
index c403366..e94384d 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,38 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# What's my job?
 
-## Getting Started
+This is a React and TypeScript project structured with Next.js and Tailwind CSS for styling. It uses a custom server-side rendering setup and includes a variety of components for building a web application. The project also uses Convex for schema, queries, and mutations.
 
-First, run the development server:
+## Installation
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+Before you start, make sure you have Node.js and npm installed on your machine.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+1. Clone the repository.
+2. Install the dependencies by running `npm install`.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Structure
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+The project is structured as follows:
 
-## Learn More
+- `src/`: This is where the main application code resides. It includes:
+  - `app/`: Contains the main application components and global styles.
+  - `components/`: Contains reusable components like `DashboardLayout`, `DashboardNav`, and `JobCard`.
+  - `lib/`: Contains utility functions and libraries.
+- `convex/`: Contains the Convex schema, queries, mutations, and server configuration.
+- `public/`: Contains static files that are served by the server.
+- `.next/`: Contains the output of the Next.js build process.
 
-To learn more about Next.js, take a look at the following resources:
+## Usage
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+To start the development server, run `npm run dev`.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## Contributing
 
-## Deploy on Vercel
+Contributions are welcome. Please make sure to update tests as appropriate.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+This project is licensed under the terms of the [LICENSE](LICENSE) file.
+
+## Contact
+
+Please open an issue for any questions or problems.
diff --git a/convex/actionsNode.ts b/convex/actionsNode.ts
index de3d83e..81bc522 100644
--- a/convex/actionsNode.ts
+++ b/convex/actionsNode.ts
@@ -24,8 +24,6 @@ export const getOpenAiAnswer = internalAction({
 	},
 	handler: async (ctx, { id, skills }) => {
 		try {
-			console.log("getOpenAiAnswer");
-
 			const completion = await openai.chat.completions.create({
 				messages: [
 					{
@@ -45,8 +43,6 @@ export const getOpenAiAnswer = internalAction({
 				completion.choices[0].message.content || "{}"
 			);
 
-			console.log(transformResult);
-
 			await ctx.runMutation(internal.mutations.updateJob, {
 				id,
 				result: JSON.stringify(transformResult),
diff --git a/convex/queries.ts b/convex/queries.ts
index d0116fe..417515c 100644
--- a/convex/queries.ts
+++ b/convex/queries.ts
@@ -13,6 +13,7 @@ export const getJobs = query({
 				// Only get jobs for the current user
 				return q.eq(q.field("userId"), identity.subject);
 			})
+			.order("desc")
 			.collect();
 
 		return jobs;
diff --git a/package.json b/package.json
index 01560d4..8ff4820 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,10 @@
 		"type": "git",
 		"url": "https://github.com/scottquested/whats-my-job.git"
 	},
+	"bugs": {
+		"url": "https://github.com/scottquested/whats-my-job/issues"
+	},
+	"homepage": "https://github.com/scottquested/whats-my-job",
 	"keywords": [
 		"next",
 		"next.js",
@@ -16,12 +20,8 @@
 		"openai",
 		"clerk"
 	],
-	"author": "",
+	"author": "Scott Quested <me@scottquested.com>",
 	"license": "ISC",
-	"bugs": {
-		"url": "https://github.com/scottquested/whats-my-job/issues"
-	},
-	"homepage": "https://github.com/scottquested/whats-my-job",
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
diff --git a/src/app/header.tsx b/src/app/header.tsx
index 91e295a..4824bf8 100644
--- a/src/app/header.tsx
+++ b/src/app/header.tsx
@@ -16,7 +16,7 @@ import { usePathname } from "next/navigation";
 export default function Header() {
 	const path = usePathname();
 	return (
-		<header className="flex justify-between items-center p-4 border-b-2 border-gray-100 dark:border-gray-800 fixed w-full bg-background dark:text-white">
+		<header className="flex justify-between items-center p-4 border-b-2 border-gray-100 dark:border-gray-800 fixed z-50 w-full bg-background dark:text-white">
 			<Link
 				href="/"
 				className="font-bold text-xl flex items-center justify-center gap-2"
diff --git a/src/components/DashboardLayout/DashboardLayout.tsx b/src/components/DashboardLayout/DashboardLayout.tsx
index ed37e95..aee3947 100644
--- a/src/components/DashboardLayout/DashboardLayout.tsx
+++ b/src/components/DashboardLayout/DashboardLayout.tsx
@@ -13,10 +13,11 @@ import {
 import DashboardNav from "../DashboardNav";
 import { DashboardLayoutProps } from "./DashboardLayout.types";
 import JobForm from "../JobForm";
-import { useConvexAuth, useQuery } from "convex/react";
+import { useQuery } from "convex/react";
 import { api } from "../../../convex/_generated/api";
 import { DashboardNavVariant } from "../DashboardNav/DashboardNav.types";
 import Jobs from "../Jobs";
+import { useUser } from "@clerk/clerk-react";
 
 export default function DashboardLayout({
 	navCollapsedSize,
@@ -28,9 +29,9 @@ export default function DashboardLayout({
 
 	const jobs = useQuery(api.queries.getJobs);
 
-	const { isAuthenticated } = useConvexAuth();
+	const { isLoaded, isSignedIn } = useUser();
 
-	if (!isAuthenticated) {
+	if (isLoaded && !isSignedIn) {
 		return (
 			<div className="pt-10 flex items-center justify-center">
 				<h1>You shouldn&apos;t be here! Please sign in...</h1>
@@ -101,7 +102,7 @@ export default function DashboardLayout({
 					minSize={30}
 					className="!overflow-scroll"
 				>
-					<div className="p-5 pb-10 mb-32 h-full">
+					<div className="p-5 pb-10">
 						{activeTab === 0 && <JobForm />}
 						{activeTab === 1 && <Jobs />}
 					</div>
diff --git a/src/components/JobCard/JobCard.tsx b/src/components/JobCard/JobCard.tsx
index 69e7528..dae9bfa 100644
--- a/src/components/JobCard/JobCard.tsx
+++ b/src/components/JobCard/JobCard.tsx
@@ -8,29 +8,35 @@ import { Badge } from "../ui/badge";
 export default function JobCard({ job, result }: JobCardProps) {
 	return (
 		<Card className="h-full">
-			<CardHeader className=" !mb-0">
-				<h1 className="text-xl font-semibold">{result?.jobTitle || ""}</h1>
-			</CardHeader>
-			<CardContent>
-				{!!job.skills.length && (
-					<div className="mb-4 flex gap-2">
-						{job.skills.split(",").map((skill) => (
-							<Badge variant="outline" key={skill}>
-								{skill}
-							</Badge>
-						))}
-					</div>
-				)}
-				{job.status === "pending" && (
+			{job.status === "pending" ? (
+				<div className="flex items-center justify-center h-full w-full">
 					<Loader2 className="animate-spin h-100 w-100 m-auto" />
-				)}
-				{job.status === "failed" && <JobListFailed job={job} />}
-				{job.status === "completed" && (
-					<div>
-						<p>{result?.jobDescription || ""}</p>
-					</div>
-				)}
-			</CardContent>
+					Generating top job based on skills...
+				</div>
+			) : (
+				<>
+					<CardHeader className=" !mb-0">
+						<h1 className="text-xl font-semibold">{result?.jobTitle || ""}</h1>
+					</CardHeader>
+					<CardContent>
+						{!!job.skills.length && (
+							<div className="mb-4 flex gap-2">
+								{job.skills.split(",").map((skill) => (
+									<Badge variant="outline" key={skill}>
+										{skill}
+									</Badge>
+								))}
+							</div>
+						)}
+						{job.status === "failed" && <JobListFailed job={job} />}
+						{job.status === "completed" && (
+							<div>
+								<p>{result?.jobDescription || ""}</p>
+							</div>
+						)}
+					</CardContent>
+				</>
+			)}
 		</Card>
 	);
 }
diff --git a/src/components/JobList/JobList.tsx b/src/components/JobList/JobList.tsx
index d95e2dd..298e941 100644
--- a/src/components/JobList/JobList.tsx
+++ b/src/components/JobList/JobList.tsx
@@ -15,7 +15,7 @@ export default function JobList({ jobs }: JobListProps) {
 				</h1>
 			)}
 			{!jobs && (
-				<div className="h-full flex items-center justify-center">
+				<div className="h-[90svh] flex items-center justify-center">
 					<Loader2 className="animate-spin h-16 w-16 m-auto" />
 				</div>
 			)}