finished cross region

yiqu · Jun 28, 2023 · aef3307 · aef3307
1 parent 9a44929
commit aef3307
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/snorlax.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pokemon Rank</title>
+    <title>Drag N' Drop Pokemon</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "immer": "^9.0.21",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "mui-image": "^1.0.7",
     "object-hash": "^3.0.0",
     "react": "^18.2.0",
     "react-custom-scroll": "^5.0.0",
@@ -57,6 +58,7 @@
   "devDependencies": {
     "@types/loadable__component": "5.13.4",
     "@types/lodash": "4.14.190",
+    "@types/mui-image": "^1.0.1",
     "@types/node": "^16.18.3",
     "@types/object-hash": "^2.2.1",
     "@types/react": "^18.0.37",

diff --git a/public/snorlax.png b/public/snorlax.png
diff --git a/src/core/all/PokemonsAll.tsx b/src/core/all/PokemonsAll.tsx
@@ -11,7 +11,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { skipToken } from '@reduxjs/toolkit/dist/query/react';
 import { Pokemon, REGIONS } from '../store/pokemon.state';
 import useScreenSize from '../../shared/hooks/useScreensize';
-
+import {produce} from "immer";
 
 function FilmsAll() {
   const dispatch = useAppDispatch();
@@ -72,12 +72,13 @@ function FilmsAll() {
     if (result.destination.droppableId === result.source.droppableId && result.destination.index === result.source.index) {
       return;
     }
-
+    // Dragging Regions
     if (result.type === 'regions') {
       const dataCopy = [...data ?? []];
       const newOrdered = reorder<string>(dataCopy, result.source.index, result.destination.index);
       updateRegions(newOrdered);
     }
+    // Dragging Pokemons (cross region disabled)
     else if (result.type.includes('-pokemons')) {
       const dataCopy: Pokemon[] = [...pokemonsByRegion.data?.pokemons ?? []];
       const newOrdered = reorder<Pokemon>(dataCopy, result.source.index, result.destination.index);
@@ -88,19 +89,41 @@ function FilmsAll() {
           pokemons: newOrdered
         });
       }
-    } else if (result.type === 'pokemons-cross-regions') {
-
-      console.log(result);
-      console.log(pokemonsByRegion.data);
-      console.log(pokemonsByDestRegion.data);
+    } 
+    // Dragging Pokemons (cross region enabled)
+    else if (result.type === 'pokemons-cross-regions') {
+      // Dragging pokemon in the same region
+      if (result.source.droppableId === result.destination.droppableId && pokemonsByRegion.data) {
+        const dataCopy: Pokemon[] = [...pokemonsByRegion.data.pokemons ?? []];
+        const newOrdered = reorder<Pokemon>(dataCopy, result.source.index, result.destination.index);
+        const regionId = pokemonsByRegion.data.id;
+        if (REGIONS.includes(regionId)) {
+          updatePokemonsByRegion({
+            id: regionId,
+            pokemons: newOrdered
+          });
+        }
+      } 
+      // Dragging cross region
+      else if (result.source.droppableId !== result.destination.droppableId && result.destination && pokemonsByRegion.data && pokemonsByDestRegion.data) {
+
+        // Remove dragged from source region
+        const nextSourcePokemons = produce(pokemonsByRegion.data, draft => {
+          draft.pokemons.splice(result.source.index, 1);
+        });
+        if (REGIONS.includes(nextSourcePokemons.id)) {
+          updatePokemonsByRegion(nextSourcePokemons);
+        }
 
-      if (result.source.droppableId === result.destination.droppableId) {
-        console.log("same region drop while cross region enabled");
-      } else {
-        console.log("cross region");
+        // Add dragged to dest region
+        const nextDestPokemons = produce(pokemonsByDestRegion.data, draft => {
+          draft.pokemons.splice(result.destination!.index, 0, pokemonsByRegion.data!.pokemons[result.source.index]);
+        });
+        if (REGIONS.includes(nextDestPokemons.id)) {
+          updatePokemonsByRegion(nextDestPokemons);
+        }
       }
     }
-
   };
 
   const handleCrossDragToggle = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/src/top-nav/TopNav.tsx b/src/top-nav/TopNav.tsx
@@ -13,6 +13,7 @@ import ThemeContext from "../../src/theme/ThemeContext";
 import { useLocalStorage } from 'react-use';
 import { APP_TOOLTIP_ID, LS_APP_THEME } from "../../src/shared/utils/constants";
 import { GREY } from "../theme/palette";
+import Image from 'mui-image';
 
 export interface TopNavProps {
   open: boolean;
@@ -53,8 +54,12 @@ export default function TopNav() {
   return (
     <React.Fragment>
       <AppBar position="static" elevation={ 0 }>
-        <Container maxWidth="xl">
+        <Container maxWidth="xl" disableGutters>
           <Toolbar>
+            <Stack direction="row" justifyContent="center" alignItems="center" mr={ 2 }
+              component={ Link } to={ "/" }>
+              <Image src="/snorlax.png" height={ '30px' } alt="logo" showLoading />
+            </Stack>
             <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
               <Stack direction="row" justifyContent="start" alignItems="center">
                 <Box sx={ { flexGrow: 1, display: { xs: 'none', md: 'flex' } } }>