feat(app): add OpenAPI fetcher (#397)

apps/app/.env.local

@@ -1,2 +1,2 @@
-NEXT_PUBLIC_API_URL=http://api.devfaq.localhost:3002
+NEXT_PUBLIC_API_URL=https://staging-api.devfaq.pl
 NEXT_PUBLIC_APP_URL=http://app.devfaq.localhost:3000

apps/app/package.json

@@ -17,6 +17,7 @@
 		"@next/font": "13.0.6",
 		"client-only": "0.0.1",
 		"next": "13.0.4",
+		"openapi-typescript-fetch": "1.1.3",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"tailwind-merge": "1.8.0"
@@ -39,6 +40,7 @@
 		"eslint": "8.29.0",
 		"eslint-config-devfaq": "workspace:*",
 		"eslint-plugin-storybook": "^0.6.7",
+		"openapi-types": "workspace:*",
 		"postcss": "^8.4.19",
 		"postcss-loader": "^7.0.2",
 		"storybook": "^7.0.0-alpha.54",

apps/app/src/app/foo/page.tsx

@@ -1,32 +1,21 @@
 import { QuestionItem } from "../../components/QuestionItem/QuestionItem";
+import { getAllQuestions } from "../../services/questions.service";
+
+export default async function FooPage() {
+	const { data } = await getAllQuestions({ limit: 20 });
 
-export default function FooPage() {
 	return (
 		<div className="flex flex-col gap-y-10 p-10">
-			<QuestionItem
-				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
-				nasłuchuje?"
-				level="junior"
-				creationDate={new Date("2023-01-01")}
-				votes={1}
-				voted={false}
-			/>
-			<QuestionItem
-				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
-				nasłuchuje?"
-				level="mid"
-				creationDate={new Date("2023-01-01")}
-				votes={2}
-				voted={true}
-			/>
-			<QuestionItem
-				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
-				nasłuchuje?"
-				level="senior"
-				creationDate={new Date("2023-01-01")}
-				votes={3}
-				voted={true}
-			/>
+			{data.data.map(({ id, question, _levelId, acceptedAt, votesCount }) => (
+				<QuestionItem
+					key={id}
+					title={question}
+					level={_levelId as "junior"}
+					creationDate={new Date(acceptedAt || "")}
+					votes={votesCount}
+					voted={id % 2 === 0}
+				/>
+			))}
 		</div>
 	);
 }

apps/app/src/lib/fetcher.ts

@@ -0,0 +1,8 @@
+import { Fetcher } from "openapi-typescript-fetch";
+import type { paths } from "openapi-types";
+
+export const fetcher = Fetcher.for<paths>();
+
+fetcher.configure({
+	baseUrl: process.env.NEXT_PUBLIC_API_URL,
+});

apps/app/src/services/questions.service.ts

@@ -0,0 +1,3 @@
+import { fetcher } from "../lib/fetcher";
+
+export const getAllQuestions = fetcher.path("/questions").method("get").create();

packages/openapi-types/index.ts

@@ -0,0 +1 @@
+export * from "./types";

packages/openapi-types/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "openapi-types",
+	"version": "0.0.0",
+	"main": "index.ts",
+	"types": "index.ts",
+	"license": "MIT",
+	"scripts": {
+		"generate": "openapi-typescript https://staging-api.devfaq.pl/documentation/json --output types.ts"
+	},
+	"devDependencies": {
+		"openapi-typescript": "6.1.0",
+		"tsconfig": "workspace:*"
+	}
+}

packages/openapi-types/tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"extends": "tsconfig/base.json"
+}

packages/openapi-types/types.ts

