commit(ark_mybooks)

src/AppRouter.js

@@ -33,6 +33,7 @@ import Blog from "./views/Blog/index";
 // import Sample from "./views/Sample/index";
 import PDF from "./views/PDF/index";
 import Orders from "./views/Orders";
+import MyBooks2 from "./views/MyBook2";
 class AppRouter extends Component {
   constructor(props) {
     super(props);
@@ -104,6 +105,9 @@ class AppRouter extends Component {
           <Route exact path="/orders">
             <Orders />
           </Route>
+          <Route exact path="/mybooks">
+            <MyBooks2/>
+          </Route>
           {/* <Route path={"/sample"}>
             <Sample />
           </Route> */}
@@ -255,7 +259,7 @@ class AppRouter extends Component {
               />
             )}
           </Route>
-          <Route exact path={"/mybooks"}>
+          {/* <Route exact path={"/mybooks"}>
             {mobile ? (
               status ? (
                 <MyBooks />
@@ -275,7 +279,7 @@ class AppRouter extends Component {
                 }}
               />
             )}
-          </Route>
+          </Route> */}
           <Route exact path={"/ar"}>
             {mobile ? (
               status ? (

src/views/MyBook2/index.css

@@ -0,0 +1,95 @@
+
+.mybooks{
+  width: 100%;
+  padding:0 5px;
+  margin-top: 60px;
+}
+
+.mybooks-title{
+  width: 100%;
+  direction: rtl;
+  font-size: 25px;
+  font-weight: bold;
+  color: #5DC964;
+}
+
+.mybooks-tabs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  direction: rtl;
+  margin-top: 10px;
+}
+
+.mybooks-tabs-item{
+  width: 50%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.mybooks-tabs-item1{
+  border-radius: 0 5px 5px 0;
+  border: 1px solid #418f46;
+  background-color: white;
+  color: #5DC964;
+}
+
+.mybooks-tabs-item2{
+  border-radius: 5px 0px 0px 5px;
+  border: 1px solid #418f46;
+  background-color: #5DC964;
+  color: white;
+}
+
+.mybooks-line{
+  width: 100%;
+  height: 1px;
+  background-color: rgb(201, 199, 199);
+  margin-top: 15px;
+}
+
+.mybooks-main-content{
+  width: 100%;
+  margin-top: 15px;
+}
+
+.mybooks-main-content-item{
+  width: 100%;
+}
+
+.mybooks-main-content-row1{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  direction: ltr;
+  padding: 15px 0;
+  border-bottom: 1px solid rgb(201, 199, 199);
+}
+
+.mybooks-main-content-row1-img-container{
+  width: 25%;
+  height: auto;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.mybooks-main-content-row1-img{
+  width: 100%;
+  height: 100%;
+}
+
+.mybooks-main-content-row1-text{
+  width: 80%;
+}
+
+.mybooks-main-content-row1-text-name,
+.mybooks-main-content-row1-text-activation-date,
+.mybooks-main-content-row1-text-activation-code{
+  width: 100%;
+  font-size: 16px;
+  margin-bottom: 10px;
+}

src/views/MyBook2/index.js

@@ -1,48 +1,96 @@
 import { useState } from 'react';
+import Navbar from '../Home/Navbar';
 import './index.css';
 
-const MyBooks=()=>{
+const MyBooks2=()=>{
 
   const [data, set_data] = useState([
     {
+      id: 291,
+      pid: null,
+      ord: null,
+      productId: 3,
+      userId: 21,
+      factorId: null,
+      authorId: null,
+      count: 1,
+      price: null,
+      finalPrice: null,
+      condition: 2,
+      isActive: 1,
+      productType: 3,
+      createdAt: "2021-09-16T14:01:02.180Z",
+      updatedAt: "2021-09-16T14:01:02.180Z",
+      activation_code: "2042308",
+      deletedAt: null,
+      product: {
+        bookId: 1,
+        productType: 3,
+        price: 0,
+        ARId: 228,
+        book: {
           id: 1,
-      name: "ریاضی دهم",
+          name: "علوم تجربی",
-      activation_date: "1400/05/22",
+          category: "دسته بندی",
-      activation_code: "2434df3r3",
+          text: null,
-      ARId: "",
+          description: null,
-      QRId: "",
+          publishYear: 1399,
-      type: 1,
+          pagesNum: 1,
+          authorName: "دکتر علی عبدالعالی",
+          gradeId: 6,
+          fileIds: "2094",
+          operators: null,
+          items: null,
+          sampleFileId: "2132",
+          categoryIds: null,
         },
-    {
-      id: 2,
-      name: "ریاضی دهم",
-      activation_date: "1400/05/22",
-      activation_code: "2434df3r3",
-      ARId: "",
-      QRId: "",
-      type: 1,
       },
-    {
-      id: 3,
-      name: "ریاضی دهم",
-      activation_date: "1400/05/22",
-      activation_code: "2434df3r3",
-      ARId: "",
-      QRId: "",
-      type: 1,
     },
     {
-      id: 4,
+      id: 170,
-      name: "ریاضی دهم",
+      pid: null,
-      activation_date: "1400/05/22",
+      ord: null,
-      activation_code: "2434df3r3",
+      productId: 36,
-      ARId: "",
+      userId: 21,
-      QRId: "",
+      factorId: null,
-      type: 1,
+      authorId: null,
+      count: 1,
+      price: null,
+      finalPrice: null,
+      condition: 2,
+      isActive: 1,
+      productType: 3,
+      createdAt: "2021-09-12T18:27:57.399Z",
+      updatedAt: "2021-09-12T18:27:57.399Z",
+      activation_code: "2042308",
+      deletedAt: null,
+      product: {
+        bookId: 12,
+        productType: 3,
+        price: 0,
+        ARId: 258,
+        book: {
+          id: 12,
+          name: "ریاضی",
+          category: "دسته بندی",
+          text: null,
+          description: null,
+          publishYear: 1399,
+          pagesNum: 1,
+          authorName: "دکتر علی عبدالعالی",
+          gradeId: 1,
+          fileIds: "2104",
+          operators: null,
+          items: null,
+          sampleFileId: "2125",
+          categoryIds: null,
+        },
+      },
     },
   ]);
   return (
     <div className="mybooks">
+      <Navbar />
       <div className="mybooks-title">کتاب‌ های من</div>
       <div className="mybooks-tabs">
         <div className="mybooks-tabs-item mybooks-tabs-item1">
@@ -52,10 +100,35 @@ const MyBooks=()=>{
       </div>
       <div className="mybooks-line"></div>
       <div className="mybooks-main-content">
-
+        {data.map((item) => (
+          <div key={item.id} className="mybooks-main-content-item">
+            <div className="mybooks-main-content-row1">
+              <div className="mybooks-main-content-row1-img-container">
+                <img
+                  src={`https://dnvn.ir/api/v1/file/${
+                    item.product.book.fileIds.split(",")[0]
+                  }`}
+                  className="mybooks-main-content-row1-img"
+                  alt="mybook-img"
+                />
+              </div>
+              <div className="mybooks-main-content-row1-text">
+                <div className="mybooks-main-content-row1-text-name">
+                  نام آیتم: {item.product.book.name}
+                </div>
+                <div className="mybooks-main-content-row1-text-activation-date">
+                  تاریخ فعال‌سازی: {item.updatedAt}
+                </div>
+                <div className="mybooks-main-content-row1-text-activation-code">
+                  کد فعال‌سازی: {item.activation_code}
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );
 }
 
-export default MyBooks;
+export default MyBooks2;