Skip to content

Commit e305e86

Browse files
bergerjohannesbergerjohannes
committed
Add code for new Things API endpoint
1 parent fcb898b commit e305e86

File tree

17 files changed

+1415
-22
lines changed

17 files changed

+1415
-22
lines changed

‎src/app/api/things/[id]/route.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const runtime = "edge";
2+
3+
import { fetchData } from "@/app/dataHelper";
4+
5+
export async function GET(
6+
request: Request,
7+
{ params }: { params: { id: string } }
8+
) {
9+
return fetchData(request, "things/things", params.id);
10+
}

‎src/app/api/things/route.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const runtime = "edge";
2+
3+
import { fetchData } from "@/app/dataHelper";
4+
5+
export async function GET(request: Request) {
6+
return fetchData(request, "things/things", "all");
7+
}

‎src/app/components/documentationPage.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,19 @@ const DocumentationPage: React.FC<DocumentationPageProps> = ({
2929
const theme = url.includes("swapi")
3030
? ThemeOptions.StarWars
3131
: url.includes("pokedex")
32-
? ThemeOptions.Pokemon
33-
: ThemeOptions.RickAndMorty;
32+
? ThemeOptions.Pokemon
33+
: url.includes("things")
34+
? ThemeOptions.Things
35+
: ThemeOptions.RickAndMorty;
3436

3537
const Navbar =
3638
theme === ThemeOptions.StarWars
3739
? require("../swapi/components/navbar").default
3840
: theme === ThemeOptions.Pokemon
39-
? require("../pokedex/components/navbar").default
40-
: require("../rickandmorty/components/navbar").default;
41+
? require("../pokedex/components/navbar").default
42+
: theme === ThemeOptions.Things
43+
? require("../things/components/navbar").default
44+
: require("../rickandmorty/components/navbar").default;
4145

4246
return (
4347
<>

‎src/app/components/endpointView.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,19 @@ const EndpointView: React.FC<EndpointViewProps> = ({ url, method, theme }) => {
2828
return "";
2929
};
3030

31+
const getBackgroundColor = () => {
32+
switch (theme) {
33+
case ThemeOptions.StarWars:
34+
case ThemeOptions.RickAndMorty:
35+
return "bg-black";
36+
default:
37+
return "bg-background-gray";
38+
}
39+
};
40+
3141
return (
3242
<div
33-
className={`${theme === ThemeOptions.StarWars || theme === ThemeOptions.RickAndMorty ? "bg-black" : "bg-background-gray"} text-white p-2 h-12 w-full rounded flex items-center justify-between`}
43+
className={`${getBackgroundColor()} text-white p-2 h-12 w-full rounded flex items-center justify-between`}
3444
>
3545
<div className="flex items-center">
3646
<span>{method}</span>

‎src/app/components/fetchView.tsx

+14-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Code } from "bright";
33
import { draculaAlteredForStarWars } from "../editorThemeStarWars";
44
import { draculaAlteredForPokemon } from "../editorThemePokemon";
55
import { draculaAlteredForRickAndMorty } from "../editorThemeRickAndMorty";
6+
import { draculaAlteredForThings } from "../editorThemeThings";
67
import { ThemeOptions } from "../utils/themeOptions";
78

89
interface CodeViewProps {
@@ -22,14 +23,24 @@ const FetchView: React.FC<CodeViewProps> = ({
2223
theme === ThemeOptions.StarWars
2324
? draculaAlteredForStarWars
2425
: theme === ThemeOptions.Pokemon
25-
? draculaAlteredForPokemon
26-
: draculaAlteredForRickAndMorty;
26+
? draculaAlteredForPokemon
27+
: theme === ThemeOptions.Things
28+
? draculaAlteredForThings
29+
: draculaAlteredForRickAndMorty;
2730
Code.theme = selectedTheme;
2831

2932
return (
3033
<>
3134
<div
32-
className={`${theme === ThemeOptions.StarWars ? "bg-black" : theme === ThemeOptions.Pokemon ? "bg-background-gray" : "bg-black"} text-white p-2 h-12 w-fit rounded flex items-center`}
35+
className={`${
36+
theme === ThemeOptions.StarWars
37+
? "bg-black"
38+
: theme === ThemeOptions.Pokemon
39+
? "bg-background-gray"
40+
: theme === ThemeOptions.Things
41+
? "bg-background-gray"
42+
: "bg-black"
43+
} text-white p-2 h-12 w-fit rounded flex items-center`}
3344
>
3445
{method}
3546
<span className="w-2"></span>

‎src/app/components/responseView.tsx

+20-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Code } from "bright";
33
import { draculaAlteredForStarWars } from "../editorThemeStarWars";
44
import { draculaAlteredForPokemon } from "../editorThemePokemon";
55
import { draculaAlteredForRickAndMorty } from "../editorThemeRickAndMorty";
6+
import { draculaAlteredForThings } from "../editorThemeThings";
67
import { ThemeOptions } from "../utils/themeOptions";
78

89
interface ResponseViewProps {
@@ -15,19 +16,34 @@ const ResponseView: React.FC<ResponseViewProps> = ({ data, theme }) => {
1516
theme === ThemeOptions.StarWars
1617
? draculaAlteredForStarWars
1718
: theme === ThemeOptions.Pokemon
18-
? draculaAlteredForPokemon
19-
: draculaAlteredForRickAndMorty;
19+
? draculaAlteredForPokemon
20+
: theme === ThemeOptions.Things
21+
? draculaAlteredForThings
22+
: draculaAlteredForRickAndMorty;
2023
Code.theme = selectedTheme;
2124

25+
const getBgColor = () => {
26+
switch (theme) {
27+
case ThemeOptions.StarWars:
28+
case ThemeOptions.RickAndMorty:
29+
return "bg-black";
30+
case ThemeOptions.Pokemon:
31+
case ThemeOptions.Things:
32+
return "bg-background-gray";
33+
default:
34+
return "bg-background-gray";
35+
}
36+
};
37+
2238
return (
2339
<>
2440
<div
25-
className={`${theme === ThemeOptions.StarWars || theme === ThemeOptions.RickAndMorty ? "bg-black" : "bg-background-gray"} text-white p-2 h-12 w-fit rounded flex items-center`}
41+
className={`${getBgColor()} text-white p-2 h-12 w-fit rounded flex items-center`}
2642
>
2743
response.json
2844
</div>
2945
<div
30-
className={`${theme === ThemeOptions.StarWars || theme === ThemeOptions.RickAndMorty ? "bg-black" : "bg-background-gray"} rounded-md max-h-96 -mt-2 overflow-scroll`}
46+
className={`${getBgColor()} rounded-md max-h-96 -mt-2 overflow-scroll`}
3147
>
3248
<Code lang="json" lineNumbers>
3349
<pre>{JSON.stringify(data, null, 2)}</pre>

‎src/app/components/sidebarMenu.tsx

+52-8
Original file line numberDiff line numberDiff line change
@@ -45,19 +45,55 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({
4545
)
4646
)?.id || "Information";
4747

48-
const theme = basePath.includes("swapi") ? "swapi" : "pokemon";
48+
const theme = basePath.includes("swapi")
49+
? "swapi"
50+
: basePath.includes("things")
51+
? "things"
52+
: basePath.includes("rickandmorty")
53+
? "rickandmorty"
54+
: "pokemon";
55+
56+
const getThemeColors = (theme: string) => {
57+
switch (theme) {
58+
case "swapi":
59+
return {
60+
bg: "bg-black",
61+
hover: "bg-sw-yellow",
62+
decoration: "sw-yellow",
63+
text: "text-white",
64+
};
65+
66+
default:
67+
return {
68+
bg: "bg-gray-100",
69+
hover: "bg-pokemon-yellow",
70+
decoration: "pokemon-blue",
71+
text: "",
72+
};
73+
}
74+
};
75+
76+
const themeColors = getThemeColors(theme);
4977

5078
return (
51-
<div
52-
className={`w-fit min-w-48 max-w-80 p-2 text-sm ${theme === "swapi" ? "bg-black" : "bg-gray-100"}`}
53-
>
79+
<div className={`w-fit min-w-48 max-w-80 p-2 text-sm ${themeColors.bg}`}>
5480
{categories.map((category) => (
5581
<div key={category.id} className="mb-1">
5682
<Link
57-
href={`/${basePath}/documentation/${category.endpoints ? formatEndpointId(category.endpoints[0].id) : ""}`}
83+
href={`/${basePath}/documentation/${
84+
category.endpoints
85+
? formatEndpointId(category.endpoints[0].id)
86+
: ""
87+
}`}
5888
>
5989
<div
60-
className={`cursor-pointer px-2 py-1 mb-1 rounded-lg hover:bg-${theme === "swapi" ? "sw-yellow" : "pokemon-yellow"} ${selectedCategory === category.id ? `underline decoration-2 underline-offset-2 decoration-${theme === "swapi" ? "sw-yellow" : "pokemon-blue"}` : ""} ${theme === "swapi" ? "text-white" : ""}`}
90+
className={`cursor-pointer px-2 py-1 mb-1 rounded-lg hover:${
91+
themeColors.hover
92+
} ${
93+
selectedCategory === category.id
94+
? `underline decoration-2 underline-offset-2 decoration-${themeColors.decoration}`
95+
: ""
96+
} ${themeColors.text}`}
6197
>
6298
{category.id}
6399
</div>
@@ -66,11 +102,19 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({
66102
<div className="pl-2">
67103
{category.endpoints.map((endpoint) => (
68104
<Link
69-
href={`/${basePath}/documentation/${formatEndpointId(endpoint.id)}`}
105+
href={`/${basePath}/documentation/${formatEndpointId(
106+
endpoint.id
107+
)}`}
70108
key={`link-${endpoint.id}`}
71109
>
72110
<div
73-
className={`cursor-pointer px-2 py-1 mb-1 rounded-lg hover:bg-${theme === "swapi" ? "sw-yellow" : "pokemon-yellow"} ${selectedEndpoint === formatEndpointId(endpoint.id) ? `underline decoration-2 underline-offset-2 decoration-${theme === "swapi" ? "sw-yellow" : "pokemon-blue"}` : ""} ${theme === "swapi" ? "text-white" : ""}`}
111+
className={`cursor-pointer px-2 py-1 mb-1 rounded-lg hover:${
112+
themeColors.hover
113+
} ${
114+
selectedEndpoint === formatEndpointId(endpoint.id)
115+
? `underline decoration-2 underline-offset-2 decoration-${themeColors.decoration}`
116+
: ""
117+
} ${themeColors.text}`}
74118
>
75119
{endpoint.id}
76120
</div>

‎src/app/components/valuesView.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,17 @@ const ValuesView: React.FC<ValuesViewProps> = ({
2121
{data.map((item, index) => (
2222
<Link
2323
key={index}
24-
href={`/${basePath}/documentation/${endpoint}/${item.name ? item.name : item.id}`}
25-
className={`${theme === ThemeOptions.StarWars ? "bg-black" : "bg-background-gray"} text-white p-2 rounded flex items-center justify-center hover:bg-pokemon-yellow hover:text-background-gray`}
24+
href={`/${basePath}/documentation/${endpoint}/${
25+
// TODO: generally use id for all APIs
26+
theme === ThemeOptions.Things
27+
? item.id
28+
: item.name
29+
? item.name
30+
: item.id
31+
}`}
32+
className={`${
33+
theme === ThemeOptions.StarWars ? "bg-black" : "bg-background-gray"
34+
} text-white p-2 rounded flex items-center justify-center hover:bg-black hover:text-white`}
2635
>
2736
<span className="font-bold">
2837
{index + 1}.{" "}

0 commit comments

Comments
 (0)