From aaa8a0373bdd3b8de081751443d28655a6724261 Mon Sep 17 00:00:00 2001 From: Pamella Bezerra Date: Tue, 14 May 2024 16:18:57 -0300 Subject: [PATCH 01/10] Set up openapi-ts --- .eslintignore | 1 + .eslintrc.js | 11 +++++++ .pre-commit-config.yaml | 6 ++++ Makefile | 4 +++ backend/common/serializers.py | 5 +++ backend/common/views.py | 40 +++++++++++------------ frontend/js/pages/Home.tsx | 22 ++++++------- frontend/js/pages/__tests__/Home.spec.tsx | 23 +++++-------- openapi-ts.config.ts | 11 +++++++ package.json | 4 ++- 10 files changed, 81 insertions(+), 46 deletions(-) create mode 100644 backend/common/serializers.py create mode 100644 openapi-ts.config.ts diff --git a/.eslintignore b/.eslintignore index 575c8b05..176153ce 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ frontend/bundles/ frontend/webpack_bundles/ +frontend/js/api/ diff --git a/.eslintrc.js b/.eslintrc.js index 7b440389..117861ac 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,4 +46,15 @@ module.exports = { version: "detect", }, }, + overrides: [ + { + files: ["openapi-ts.config.ts"], + rules: { + "import/no-extraneous-dependencies": [ + "error", + { devDependencies: true }, + ], + }, + }, + ], }; diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 27e7c8b5..3e650eff 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -64,3 +64,9 @@ repos: language: system files: ^backend/ pass_filenames: false + - id: frontend-api + name: frontend-api-local + entry: npm run openapi-ts + language: system + files: backend/schema\.yml$ + pass_filenames: false diff --git a/Makefile b/Makefile index 1cc07e67..2e44504d 100644 --- a/Makefile +++ b/Makefile @@ -20,6 +20,7 @@ docker_setup: docker compose build --no-cache backend docker compose run --rm backend python manage.py spectacular --color --file schema.yml docker compose run frontend npm install + docker compose run --rm frontend npm run openapi-ts docker_test: docker compose run backend python manage.py test $(ARG) --parallel --keepdb @@ -51,3 +52,6 @@ docker_backend_shell: docker_backend_update_schema: docker compose run --rm backend python manage.py spectacular --color --file schema.yml + +docker_frontend_update_api: + docker compose run --rm frontend npm run openapi-ts diff --git a/backend/common/serializers.py b/backend/common/serializers.py new file mode 100644 index 00000000..ea75a475 --- /dev/null +++ b/backend/common/serializers.py @@ -0,0 +1,5 @@ +from rest_framework import serializers + + +class MessageSerializer(serializers.Serializer): + message = serializers.CharField() diff --git a/backend/common/views.py b/backend/common/views.py index 6e7b23f8..d8793769 100644 --- a/backend/common/views.py +++ b/backend/common/views.py @@ -1,35 +1,34 @@ from django.views import generic -from drf_spectacular.utils import OpenApiExample, OpenApiResponse, extend_schema +from drf_spectacular.utils import OpenApiExample, extend_schema from rest_framework import status, viewsets from rest_framework.decorators import action from rest_framework.permissions import AllowAny from rest_framework.response import Response +from .serializers import MessageSerializer + class IndexView(generic.TemplateView): template_name = "common/index.html" class RestViewSet(viewsets.ViewSet): + serializer_class = MessageSerializer + @extend_schema( summary="Check REST API", description="This endpoint checks if the REST API is working.", - responses={ - 200: OpenApiResponse( - description="Successful Response", - examples=[ - OpenApiExample( - "Example Response", - value={ - "result": "This message comes from the backend. " - "If you're seeing this, the REST API is working!" - }, - response_only=True, - ) - ], + examples=[ + OpenApiExample( + "Successful Response", + value={ + "message": "This message comes from the backend. " + "If you're seeing this, the REST API is working!" + }, + response_only=True, ) - }, + ], methods=["GET"], ) @action( @@ -39,10 +38,11 @@ class RestViewSet(viewsets.ViewSet): url_path="rest-check", ) def rest_check(self, request): - return Response( - { - "result": "This message comes from the backend. " + serializer = self.serializer_class( + data={ + "message": "This message comes from the backend. " "If you're seeing this, the REST API is working!" - }, - status=status.HTTP_200_OK, + } ) + serializer.is_valid(raise_exception=True) + return Response(serializer.data, status=status.HTTP_200_OK) diff --git a/frontend/js/pages/Home.tsx b/frontend/js/pages/Home.tsx index 6a7da7d7..095ac7f7 100644 --- a/frontend/js/pages/Home.tsx +++ b/frontend/js/pages/Home.tsx @@ -1,20 +1,20 @@ import { useState, useEffect } from "react"; import Button from "react-bootstrap/Button"; -import { useDispatch, useSelector } from "react-redux"; import DjangoImgSrc from "../../assets/images/django-logo-negative.png"; -import { AppDispatch, RootState } from "../store"; -import { fetchRestCheck } from "../store/rest_check"; +import { RestService } from "../api"; const Home = () => { - const dispatch: AppDispatch = useDispatch(); - const restCheck = useSelector((state: RootState) => state.restCheck); - useEffect(() => { - const action = fetchRestCheck(); - dispatch(action); - }, [dispatch]); - const [showBugComponent, setShowBugComponent] = useState(false); + const [restCheck, setRestCheck] = + useState>>(); + + useEffect(() => { + async function onFetchRestCheck() { + setRestCheck(await RestService.restRestCheckRetrieve()); + } + onFetchRestCheck(); + }, []); return ( <> @@ -31,7 +31,7 @@ const Home = () => { Django Negative Logo

Rest API

-

{restCheck?.data?.payload?.result}

+

{restCheck?.message}