@@ -0,0 +1,246 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+	"/oauth/github/login": {
+		get: {
+			responses: {
+				/** @description Default Response */
+				200: never;
+			};
+		};
+	};
+	"/oauth/github": {
+		get: {
+			responses: {
+				/** @description Default Response */
+				200: never;
+			};
+		};
+	};
+	"/auth/me": {
+		/** @description Get currently logged-in user */
+		get: {
+			/** @description Get currently logged-in user */
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": {
+							data: {
+								/** Format: date-time */
+								createdAt: string;
+								/** Format: date-time */
+								updatedAt: string;
+								keepMeSignedIn: boolean;
+								/** Format: date-time */
+								validUntil: string;
+								_user: {
+									id: number;
+									email: string;
+									firstName: string | null;
+									lastName: string | null;
+									_roleId: string;
+									/** Format: date-time */
+									createdAt: string;
+									/** Format: date-time */
+									updatedAt: string;
+									socialLogin: {
+										[key: string]: (string | number) | undefined;
+									};
+								};
+							};
+						};
+					};
+				};
+			};
+		};
+		/** @description Log out */
+		delete: {
+			/** @description Log out */
+			responses: {
+				/** @description Default Response */
+				204: {
+					content: {
+						"application/json": Record<string, never>;
+					};
+				};
+			};
+		};
+	};
+	"/questions": {
+		get: {
+			parameters?: {
+				query?: {
+					category?: string;
+					status?: string;
+					level?: string;
+					limit?: number;
+					offset?: number;
+					orderBy?: "acceptedAt" | "level" | "votesCount";
+					order?: "asc" | "desc";
+				};
+			};
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": {
+							data: {
+								id: number;
+								question: string;
+								_categoryId: string;
+								_levelId: string;
+								_statusId: string;
+								/** Format: date-time */
+								acceptedAt?: string;
+								votesCount: number;
+								currentUserVotedOn: boolean;
+							}[];
+							meta: {
+								total: number;
+							};
+						};
+					};
+				};
+			};
+		};
+		post: {
+			requestBody: {
+				content: {
+					"application/json": {
+						question: string;
+						level: string;
+						category: string;
+					};
+				};
+			};
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": {
+							data: {
+								id: number;
+								question: string;
+								_categoryId: string;
+								_levelId: string;
+								_statusId: string;
+								/** Format: date-time */
+								acceptedAt?: string;
+								votesCount: number;
+								currentUserVotedOn: boolean;
+							};
+						};
+					};
+				};
+			};
+		};
+	};
+	"/questions/{id}": {
+		get: {
+			parameters: {
+				path: {
+					id: number;
+				};
+			};
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": {
+							data: {
+								id: number;
+								question: string;
+								_categoryId: string;
+								_levelId: string;
+								_statusId: string;
+								/** Format: date-time */
+								acceptedAt?: string;
+								votesCount: number;
+								currentUserVotedOn: boolean;
+							};
+						};
+					};
+				};
+			};
+		};
+		delete: {
+			parameters: {
+				path: {
+					id: number;
+				};
+			};
+			responses: {
+				/** @description Default Response */
+				200: never;
+			};
+		};
+		patch: {
+			parameters: {
+				path: {
+					id: number;
+				};
+			};
+			requestBody: {
+				content: {
+					"application/json": {
+						question: string;
+						level: string;
+						category: string;
+						status: string;
+					};
+				};
+			};
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": {
+							data: {
+								id: number;
+								question: string;
+								_categoryId: string;
+								_levelId: string;
+								_statusId: string;
+								/** Format: date-time */
+								acceptedAt?: string;
+								votesCount: number;
+								currentUserVotedOn: boolean;
+							};
+						};
+					};
+				};
+			};
+		};
+	};
+	"/": {
+		get: {
+			responses: {
+				/** @description Default Response */
+				200: {
+					content: {
+						"application/json": string;
+					};
+				};
+			};
+		};
+	};
+}
+
+export type webhooks = Record<string, never>;
+
+export interface components {
+	schemas: {};
+	responses: never;
+	parameters: never;
+	requestBodies: never;
+	headers: never;
+	pathItems: never;
+}
+
+export type external = Record<string, never>;
+
+export type operations = Record<string, never>;