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

---
 src/components/Testt/App.css  |   4 +-
 src/components/Testt/index.js | 237 ++++++++--------------------------
 src/components/Testt/mahdi.js | 223 ++++++++++++++++++++++++++++++++
 3 files changed, 281 insertions(+), 183 deletions(-)
 create mode 100644 src/components/Testt/mahdi.js

diff --git a/src/components/Testt/App.css b/src/components/Testt/App.css
index 9444244..49adc02 100644
--- a/src/components/Testt/App.css
+++ b/src/components/Testt/App.css
@@ -1,4 +1,4 @@
-/* .App {
+.App {
   text-align: center;
 }
 
@@ -57,4 +57,4 @@
   display: block;
   width: 100%;
   height: auto;
-} */
+}
diff --git a/src/components/Testt/index.js b/src/components/Testt/index.js
index bdaa8ab..ab6c312 100644
--- a/src/components/Testt/index.js
+++ b/src/components/Testt/index.js
@@ -2,13 +2,41 @@ import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 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 [activeAccordion, setActiveAccordion] = useState(null);
+function Testt() {
+  const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
@@ -27,123 +55,32 @@ function Testt({ items, vod }) {
         <DragDropContext onDragEnd={handleOnDragEnd}>
           <Droppable droppableId="characters">
             {(provided) => (
-              <section
-                className="w-full flex flex-col bg-gray-200"
+              <ul
+                className="characters"
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >
-                {items.map((item, index) => (
-                  <Draggable index={index}>
-                    {(provided) => (
-                      <div
-                        className="flex flex-col"
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                      >
-                        {/* parent */}
-                        <div
-                          className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                            activeAccordion === item
-                              ? "border-surfaceBorder "
-                              : "border-secondary"
-                          } cursor-pointer`}
-                          onClick={() =>
-                            setActiveAccordion(
-                              activeAccordion === item ? null : item
-                            )
-                          }
+                {characters.map(({ id, name, thumb, test }, index) => {
+                  return (
+                    <Draggable key={id} draggableId={id} index={index}>
+                      {(provided) => (
+                        <li
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
                         >
-                          <CircleInCircle
-                            parentClassName={"bg-secondary w-0 h- "}
-                            childClassName={false}
-                          />
-                          <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
-                          {vod && (
-                            <div className="flex flex-row items-center ml-5 ">
-                              <p className="text-xs">
-                                دقیقه:
-                                <span>{item.min}</span>
-                              </p>
-                              <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
-                              <p className="text-xs">
-                                ویدیو:
-                                <span>{item.video}</span>
-                              </p>
-                            </div>
-                          )}
-                          <img
-                            src={
-                              activeAccordion === item
-                                ? `images/accordion-.svg`
-                                : `images/accordion+.svg`
-                            }
-                            alt=""
-                            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>
-                    )}
-                  </Draggable>
-                ))}
-              </section>
+                          <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>
@@ -159,65 +96,3 @@ function Testt({ items, vod }) {
 }
 
 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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-        },
-      ],
-    },
-  ],
-};
diff --git a/src/components/Testt/mahdi.js b/src/components/Testt/mahdi.js
new file mode 100644
index 0000000..bdaa8ab
--- /dev/null
+++ b/src/components/Testt/mahdi.js
@@ -0,0 +1,223 @@
+import React, { useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import "./App.css";
+
+import CircleInCircle from "../MiniComponents/CircleInCircle";
+import Button from "../ButtonDesign/Button";
+
+function Testt({ items, vod }) {
+  //   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);
+  }
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Final Space Characters</h1>
+        <DragDropContext onDragEnd={handleOnDragEnd}>
+          <Droppable droppableId="characters">
+            {(provided) => (
+              <section
+                className="w-full flex flex-col bg-gray-200"
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+              >
+                {items.map((item, index) => (
+                  <Draggable index={index}>
+                    {(provided) => (
+                      <div
+                        className="flex flex-col"
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        {/* parent */}
+                        <div
+                          className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+                            activeAccordion === item
+                              ? "border-surfaceBorder "
+                              : "border-secondary"
+                          } cursor-pointer`}
+                          onClick={() =>
+                            setActiveAccordion(
+                              activeAccordion === item ? null : item
+                            )
+                          }
+                        >
+                          <CircleInCircle
+                            parentClassName={"bg-secondary w-0 h- "}
+                            childClassName={false}
+                          />
+                          <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
+                          {vod && (
+                            <div className="flex flex-row items-center ml-5 ">
+                              <p className="text-xs">
+                                دقیقه:
+                                <span>{item.min}</span>
+                              </p>
+                              <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                              <p className="text-xs">
+                                ویدیو:
+                                <span>{item.video}</span>
+                              </p>
+                            </div>
+                          )}
+                          <img
+                            src={
+                              activeAccordion === item
+                                ? `images/accordion-.svg`
+                                : `images/accordion+.svg`
+                            }
+                            alt=""
+                            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>
+                    )}
+                  </Draggable>
+                ))}
+              </section>
+            )}
+          </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;
+
+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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+  ],
+};