feat(edit-course): display list of blocks and implement deleting

app/features/hidden-list-component.tsx

@@ -0,0 +1,110 @@
+import clsx from 'clsx'
+import { useState } from 'react'
+import { Arrow, DeleteIcon, EditIcon } from 'assets/icons'
+import { useDispatch } from 'react-redux'
+import { ThunkDispatch } from '@reduxjs/toolkit'
+import toast, { Toaster } from 'react-hot-toast'
+import { removeBlock } from '~/redux/slices/course'
+import { delay } from '~/widgets/helpers/delay'
+
+interface Props {
+  header: string
+  index: number
+  id: string
+  className?: string
+}
+
+export function HiddenListComponent({ header, index, className, id }: Props) {
+  const [isVisibly, setVisibly] = useState(false)
+
+  const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
+
+  function changeVisibly() {
+    setVisibly(!isVisibly)
+  }
+
+  const onClickRemove = async (id: string) => {
+    try {
+      let requestData = new FormData();
+      requestData.append('blockID', id);
+
+      const data = await dispatch(
+        removeBlock(requestData)
+      )
+
+      if (data.payload && data.payload.isError == false) {
+        console.log(true)
+
+        toast.success('Block was successfully deleted!')
+
+        delay(2000)
+
+        window.location.reload()
+      } else {
+        toast.error('Something went wrong!')
+
+        return
+      }
+    } catch (error) {
+      toast.error('Something went wrong!')
+    }
+  }
+
+  return (
+    <div
+      className={clsx(
+        'text-[#0F0F10] cursor-pointer relative w-full pb-3',
+        isVisibly
+          ? 'border-b-2 border-[#454BE9]'
+          : 'border-b-2 border-[#B5B7F6]-2',
+        className
+      )}
+      onClick={changeVisibly}
+      role="presentation"
+    >
+      <div className="flex items-center justify-start">
+        <div className="inline-block">
+          <p className="inline-block text-[#454be9] text-lg font-semibold">
+            {index}.
+          </p>
+          <p className="inline-block pl-2 text-lg text-[#1a1a1b] font-medium leading-[30px] font-manrope">
+            {header}
+          </p>
+        </div>
+
+        <div className="flex flex-row gap-4 absolute right-2">
+          <img src={EditIcon} alt="arrow" />
+          <img onClick={() => onClickRemove(id)} src={DeleteIcon} alt="arrow" />
+        </div>
+      </div>
+      <div
+        className={clsx(
+          ' duration-1400 transition-all ease-in-out',
+          isVisibly ? 'max-h-72' : 'max-h-0 overflow-hidden'
+        )}
+      >
+        <p className="font-manrope text-[#1A1A1B] leading-[30px] font-normal mt-8 text-base">
+          ergkmeriojgierjgioerjgiouerghjreuhgou
+        </p>
+      </div>
+
+      <Toaster
+        toastOptions={{
+          duration: 5000,
+          success: {
+            style: {
+              background: 'green',
+              color: 'white',
+            },
+          },
+          error: {
+            style: {
+              background: 'red',
+              color: 'white',
+            },
+          },
+        }}
+      />
+    </div>
+  )
+}

app/features/index.ts

@@ -1,3 +1,4 @@
 export * from './join-us-form'
 export * from './language-dropbox'
-export * from './faq-question'
+export * from './faq-question'
+export * from './hidden-list-component'

app/redux/slices/course.ts

@@ -28,6 +28,15 @@ export const updateBlock = createAsyncThunk(
   }
 )
 
+export const removeBlock = createAsyncThunk(
+    'course/removeBlock',
+    async (params: any) => {
+      const { data } = await instance.post('/CourseBlock/Delete', params)
+
+      return data
+    }
+  )
+
 const initialState = {
   course: {
     data: null,
@@ -61,6 +70,10 @@ const courseSlice = createSlice({
       state.course.status = 'loaded'
       state.course.isError = action.payload.isError
     })
+    builder.addCase(removeBlock.fulfilled, (state, action) => {
+        state.course.status = 'loaded'
+        state.course.isError = action.payload.isError
+      })
   },
 })
 

app/routes/edit-course.$course.tsx

@@ -5,14 +5,11 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import toast, { Toaster } from 'react-hot-toast'
 import { useDispatch, useSelector } from 'react-redux'
+import { HiddenListComponent } from '~/features'
 import { fetchCourse, updateBlock } from '~/redux/slices/course'
-import {
-  Header2,
-  Header3,
-  Header4,
-  RoundedInput,
-  TransparentButton,
-} from '~/shared'
+import { Header2, Header3, Header4, TransparentButton } from '~/shared'
+import { delay } from '~/widgets/helpers/delay'
+// import { delay } from '~/widgets/helpers/delay'
 
 export default function Course() {
   const params = useParams()
@@ -60,6 +57,10 @@ export default function Course() {
         console.log(true)
 
         toast.success('Block was successfully created!')
+
+        delay(2000)
+
+        window.location.reload()
       } else {
         toast.error('Something went wrong!')
 
@@ -103,7 +104,7 @@ export default function Course() {
               className="mt-2 flex flex-row gap-[26px]"
             >
               <input
-              placeholder='Назва розділу'
+                placeholder="Назва розділу"
                 className="pl-9 text-[#4E4E51] w-[656px] h-[50px] bg-[#F6F6F6] rounded-[50px] outline-none text-sm font-manrope font-normal border-0"
                 {...register('Name', { required: 'Enter name' })}
               />
@@ -114,6 +115,21 @@ export default function Course() {
                 </TransparentButton>
               </div>
             </form>
+
+            <div className="mt-6">
+              {/* ts-ignore */}
+              {course.data.courseElementsList.map(
+                (element: any, index: number) => (
+                  <div className="w-[656px] mt-4">
+                    <HiddenListComponent
+                      id={element.id}
+                      header={element.name}
+                      index={index + 1}
+                    />
+                  </div>
+                )
+              )}
+            </div>
           </div>
         </div>
       )}

app/shared/index.ts

@@ -11,4 +11,3 @@ export * from './Typo/header-3'
 export * from './Typo/header-4'
 export * from './divider'
 export * from './tag'
-

assets/icons/index.ts

@@ -14,4 +14,6 @@ export { default as ProcterGamble } from './procter-gamble.svg'
 export { default as Samsung } from './samsung.svg'
 export { default as Volkswagen } from './volkswagen.svg'
 export { default as Arrow } from './arrow.svg'
-export { default as RatingStar } from './rating-star.svg'
+export { default as RatingStar } from './rating-star.svg'
+export { default as DeleteIcon } from './delete.svg'
+export { default as EditIcon } from './edit.svg'