Got rid of the "cpu" in the api paths

Fixed some bugs with selector tips and model names.

README.md

@@ -1,10 +1,8 @@
-# PrimeCPU
+![PrimeCPU logo](./docs/banner.png)
 
 A simple [web app](https://prime.pkozak.org) for comparing cpus. No bloat, just quick and easy comparison.  
 This project was build with backwards compatibility in mind, so that even 12-year-old cpus can be compared.
 
-![Webapp with two inputs for cpu model with a blue to purple gradient as background](./docs/thumbnail.png)
-
 ## How does it work?
 
 The data is scraped from each manufacturer's website. The data is then cached in a redis database, to ensure blazing

package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.14",
-    "@types/node": "18.16.3",
-    "@types/react": "18.2.5",
-    "@types/react-dom": "18.2.3",
+    "@types/node": "20.1.4",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
     "@upstash/redis": "^1.20.6",
     "@vercel/analytics": "^1.0.1",
     "@vercel/og": "^0.5.4",
@@ -31,12 +31,12 @@
     "@typescript-eslint/parser": "^5.59.2",
     "autoprefixer": "^10.4.14",
     "dotenv": "^16.0.3",
-    "eslint": "8.39.0",
+    "eslint": "8.40.0",
     "eslint-config-next": "^13.4.0",
     "eslint-plugin-tailwindcss": "^3.11.0",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
     "vitest": "^0.31.0"
   }

src/app/api/cpu/amd/route.ts → src/app/api/amd/route.ts

@@ -1,4 +1,4 @@
-import scrapeAMD from "../../../../util/scrapers/amd";
+import scrapeAMD from "../../../util/scrapers/amd";
 import { NextResponse } from "next/server";
 import { Redis } from "@upstash/redis";
 

src/app/api/cpu/intel/route.ts → src/app/api/intel/route.ts

@@ -1,5 +1,5 @@
-import { normaliseIntel } from "../../../../util/formatting";
-import scrapeIntel from "../../../../util/scrapers/intel";
+import { normaliseIntel } from "../../../util/formatting";
+import scrapeIntel from "../../../util/scrapers/intel";
 import { NextResponse } from "next/server";
 import { Redis } from "@upstash/redis";
 

src/app/api/cpu/search/route.ts → src/app/api/search/route.ts

@@ -1,5 +1,5 @@
-import { beautifyNames } from "../../../../util/formatting";
-import { AMD_PRODUCTS, INTEL_PRODUCTS } from "../../../../util/products";
+import { beautifyNames } from "../../../util/formatting";
+import { AMD_PRODUCTS, INTEL_PRODUCTS } from "../../../util/products";
 import { NextResponse } from "next/server";
 
 export const runtime = "edge";
