Skip to content

Commit fd8d1d5

Browse files
jefflloydjefflloyd
authored
Merge pull request #77 from warpdotdev/jeff/nextjs-16-upgrade
Upgrade to NextJS 16
2 parents 0d6aa7a + 35859e5 commit fd8d1d5

17 files changed

Lines changed: 1502 additions & 836 deletions

‎.eslintrc.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎components/DarkModeToggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { MoonIcon } from "./icons/moon";
33
import { SunIcon } from "./icons/sun";
44

55
const DarkModeToggle = () => {
6-
let [isDarkMode, setIsDarkMode] = useState(true);
6+
const [isDarkMode, setIsDarkMode] = useState(true);
77
useEffect(() => {
88
setIsDarkMode(document.documentElement.classList.contains("dark"));
99
}, []);

‎components/DownloadWarpCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function DownloadWarpCard() {
99
href="https://warp.dev"
1010
target="_blank"
1111
rel="noreferrer"
12-
onClick={(e) => {
12+
onClick={() => {
1313
gtag.event({
1414
action: "click_on_warp_logo",
1515
category: "Click on Warp logo",
@@ -25,15 +25,15 @@ export default function DownloadWarpCard() {
2525
<div className="border-l border-gray-400" />
2626
<div className="pr-4"></div>
2727
<div className="self-center">
28-
<body className="dark:text-white text-xs pb-1">
28+
<p className="dark:text-white text-xs pb-1">
2929
By Warp, the intelligent terminal with AI and your dev team&apos;s knowledge built-in.
30-
</body>
30+
</p>
3131
<div className="dark:text-white text-xs underline">
3232
<a
3333
href="https://app.warp.dev/get_warp"
3434
target="_blank"
3535
rel="noreferrer"
36-
onClick={(e) => {
36+
onClick={() => {
3737
gtag.event({
3838
action: "click_on_download_warp",
3939
category: "Click on Download Warp button",

‎components/footer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Footer = () => (
77
<a
88
href="https://www.twitter.com/warpdotdev"
99
className="text-icon-light dark:text-icon-dark hover:opacity-60"
10-
onClick={(e) => {
10+
onClick={() => {
1111
gtag.event({
1212
action: "click_on_footer_twitter",
1313
category: "Click on Twitter",
@@ -29,7 +29,7 @@ const Footer = () => (
2929
<a
3030
href="https://github.com/warpdotdev/commands.dev"
3131
className="text-icon-light dark:text-icon-dark hover:opacity-60"
32-
onClick={(e) => {
32+
onClick={() => {
3333
gtag.event({
3434
action: "click_on_footer_github",
3535
category: "Click on GitHub",
@@ -58,7 +58,7 @@ const Footer = () => (
5858
<Link
5959
href="https://www.warp.dev"
6060
className="underline hover:opacity-60"
61-
onClick={(e) => {
61+
onClick={() => {
6262
gtag.event({
6363
action: "click_on_footer_landing_page",
6464
category: "Click on Landing Page",

‎components/navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import CustomSearchBox from "./search/CustomSearchBox";
88
import * as gtag from "../lib/gtag";
99

1010
export default function NavBar() {
11-
let [mobileSearchBoxOpen, setMobileSearchBoxOpen] = useState(false);
11+
const [mobileSearchBoxOpen, setMobileSearchBoxOpen] = useState(false);
1212
const mobileSearchButton = useRef<HTMLButtonElement>(null);
1313
useEffect(() => {
1414
if (!!mobileSearchBoxOpen) {
@@ -86,7 +86,7 @@ export default function NavBar() {
8686
target="_blank"
8787
rel="noreferrer"
8888
className="hover:opacity-60 md:pr-7 pr-2"
89-
onClick={(_) => {
89+
onClick={() => {
9090
gtag.event({
9191
action: "click_on_navbar_github",
9292
category: "Click on GitHub",

‎components/search/CustomSearchBox.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { useSearchBox } from 'react-instantsearch';
2-
import { Dispatch, SetStateAction, useEffect, useState } from "react";
2+
import React, { useEffect, useState } from "react";
33
import { SearchIcon } from "../icons/search";
44
import { useHotkeys } from "react-hotkeys-hook";
55
import { useRouter } from "next/router";
66

77
interface SearchBoxProps {
8-
refine: Dispatch<SetStateAction<string>>;
8+
refine: (value: string) => void;
99
}
1010

1111
function SearchBox({ refine }: SearchBoxProps) {
12-
let [searchBarState, setSearchBarState] = useState("");
12+
const [searchBarState, setSearchBarState] = useState("");
1313
useHotkeys("ctrl+k", () => {
1414
if (document != null) {
15-
let searchBar = document.querySelector(
15+
const searchBar = document.querySelector(
1616
"#algolia_search"
1717
) as HTMLInputElement;
1818
if (searchBar != null) {
@@ -48,14 +48,14 @@ function SearchBox({ refine }: SearchBoxProps) {
4848
);
4949
}
5050

51-
function connectSearchBox(Component: any) {
52-
const SearchBox = (props: any) => {
53-
const data = useSearchBox(props);
51+
function connectSearchBox(Component: React.ComponentType<SearchBoxProps>) {
52+
const ConnectedSearchBox = () => {
53+
const data = useSearchBox();
5454

55-
return <Component {...props} {...data} />;
55+
return <Component refine={data.refine} />;
5656
};
5757

58-
return SearchBox;
58+
return ConnectedSearchBox;
5959
}
6060

6161
export default connectSearchBox(SearchBox);

‎components/search/MobileSearchBox.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { useSearchBox } from 'react-instantsearch';
2-
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
2+
import React, { useEffect, useState } from "react";
33
import { CancelIcon } from "../icons/cancel";
44
import { useRouter } from "next/router";
55

66
interface MobileSearchBoxProps {
7-
refine: Dispatch<SetStateAction<string>>;
7+
refine: (value: string) => void;
88
onCloseCallback: () => void;
99
}
1010

1111
function SearchBox({
1212
refine,
1313
onCloseCallback,
1414
}: MobileSearchBoxProps) {
15-
let [searchBarState, setSearchBarState] = useState("");
15+
const [searchBarState, setSearchBarState] = useState("");
1616
useEffect(() => {
17-
let searchBar = document.querySelector(
17+
const searchBar = document.querySelector(
1818
"#algolia_search"
1919
) as HTMLInputElement;
2020
if (searchBar != null) {
@@ -53,14 +53,18 @@ function SearchBox({
5353
);
5454
}
5555

56-
function connectSearchBox(Component: any) {
57-
const SearchBox = (props: any) => {
58-
const data = useSearchBox(props);
56+
interface ConnectedMobileSearchBoxProps {
57+
onCloseCallback: () => void;
58+
}
59+
60+
function connectSearchBox(Component: React.ComponentType<MobileSearchBoxProps>) {
61+
const ConnectedSearchBox = (props: ConnectedMobileSearchBoxProps) => {
62+
const data = useSearchBox();
5963

60-
return <Component {...props} {...data} />;
64+
return <Component refine={data.refine} onCloseCallback={props.onCloseCallback} />;
6165
};
6266

63-
return SearchBox;
67+
return ConnectedSearchBox;
6468
}
6569

6670
export default connectSearchBox(SearchBox);

‎eslint.config.mjs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import eslintConfigPrettier from "eslint-config-prettier";
2+
import tseslint from "typescript-eslint";
3+
import reactPlugin from "eslint-plugin-react";
4+
import reactHooksPlugin from "eslint-plugin-react-hooks";
5+
6+
export default [
7+
{
8+
ignores: [".next/**", "node_modules/**", "lib/*.js"],
9+
},
10+
...tseslint.configs.recommended,
11+
{
12+
files: ["**/*.{js,jsx,ts,tsx}"],
13+
plugins: {
14+
react: reactPlugin,
15+
"react-hooks": reactHooksPlugin,
16+
},
17+
settings: {
18+
react: {
19+
version: "detect",
20+
},
21+
},
22+
rules: {
23+
"react-hooks/rules-of-hooks": "error",
24+
"react-hooks/exhaustive-deps": "warn",
25+
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
26+
},
27+
},
28+
eslintConfigPrettier,
29+
];

‎lib/workflows.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export function getWorkflowData(id: string): Workflow | undefined {
2121
}
2222

2323
export function getAllWorkflowCategories() {
24-
let categories = new Set<string>();
24+
const categories = new Set<string>();
2525
getSortedWorkflowsData().forEach((workflow) => {
2626
if (workflow.tags != undefined) {
27-
workflow.tags.forEach((tag) => categories.add(tag));
27+
workflow.tags.forEach((tag) => categories.add(tag.toLowerCase()));
2828
}
2929
});
3030

@@ -38,7 +38,10 @@ export function getAllWorkflowCategories() {
3838
}
3939

4040
export function getWorkflowsByCategory(category: string): Workflow[] {
41+
const lowerCategory = category.toLowerCase();
4142
return Array.from(WORKFLOWS.values()).filter(
42-
(workflow) => workflow.tags != undefined && workflow.tags.includes(category)
43+
(workflow) =>
44+
workflow.tags != undefined &&
45+
workflow.tags.some((tag) => tag.toLowerCase() === lowerCategory)
4346
);
4447
}

‎next-env.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
import "./.next/types/routes.d.ts";
34

45
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
6+
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

0 commit comments

Comments
 (0)