From a6b42fc2f23bac23c3a2ad913f5c386dd3414eec Mon Sep 17 00:00:00 2001 From: erdar2 Date: Wed, 22 Dec 2021 16:03:14 +0100 Subject: [PATCH] chore: Redux setup, store setup and connection with backend --- graphql/schema.graphql | 2 +- package.json | 3 + resources/js/app.tsx | 4 +- resources/js/hooks.ts | 5 ++ resources/js/services/covidDataApi.ts | 92 +++++++++++++++++++++++++++ resources/js/store/store.ts | 15 +++++ 6 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 resources/js/hooks.ts create mode 100644 resources/js/services/covidDataApi.ts create mode 100644 resources/js/store/store.ts diff --git a/graphql/schema.graphql b/graphql/schema.graphql index 92efc2d..a53e313 100644 --- a/graphql/schema.graphql +++ b/graphql/schema.graphql @@ -5,7 +5,7 @@ scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date") scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime") type Query { - all_data: [CovidData!]! + allData: [CovidData!]! @all data(id: ID @eq): CovidData @find searchData(beginDate: Date!, endDate: Date) : [CovidData!]! } diff --git a/package.json b/package.json index 08decb1..9ca785f 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,12 @@ "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.5", + "@reduxjs/toolkit": "^1.7.1", + "@rtk-query/graphql-request-base-query": "^1.0.3", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "@types/react-redux": "^7.1.20", + "graphql-request": "^3.7.0", "react-redux": "^7.2.6", "react-router-dom": "^6.2.1", "ts-loader": "^9.2.6", diff --git a/resources/js/app.tsx b/resources/js/app.tsx index 82d8b3b..9fba602 100644 --- a/resources/js/app.tsx +++ b/resources/js/app.tsx @@ -2,6 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from "./components/App"; import { BrowserRouter } from "react-router-dom"; +import store from './store/store'; +import { Provider } from 'react-redux'; /** * First we will load all of this project's JavaScript dependencies which @@ -17,4 +19,4 @@ require('./bootstrap'); * or customize the JavaScript scaffolding to fit your unique needs. */ -ReactDOM.render(, document.getElementById('app')); \ No newline at end of file +ReactDOM.render(, document.getElementById('app')); \ No newline at end of file diff --git a/resources/js/hooks.ts b/resources/js/hooks.ts new file mode 100644 index 0000000..41a629d --- /dev/null +++ b/resources/js/hooks.ts @@ -0,0 +1,5 @@ +import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; +import type { RootState, AppDispatch } from './store/store'; + +export const useAppDispatch = () => useDispatch(); +export const useAppSelector: TypedUseSelectorHook = useSelector; \ No newline at end of file diff --git a/resources/js/services/covidDataApi.ts b/resources/js/services/covidDataApi.ts new file mode 100644 index 0000000..5e329a8 --- /dev/null +++ b/resources/js/services/covidDataApi.ts @@ -0,0 +1,92 @@ +import { createApi } from "@reduxjs/toolkit/query/react"; +import { gql } from "graphql-request"; +import { graphqlRequestBaseQuery } from "@rtk-query/graphql-request-base-query"; + +export interface CovidData { + infected: number; + deceased: number; + recovered: number; + quarantined: number; + tested: number; + created_at: Date; +} + +export interface GetAllDataResponse { + allData: CovidData[]; +} + +export interface GetDataByDateResponse { + searchData: CovidData[]; +} + +export interface GetDataResponse { + data: CovidData; +} + +export const api = createApi({ + baseQuery: graphqlRequestBaseQuery({ + url: "/graphql", + }), + endpoints: (builder) => ({ + getAllData: builder.query({ + query: () => ({ + document: gql` + query GetAllData { + allData { + infected + deceased + recovered + quarantined + tested + created_at + } + } + `, + }), + transformResponse: (response: GetAllDataResponse) => + response.allData, + }), + getData: builder.query({ + query: (id) => ({ + document: gql` + query GetData($id: ID!) { + data(id: ${id}) { + infected + deceased + recovered + quarantined + tested + created_at + } + } + `, + }), + transformResponse: (response: GetDataResponse) => response.data, + }), + getDataByDate: builder.query< + CovidData[], + { beginDate: Date; endDate?: Date } + >({ + query: ({ beginDate, endDate }) => ({ + document: gql` + query GetDataByDate($beginDate: Date!, $endDate: Date) { + searchData(beginDate: $beginDate, endDate: $endDate) { + infected + deceased + recovered + quarantined + tested + created_at + } + } + `, + variables: { beginDate, endDate }, + }), + transformResponse: (response: GetDataByDateResponse) => + response.searchData, + }), + }), +}); + +export const { useGetAllDataQuery, useGetDataQuery, useGetDataByDateQuery } = + api; diff --git a/resources/js/store/store.ts b/resources/js/store/store.ts new file mode 100644 index 0000000..47a1c78 --- /dev/null +++ b/resources/js/store/store.ts @@ -0,0 +1,15 @@ +import { configureStore } from '@reduxjs/toolkit'; +import { api } from '../services/covidDataApi'; + +const store = configureStore({ + reducer: { + [api.reducerPath]: api.reducer + }, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware().concat(api.middleware), +}); + +export default store; + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; \ No newline at end of file