formik'd the Select with react query infinite scroll

yiqu · Jun 7, 2023 · 910443d · 910443d
1 parent c480a77
commit 910443d
Show file tree

Hide file tree

Showing 13 changed files with 339 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@mui/joy": "5.0.0-alpha.59",
     "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.10.13",
+    "@mui/x-date-pickers": "^6.6.0",
     "@reduxjs/toolkit": "^1.9.2",
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",

diff --git a/src/core/store/entities/entities.api.ts b/src/core/store/entities/entities.api.ts
@@ -9,13 +9,14 @@ export const starshipsTag = "Starships";
 export const vehiclesTag = "Vehicles";
 export const planetsTag = "Planets";
 export const peopleTag = "People";
+export const charactersTag = "Characters";
 
 export const starwarsEntitiesApi = createApi({
   reducerPath: 'swEntities',
   baseQuery: fetchBaseQuery({
     baseUrl: BASE_SW_API
   }),
-  tagTypes: [speciesTag, starshipsTag, vehiclesTag, planetsTag, peopleTag],
+  tagTypes: [speciesTag, starshipsTag, vehiclesTag, planetsTag, peopleTag, charactersTag],
   endpoints: (builder) => ({
 
     fetchEntitiesInfinite: builder.query<HttpResponse<StarwarsContent>, EntityFetchArg>({
@@ -38,7 +39,7 @@ export const starwarsEntitiesApi = createApi({
         return currentArg?.url !== previousArg?.url; // if provided url has changed
       },
       providesTags: (result, error, args: EntityFetchArg, meta) => {
-        const tags: TagDescription<"Species" | "Starships" | "Vehicles" | "Planets" | "People">[] = [];
+        const tags: TagDescription<"Species" | "Starships" | "Vehicles" | "Planets" | "People" | "Characters">[] = [];
         result?.results.forEach((res: StarwarsContent) => {
           tags.push({ type: args.entityId, id: res.uid });
         });

diff --git a/src/core/store/entities/entities.state.ts b/src/core/store/entities/entities.state.ts
@@ -1,6 +1,6 @@
 import { Pagination } from "src/shared/models/http.model";
 
-export type EntityType = 'Species' | 'Starships' | 'Vehicles' | 'Planets' | 'People';
+export type EntityType = 'Species' | 'Starships' | 'Vehicles' | 'Planets' | 'People' | 'Characters';
 
 export interface EntityFetchArg {
   url: string;

diff --git a/src/create-new/core/CreateNewFilm.tsx b/src/create-new/core/CreateNewFilm.tsx
@@ -13,7 +13,6 @@ const CreateNewFilm = () => {
     setShowDialog(true);
   };
   const handleClose = useCallback((payload: any) => {
-    console.log(payload);
     setShowDialog(false);
   }, []);
 

diff --git a/src/create-new/schemas/all-schemas.ts b/src/create-new/schemas/all-schemas.ts
@@ -11,6 +11,19 @@ export const newFilmValidationSchema = Yup.object({
   vehicles: Yup.array().min(1,  "At least one vehicle is required"),
 });
 
+export const newPersonalFilmValidationSchema = Yup.object({
+  title: Yup.string().required(),
+  director: Yup.string().required().min(1),
+  producer: Yup.string().required().min(1),
+  episode_id: Yup.number().required().min(1),
+  opening_crawl: Yup.string().required('Opening crawl text is a required field').min(5, 'At least 5 characters is required for crawl text'),
+  release_date:  Yup.string().required().min(1),
+  characters: Yup.array().min(1, "At least one character is required"),
+  starships: Yup.array().min(1,  "At least one starship is required"),
+  planets: Yup.array().min(1,  "At least one planet is required"),
+  species: Yup.array().min(1,  "At least one species is required"),
+  vehicles: Yup.array().min(1,  "At least one vehicle is required"),
+});
 
 export const editFilmValidationSchema = Yup.object().shape({
   title: Yup.string().trim().min(2).required(),

diff --git a/src/index.tsx b/src/index.tsx
@@ -19,6 +19,9 @@ import { ThemeContextProvider } from './theme/ThemeContext';
 import { Provider } from 'react-redux';
 import { appStore, persistor } from './store/appStore';
 import { PersistGate } from 'redux-persist/integration/react';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -30,7 +33,9 @@ root.render(
     <Provider store={ appStore }>
       <PersistGate loading={ null } persistor={ persistor }>
         <ThemeContextProvider>
-          <App />
+          <LocalizationProvider dateAdapter={ AdapterMoment }>
+            <App />
+          </LocalizationProvider>
         </ThemeContextProvider>
       </PersistGate>
     </Provider>

diff --git a/src/personal-movies/all/PersonalFilmsTable.tsx b/src/personal-movies/all/PersonalFilmsTable.tsx
@@ -92,7 +92,6 @@ function PersonalFilmsTable({ films, loading }: PersonalFilmsTableProps) {
   };
 
   const handleHeaderMenuClick = (colId: string) => (actionId: PersonalFilmTableHeaderActions) => {
-    console.log(colId, actionId); 
   };
 
   const handleFilterChange = useCallback((filters: QueryFilter[]) => {
-Original file line number
+Diff line change
@@ Expand Up @@
       };
       const handleHeaderMenuClick = (colId: string) => (actionId: PersonalFilmTableHeaderActions) => {
-        console.log(colId, actionId);
       };
       const handleFilterChange = useCallback((filters: QueryFilter[]) => {
@@ Expand Down @@