From b0ffd46a7ec27077bc5ed97821a72acda17d8eb9 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Tue, 31 May 2022 14:43:20 +0430
Subject: [PATCH] update src/components/Testt/index.js and mahdi.js

---
 src/components/Testt/index.js | 133 ++++++++++----
 src/components/Testt/mahdi.js | 323 +++++++++++++++++++++-------------
 2 files changed, 307 insertions(+), 149 deletions(-)

diff --git a/src/components/Testt/index.js b/src/components/Testt/index.js
index ab6c312..db4e55a 100644
--- a/src/components/Testt/index.js
+++ b/src/components/Testt/index.js
@@ -8,34 +8,111 @@ const finalSpaceCharacters = [
     name: "Gary Goodspeed",
     thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
-    id: "cato",
-    name: "Little Cato",
+    id: "garfdsy",
+    name: "Gary Goodspeed",
     thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
     id: "kvn",
     name: "KVN",
     thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+    video: 4,
+    min: 30,
+
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
     id: "mooncake",
     name: "Mooncake",
     thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
   {
-    id: "quinn",
-    name: "Quinn Ergon",
+    id: "garfsddsfy",
+    name: "Gary Goodspeed",
     thumb: "/images/kvn.png",
     test: "mahdi",
+    title:
+      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+    video: 4,
+    min: 30,
+    subItems: [
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+      },
+      {
+        name: "شرکت های بزرگ خیلی خوب هستند",
+      },
+      {
+        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+      },
+    ],
   },
 ];
 
 function Testt() {
+  const [activeAccordion, setActiveAccordion] = useState(null);
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
@@ -49,18 +126,18 @@ function Testt() {
   }
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Final Space Characters</h1>
-        <DragDropContext onDragEnd={handleOnDragEnd}>
-          <Droppable droppableId="characters">
-            {(provided) => (
-              <ul
-                className="characters"
-                {...provided.droppableProps}
-                ref={provided.innerRef}
-              >
-                {characters.map(({ id, name, thumb, test }, index) => {
+    <section>
+      <DragDropContext onDragEnd={handleOnDragEnd}>
+        <Droppable droppableId="characters">
+          {(provided) => (
+            <section
+              className="characters w-full flex flex-col bg-gray-200"
+              id="container"
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {characters.map(
+                ({ id, name, thumb, test, title, video, min }, index) => {
                   return (
                     <Draggable key={id} draggableId={id} index={index}>
                       {(provided) => (
@@ -72,26 +149,20 @@ function Testt() {
                           <div className="characters-thumb">
                             <img src={thumb} alt={`${name} Thumb`} />
                           </div>
-                          <p>{name}</p>
+                          <p>{title}</p>
                           <span className="p-10 bg-red-600">{test}</span>
                         </li>
                       )}
                     </Draggable>
                   );
-                })}
-                {provided.placeholder}
-              </ul>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </header>
-      <p>
-        Images from{" "}
-        <a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
-          Final Space Wiki
-        </a>
-      </p>
-    </div>
+                }
+              )}
+              {provided.placeholder}
+            </section>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </section>
   );
 }
 
diff --git a/src/components/Testt/mahdi.js b/src/components/Testt/mahdi.js
index bdaa8ab..fc75699 100644
--- a/src/components/Testt/mahdi.js
+++ b/src/components/Testt/mahdi.js
@@ -5,11 +5,54 @@ import "./App.css";
 import CircleInCircle from "../MiniComponents/CircleInCircle";
 import Button from "../ButtonDesign/Button";
 
+const finalSpaceCharacters = [
+  {
+    id: "gary",
+    name: "Gary Goodspeed",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+  },
+  {
+    id: "cato",
+    name: "Little Cato",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+  },
+  {
+    id: "kvn",
+    name: "KVN",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+  },
+  {
+    id: "mooncake",
+    name: "Mooncake",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+  },
+  {
+    id: "quinn",
+    name: "Quinn Ergon",
+    thumb: "/images/kvn.png",
+    test: "mahdi",
+  },
+];
+
 function Testt({ items, vod }) {
-  //   const [characters, updateCharacters] = useState(finalSpaceCharacters);
-  const [characters, updateCharacters] = useState(items);
+  const [characters, updateCharacters] = useState(finalSpaceCharacters);
+  // const [characters, updateCharacters] = useState(items);
   const [activeAccordion, setActiveAccordion] = useState(null);
 
+  // function handleOnDragEnd(result) {
+  //   if (!result.destination) return;
+
+  //   const items = Array.from(characters);
+  //   const [reorderedItem] = items.splice(result.source.index, 1);
+  //   items.splice(result.destination.index, 0, reorderedItem);
+
+  //   updateCharacters(items);
+  // }
+
   function handleOnDragEnd(result) {
     if (!result.destination) return;
 
@@ -32,10 +75,11 @@ function Testt({ items, vod }) {
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >
-                {items.map((item, index) => (
-                  <Draggable index={index}>
+                {characters.map((item, { id, name }, index) => (
+                  <Draggable key={id} draggableId={id} index={index}>
                     {(provided) => (
                       <div
+                        key={index}
                         className="flex flex-col"
                         ref={provided.innerRef}
                         {...provided.draggableProps}
@@ -58,7 +102,7 @@ function Testt({ items, vod }) {
                             parentClassName={"bg-secondary w-0 h- "}
                             childClassName={false}
                           />
-                          <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
+                          <h2 className="flex-1 mr-5 text-sm">{name}</h2>
                           {vod && (
                             <div className="flex flex-row items-center ml-5 ">
                               <p className="text-xs">
@@ -82,62 +126,6 @@ function Testt({ items, vod }) {
                             className="w-3 ml-2"
                           />
                         </div>
-                        {/* child */}
-                        {activeAccordion === item &&
-                          item.subItems.map((subItem, i) => (
-                            <div
-                              key={i}
-                              className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out"
-                            >
-                              <div className="flex flex-row items-center">
-                                {vod === !true && (
-                                  <img
-                                    src="images/accordionGroup2725.svg"
-                                    className="w-3"
-                                    alt="line"
-                                  />
-                                )}
-                                <span
-                                  className={`text-sm ${
-                                    vod === true ? "mr-0" : "mr-3"
-                                  }`}
-                                >
-                                  {i + 1}
-                                </span>
-                              </div>
-                              <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
-                              <p className="text-sm flex-1">{subItem.name}</p>
-                              <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
-                                {vod ? (
-                                  <>
-                                    <div className="flex flex-row items-center ml-7">
-                                      <p className="text-xs">
-                                        دقیقه:
-                                        <span>{item.min}</span>
-                                      </p>
-                                      <Button
-                                        className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
-                                        text={"پخش"}
-                                      />
-                                    </div>
-                                  </>
-                                ) : (
-                                  <>
-                                    <img
-                                      src="images/accordionGroup2724.svg"
-                                      className="w-8 rounded"
-                                      alt="delete-button"
-                                    />
-                                    <img
-                                      src="images/accordionGroup2723.svg"
-                                      className="w-8 rounded"
-                                      alt="edit-button"
-                                    />
-                                  </>
-                                )}
-                              </div>
-                            </div>
-                          ))}
                         {provided.placeholder}
                       </div>
                     )}
@@ -163,61 +151,160 @@ export default Testt;
 Testt.defaultProps = {
   vod: false,
 
-  items: [
-    {
-      id: "gary",
-      title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
-      video: 4,
-      min: 30,
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-    {
-      id: "kevin",
-      title:
-        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
-      video: 4,
-      min: 30,
-
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-    {
-      id: "rafiqaneh",
-      title:
-        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
-      video: 4,
-      min: 30,
-      subItems: [
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-        },
-        {
-          name: "شرکت های بزرگ خیلی خوب هستند",
-        },
-        {
-          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-  ],
+  // items: [
+  //   {
+  //     id: "gary",
+  //     title:
+  //       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+  //     video: 4,
+  //     min: 30,
+  //     subItems: [
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+  //       },
+  //       {
+  //         name: "شرکت های بزرگ خیلی خوب هستند",
+  //       },
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     id: "kevin",
+  //     title:
+  //       "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+  //     video: 4,
+  //     min: 30,
+
+  //     subItems: [
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+  //       },
+  //       {
+  //         name: "شرکت های بزرگ خیلی خوب هستند",
+  //       },
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+  //       },
+  //     ],
+  //   },
+  //   {
+  //     id: "rafiqaneh",
+  //     title:
+  //       "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+  //     video: 4,
+  //     min: 30,
+  //     subItems: [
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+  //       },
+  //       {
+  //         name: "شرکت های بزرگ خیلی خوب هستند",
+  //       },
+  //       {
+  //         name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+  //       },
+  //     ],
+  //   },
+  // ],
 };
+
+// import React, { useState } from "react";
+// import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+// import "./App.css";
+
+// const finalSpaceCharacters = [
+//   {
+//     id: "gary",
+//     name: "Gary Goodspeed",
+//     thumb: "/images/kvn.png",
+//     test: "mahdi",
+//   },
+//   {
+//     id: "cato",
+//     name: "Little Cato",
+//     thumb: "/images/kvn.png",
+//     test: "mahdi",
+//   },
+//   {
+//     id: "kvn",
+//     name: "KVN",
+//     thumb: "/images/kvn.png",
+//     test: "mahdi",
+//   },
+//   {
+//     id: "mooncake",
+//     name: "Mooncake",
+//     thumb: "/images/kvn.png",
+//     test: "mahdi",
+//   },
+//   {
+//     id: "quinn",
+//     name: "Quinn Ergon",
+//     thumb: "/images/kvn.png",
+//     test: "mahdi",
+//   },
+// ];
+
+// function Testt() {
+//   const [characters, updateCharacters] = useState(finalSpaceCharacters);
+
+//   function handleOnDragEnd(result) {
+//     if (!result.destination) return;
+
+//     const items = Array.from(characters);
+//     const [reorderedItem] = items.splice(result.source.index, 1);
+//     items.splice(result.destination.index, 0, reorderedItem);
+
+//     updateCharacters(items);
+//   }
+
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <h1>Final Space Characters</h1>
+//         <DragDropContext onDragEnd={handleOnDragEnd}>
+//           <Droppable droppableId="characters">
+//             {(provided) => (
+//               <ul
+//                 className="characters"
+//                 {...provided.droppableProps}
+//                 ref={provided.innerRef}
+//               >
+//                 {characters.map(({ id, name, thumb, test }, index) => {
+//                   return (
+//                     <Draggable key={id} draggableId={id} index={index}>
+//                       {(provided) => (
+//                         <li
+//                           ref={provided.innerRef}
+//                           {...provided.draggableProps}
+//                           {...provided.dragHandleProps}
+//                         >
+//                           <div className="characters-thumb">
+//                             <img src={thumb} alt={`${name} Thumb`} />
+//                           </div>
+//                           <p>{name}</p>
+//                           <span className="p-10 bg-red-600">{test}</span>
+//                         </li>
+//                       )}
+//                     </Draggable>
+//                   );
+//                 })}
+//                 {provided.placeholder}
+//               </ul>
+//             )}
+//           </Droppable>
+//         </DragDropContext>
+//       </header>
+//       <p>
+//         Images from{" "}
+//         <a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
+//           Final Space Wiki
+//         </a>
+//       </p>
+//     </div>
+//   );
+// }
+
+// export default Testt;