fix cors and add automatically generated api client

schafkopf/api/api.py

@@ -19,7 +19,8 @@ def hello() -> str:
 app.add_middleware(
     CORSMiddleware,
     allow_origins=[
-        "https://schafkopf.lukas-bernhard.de",  # your frontend domain
+        "https://schafkopf.lukas-bernhard.de",
+        "http://localhost:3000",
     ],
     allow_credentials=True,
     allow_methods=["*"],

web/openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.9.0"
+  }
+}

web/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@hey-api/openapi-ts": "^0.46.2",
+    "axios": "^1.6.7",
     "@mui/material": "^6.1.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -16,7 +18,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "swagger-typescript-api": "^13.0.22",
     "typescript": "^5.6.3",
     "web-vitals": "^2.1.0"
   },
@@ -25,7 +26,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "generate-api": "swagger-typescript-api -p http://localhost:8000/openapi.json -o src/api/"
+    "generate-api": "openapi-ts --input http://localhost:8000/openapi.json --output ./src/client --client axios"
   },
   "eslintConfig": {
     "extends": [

web/src/App.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
-import {Api} from "./api/Api";
+import { OpenAPI, helloGet } from './client';
+
+OpenAPI.BASE = process.env.REACT_APP_API_URL!;
 
 const App: React.FC = () => {
 
@@ -10,7 +12,7 @@ const App: React.FC = () => {
         Welcome to My Material App
       </Typography>
       <Button variant="contained" color="primary" onClick={() => {
-          new Api().helloGet().then(msg => console.log(msg))
+         helloGet().then(msg => console.log("data", msg)).catch(e => console.log("error", e))
       }}>
         Hello Material-UI
       </Button>

web/src/client/core/ApiError.ts

@@ -0,0 +1,21 @@
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+
+export class ApiError extends Error {
+	public readonly url: string;
+	public readonly status: number;
+	public readonly statusText: string;
+	public readonly body: unknown;
+	public readonly request: ApiRequestOptions;
+
+	constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
+		super(message);
+
+		this.name = 'ApiError';
+		this.url = response.url;
+		this.status = response.status;
+		this.statusText = response.statusText;
+		this.body = response.body;
+		this.request = request;
+	}
+}

web/src/client/core/ApiRequestOptions.ts

@@ -0,0 +1,13 @@
+export type ApiRequestOptions = {
+	readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
+	readonly url: string;
+	readonly path?: Record<string, unknown>;
+	readonly cookies?: Record<string, unknown>;
+	readonly headers?: Record<string, unknown>;
+	readonly query?: Record<string, unknown>;
+	readonly formData?: Record<string, unknown>;
+	readonly body?: any;
+	readonly mediaType?: string;
+	readonly responseHeader?: string;
+	readonly errors?: Record<number | string, string>;
+};

web/src/client/core/ApiResult.ts

@@ -0,0 +1,7 @@
+export type ApiResult<TData = any> = {
+	readonly body: TData;
+	readonly ok: boolean;
+	readonly status: number;
+	readonly statusText: string;
+	readonly url: string;
+};