@@ -12,7 +12,6 @@ export async function GET(req: Request) {
 	// Can assert types - null checks are still there
 	let q = searchParams.get("q") as string;
 	let p = searchParams.get("p") as string;
-
 	if (p === null) p = "1";
 	const pInt = parseInt(p) < 1 ? 1 : parseInt(p) - 1; //The app starts at p = 1, but we start at 0
 	if (q === null) q = "";

src/app/api/cpu/tip/route.ts → src/app/api/tip/route.ts

@@ -1,4 +1,4 @@
-import { AMD_PRODUCTS, INTEL_PRODUCTS } from "../../../../util/products";
+import { AMD_PRODUCTS, INTEL_PRODUCTS } from "../../../util/products";
 import { NextResponse } from "next/server";
 
 export const runtime = "edge";

src/app/page.tsx

@@ -55,7 +55,7 @@ export const generateMetadata = ({ searchParams }: { searchParams: { f: string;
 const getInitialSelection = (param: string): Selection => {
 	if (param === undefined) return { model: "", manufacturer: "intel", state: "idle" };
 	const [manufacturer, model] = splitFirst(param, "-").map((s) => decodeURI(s));
-	return { model, manufacturer: manufacturer as "intel" | "amd", state: "loading" };
+	return { model: beautifyNames(model), manufacturer: manufacturer as "intel" | "amd", state: "loading" };
 };
 
 export default function Page({ searchParams }: { searchParams: { f: string; s: string } }) {

src/components/navbar.tsx

@@ -5,7 +5,7 @@ const Navbar = () => (
 	<nav className="h-16 w-full bg-[#252525]/20 backdrop-blur-sm">
 		<div className="mx-auto flex h-full w-full items-center justify-between px-4 text-white">
 			<div className="flex items-center">
-				<Link href="/">
+				<Link href="/" title="PrimeCPU logo">
 					<LogoIcon className="h-5/6 w-48" />
 				</Link>
 			</div>

src/components/search.tsx

@@ -14,7 +14,7 @@ const Search = ({ initialQuery }: { initialQuery: string }) => {
 	const { data, size, setSize, isLoading } = useSWRInfinite<{
 		names: { model: string; manufacturer: Manufacturer }[];
 		remainingItems: number;
-	}>((index) => `/api/cpu/search?q=${query}&p=${index + 1}`, fetcher);
+	}>((index) => `/api/search?q=${query}&p=${index + 1}`, fetcher);
 
 	const remainingItems = data?.[data.length - 1]?.remainingItems || 0;
 
@@ -61,7 +61,7 @@ const Search = ({ initialQuery }: { initialQuery: string }) => {
 };
 
 const CPUItem = ({ model, manufacturer }: { model: string; manufacturer: Manufacturer }) => {
-	const { data, error, isLoading } = useSWR<CPU>(`/api/cpu/${manufacturer}?model=${model}`, fetcher, {});
+	const { data, error, isLoading } = useSWR<CPU>(`/api/${manufacturer}?model=${model}`, fetcher, {});
 
 	return (
 		<div

src/components/selector.tsx

@@ -77,20 +77,19 @@ const Selector = ({ setCPU, urlId, initialSelection }: SelectorProps) => {
 
 			// Start a new search
 			searchRef.current = window.setTimeout(async () => {
-				await fetch(`/api/cpu/tip?manufacturer=${selection.manufacturer}&model=${tempModel}`)
-					.catch(() => setSearchResults([]))
-					.then((res) => res?.json())
-					.then((res: string[]) => {
-						// Sort the results by length. Make sure the exact match is first
-						// Check for the exact match first
-						const exactMatch = res.findIndex((r) => r.toLowerCase() === tempModel.toLowerCase());
-						if (exactMatch !== -1) {
-							const sorted = [...res.splice(exactMatch, 1), ...res.sort((a, b) => a.length - b.length)];
-							setSearchResults(sorted);
-						} else {
-							setSearchResults(res.sort((a, b) => a.length - b.length));
-						}
-					});
+				const res = await fetch(`/api/tip?manufacturer=${selection.manufacturer}&model=${tempModel}`);
+
+				if (!res.ok) return setSearchResults([]);
+				const tips = (await res.json()) as string[];
+				// Sort the results by length. Make sure the exact match is first
+				// Check for the exact match first
+				const exactMatch = tips.findIndex((r) => r.toLowerCase() === tempModel.toLowerCase());
+				if (exactMatch !== -1) {
+					const sorted = [...tips.splice(exactMatch, 1), ...tips.sort((a, b) => a.length - b.length)];
+					setSearchResults(sorted);
+				} else {
+					setSearchResults(tips.sort((a, b) => a.length - b.length));
+				}
 			}, 350);
 		}
 	}, [selection, tempModel]);
@@ -183,6 +182,7 @@ const Selector = ({ setCPU, urlId, initialSelection }: SelectorProps) => {
 								className="cursor-pointer rounded-md p-2 hover:bg-gray-300 focus:bg-gray-200"
 								onClick={() => {
 									setTempModel(result);
+									setSelection({ model: result, state: "loading" });
 									setShowResults(false);
 								}}
 							>

src/styles/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html{
+    background: #333;
+}
+
 html::-webkit-scrollbar {
     width: 5px;
     height: 5px;

src/util/fetchCPU.ts

@@ -6,7 +6,7 @@ import type { Redis } from "@upstash/redis";
 
 const fetchCPU = async (manufacturer: Manufacturer, model: string, noCache = false) =>
 	new Promise<Result>(async (resolve) => {
-		const response = await fetch(`/api/cpu/${manufacturer.toLowerCase()}?model=${model}&${noCache ? "no-cache" : ""}`);
+		const response = await fetch(`/api/${manufacturer.toLowerCase()}?model=${model}&${noCache ? "no-cache" : ""}`);
 
 		if (!response.ok) {
 			let errorText = await response.text();