lot of setup work

.env

@@ -2,4 +2,6 @@ VITE_APP_TITLE='Movie Rank'
 VITE_APP_VERSION='1.0.0'
 VITE_POKEAPI_URL='https://pokeapi.co/api/v2'
 VITE_GITHUB_REPO_URL="https://github.com/yiqu/vite-react"
-VITE_CIRCLE_CI_URL="https://app.circleci.com/pipelines/github/yiqu/vite-react"
+VITE_CIRCLE_CI_URL="https://app.circleci.com/pipelines/github/yiqu/vite-react"
+VITE_POKEMON_YELLOW_COLOR="#FFCB05"
+VITE_POKEMON_BLUE_COLOR="#3466AF"

package.json

@@ -34,6 +34,7 @@
     "moment": "^2.29.4",
     "object-hash": "^3.0.0",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-custom-scroll": "^5.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

src/core/all/PokemonsAll.tsx

@@ -0,0 +1,55 @@
+import { Box, Button, Divider, Skeleton, Stack } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
+import { pokemonApi, useFetchRegionListQuery } from '../store/pokemon.api';
+import Region from '../region/Region';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { useAppDispatch } from '../../store/appHook';
+
+function FilmsAll() {
+  const dispatch = useAppDispatch();
+  const { data, isFetching, isLoading, refetch } = useFetchRegionListQuery();
+
+  const handleRefresh = () => {
+    //dispatch(pokemonApi.util.invalidateTags([{type: PokemonTag}]));
+    dispatch(pokemonApi.util.invalidateTags([{type: "Region", id: 'ALL'}]));
+    //refetch();
+  };
+
+  if (isLoading) {
+    return (
+      <Box width="100%">
+        <Skeleton animation="wave" />
+        <Skeleton animation="wave" />
+      </Box>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Box width="100%">
+      <Stack direction="row" justifyContent="start" alignItems="start" width="100%">
+        <Button startIcon={ <RefreshIcon /> } variant='text' onClick={ handleRefresh }>
+          Refresh
+        </Button>
+      </Stack>
+      <Divider flexItem variant='fullWidth' />
+      <Grid container xs={ 12 } columnSpacing={ 2 }>
+        {
+          data.map((res) => {
+            return (
+              <Grid xs={ 4 } key={ res }>
+                <Region regionId={ res } />
+              </Grid>
+            );
+          })
+        }
+      </Grid>
+      <Divider flexItem variant='fullWidth' />
+    </Box>
+  );
+}
+
+export default FilmsAll;