reza activated lesson dropdown

src/redux/actions-type/book.tsx

@@ -8,6 +8,11 @@ interface info{
   data : any
 }
 
+interface setLessonActive{
+  type : "book/lesson/active"
+  data : any
+}
+
 interface error{
   type : "book/error"
   data : undefined
@@ -19,6 +24,6 @@ interface loading{
 }
 
 
-type BookAction = list | info | loading | error;
+type BookAction = list | info | setLessonActive | loading | error;
 
 export default BookAction;

src/redux/actions/book.tsx

@@ -3,12 +3,15 @@ import { Dispatch } from "redux";
 const book = {
   list:
     (data = {}) =>
-    async (dispatch : Dispatch) =>
+    async (dispatch: Dispatch) =>
       await proxy.get("book/list", data, { dispatch }),
   info:
     (data = {}) =>
-    async (dispatch : Dispatch) =>
+    async (dispatch: Dispatch) =>
       await proxy.get("book/info", data, { dispatch }),
+
+  setLessonActive: (data: undefined) => async (dispatch: Dispatch) =>
+    await dispatch({ type: "book/lesson/active", data: data }),
   // update:
   //   (data = {}, data2 = {}) =>
   //   async (dispatch : Dispatch) => {

src/redux/reducers/book.tsx

@@ -11,180 +11,184 @@ const initialState = {
   subjects: [],
   levels: [],
   sortFilters: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
-  mockLessons : [
+  mockLessons: [
-    { 
+    {
-      id : 0,
+      id: 0,
-      title : "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
+      title:
+        "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
       duration: 256,
-      active : true,
+      active: true,
-      files : [
+      files: [
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
-        }, 
-        { 
-          type : 'video',
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
-          duration : '1:40:00',
-          view : true,
-          download : true
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : false
+          download: true,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: true,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'document',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-      ]
+        {
+          type: "document",
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
+          duration: "1:40:00",
+          view: false,
+          download: false,
+        },
+      ],
     },
-    { 
+    {
-      id : 1,
+      id: 1,
-      title : "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
+      title:
+        "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
       duration: 256,
-      active : false,
+      active: false,
-      files : [
+      files: [
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
-        }, 
+        },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-      ]
+      ],
     },
-    { 
+    {
-      id : 2,
+      id: 2,
-      title : "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
+      title:
+        "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
       duration: 256,
-      active : false,
+      active: false,
-      files : [
+      files: [
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
-        }, 
+        },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-      ]
+      ],
     },
-    { 
+    {
-      id : 3,
+      id: 3,
-      title : "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
+      title:
+        "درس اول : چگونه با نیاندیشن آینده خود و اطرافیانمان را نابود کنیم؟ ",
       duration: 256,
-      active : false,
+      active: false,
-      files : [
+      files: [
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : true
+          download: true,
-        }, 
-        { 
-          type : 'video',
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
-          duration : '1:40:00',
-          view : true,
-          download : true
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : true,
+          view: true,
-          download : false
+          download: true,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: true,
-          download : false
+          download: false,
         },
-        { 
+        {
-          type : 'video',
+          type: "video",
-          name : 'مقدمه ای جالب و قابل تامل مترجم کتاب',
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
-          duration : '1:40:00',
+          duration: "1:40:00",
-          view : false,
+          view: false,
-          download : false
+          download: false,
         },
-      ]
+        {
-    }
+          type: "video",
-  ]
+          name: "مقدمه ای جالب و قابل تامل مترجم کتاب",
+          duration: "1:40:00",
+          view: false,
+          download: false,
+        },
+      ],
+    },
+  ],
 };
 
 const grades = [
@@ -203,7 +207,7 @@ const grades = [
   "دوازدهم",
 ];
 
-export default function book(state = initialState, action : BookAction) {
+export default function book(state = initialState, action: BookAction) {
   let { type, data } = action;
   switch (type) {
     case "book/list":
@@ -231,6 +235,17 @@ export default function book(state = initialState, action : BookAction) {
       };
     case "book/info":
       return { ...state, loading: false, info: data, error: null };
+    case "book/lesson/active":
+      return {
+        ...state,
+        loading: false,
+        error: null,
+        mockLessons: state.mockLessons.map((item) =>
+          item.id === data
+            ? { ...item, active: !item.active }
+            : { ...item, active: false }
+        ),
+      };
     // case "book/update":
     //   return { ...state, loading: false, error: null };
     // case "book/add":

src/views/Course/Lesson/index.scss

@@ -2,7 +2,8 @@
   header {
     background-color: #414141;
     border: 1px solid #b3b3b3 !important;
-    padding: 15px !important;
+    padding: 10px 15px !important;
+    cursor: pointer;
     h4 {
       color: #9cdf52;
       margin: 0px;
@@ -47,6 +48,10 @@
         font-size: 18px;
       }
     }
+    &__duration{
+      width: 260px;
+      text-align: center;
+    }
     &__files{
       &--sample{
         li{
@@ -72,6 +77,10 @@
         font-size: calc(100vw / 80);
       }
     }
+    &__duration{
+      width: 250px;
+      text-align: center;
+    }
     &__files{
       &--sample{
         li{

src/views/Course/Lesson/index.tsx

@@ -4,17 +4,19 @@ import whitePlay from "../../../assets/icons/white-play.png";
 import document from "../../../assets/icons/document.png";
 import lock from "../../../assets/icons/lock.png";
 import './index.scss';
+import {connect} from 'react-redux';
+import {book} from '../../../redux/actions';
 
-export default function Lesson(props : any) {
+function Lesson(props : any) {
   const {lesson} = props;
   return (
     <div className="lesson d-flex flex-column">
-      <header className="d-flex justify-content-between align-items-center">
+      <header className="d-flex justify-content-between align-items-center" onClick={() => props.toggle(lesson.id)}>
         <div className="d-flex align-items-center">
           <img src={whiteDropdown} alt="" />
           <h4>{lesson.title}</h4>
         </div>
-        <div className="d-flex">
+        <div className="lesson__duration d-flex">
           مدت زمان درس {lesson.duration}
         </div>
       </header>
@@ -54,3 +56,7 @@ export default function Lesson(props : any) {
     </div>
   )
 }
+
+export default connect((state : any) => ({
+
+}),{toggle : book.setLessonActive})(Lesson);