feat/main cards

hackathon-Gazprom · Aug 9, 2024 · 627f202 · 627f202
1 parent 253cdb4
commit 627f202
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 49 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -21,16 +21,13 @@ export interface DroppedCard {
 export default function App() {
   let { loggedIn } = useAppSelector(selectUsers);
   const dispatch = useAppDispatch();
-
   const navigate = useNavigate();
 
   function handleRegister({ email, password }: RegisterDataProps) {
     dispatch(registerUser({ email, password }))
       .unwrap()
       .then((data) => {
-        console.log('data: ', data);
         if (data.access) {
-          console.log('data.access: ', data.access);
           localStorage.setItem('token', data.access);
           dispatch(setLoggedIn(true));
           navigate('/');
@@ -81,7 +78,7 @@ export default function App() {
     const dropTarget = e.currentTarget;
     const dropTargetRect = dropTarget.getBoundingClientRect();
 
-    const cellWidth = 330;
+    const cellWidth = 300;
     const cellHeight = 157;
 
     const columnIndex = Math.floor(

diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss
@@ -2,39 +2,14 @@
   @include main-container;
   position: relative;
   height: 100vh;
-  gap: 8px;
-  height: 100vh;
   margin: 56px 64px 0 0;
-
-  display: grid;
-  grid-template-columns: repeat(3, 1fr)
-  // display: grid;
-  // grid-template-columns: repeat(3, minmax(300px, 1fr));
-  // grid-auto-rows: 127px;
-  // grid-template-rows: repeat(auto-fill, 127px);
-  // justify-content: center
 }
 
-
-// .grid {
-//   display: grid;
-//   grid-template-columns: repeat(3, 1fr); /* Три колонки */
-//   grid-auto-rows: minmax(100px, auto); /* Автоматическая высота строк */
-//   gap: 8px;
-//   margin: 56px 64px 0 0;
-// }
-
 .cardContainer {
-  @include flex-column-container;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   gap: 24px;
-  position: relative;
-
 }
 
-.subordinates {
-  display: flex;
-  // justify-content: center;  
-  gap: 24px;
-  position: relative;
 
-}
+
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -2,6 +2,7 @@ import Card from 'src/ui/Card/Card';
 import styles from 'src/pages/Main/Main.module.scss';
 import { useOutletContext } from 'react-router-dom';
 import { initialCardsProps } from 'src/services/types';
+import Arrow from 'src/ui/Arrow/Arrow';
 
 export default function Main() {
   const { allowDrop, handleDrop, handleDragStart, cards } = useOutletContext<{
@@ -10,16 +11,23 @@ export default function Main() {
     handleDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
     cards: initialCardsProps[];
   }>();
-  // console.log('cards: ', cards);
+  console.log('cards: ', cards);
+
+  const allCards: initialCardsProps[] = [];
+
+  const collectCards = (card: any) => {
+    allCards.push(card);
+    if (card.subordinates) {
+      card.subordinates.forEach(collectCards);
+    }
+  };
+
+  cards.forEach(collectCards);
 
   const renderCards = (card: initialCardsProps) => {
-    //  const [col, row ] = card.cellId.split('-').map(Number);
+    const [col, row] = card.cellId.split('-').map(Number);
     return (
-      <div
-        key={card.id}
-        className={styles.cardContainer}
-        // style={{  gridColumn: col + 1, gridRow: row + 1,  }}
-      >
+      <div key={card.id} style={{ gridColumn: col + 1, gridRow: row + 1 }}>
         <Card
           id={card.id}
           name={card.name}
@@ -30,21 +38,16 @@ export default function Main() {
           onDragStart={handleDragStart}
           draggable={true}
         />
-
-        {card.subordinates && card.subordinates.length > 0 && (
-          <div className={styles.subordinates}>
-            {card.subordinates.map((subordinate) => renderCards(subordinate))}
-          </div>
-        )}
       </div>
     );
   };
 
   return (
     <section className={styles.main} onDragOver={allowDrop} onDrop={handleDrop}>
-      {/* <div className={styles.grid}> */}
-      {cards.map((card) => renderCards(card))}
-      {/* </div> */}
+      <div className={styles.cardContainer}>
+        {allCards.map((card) => renderCards(card))}
+      </div>
+      {/* <Arrow /> */}
     </section>
   );
 }
diff --git a/src/services/types.ts b/src/services/types.ts
@@ -6,7 +6,6 @@ export interface initialCardsProps {
   photo: string;
   cellId: string;
   subordinates: initialCardsProps[];
-  // coordinates?: { top: number; left: number };
 }
 
 export interface RegisterDataProps {