frst-components 0.20.0

package/src/components/LXP/accordionTrack/accordionTrack.tsx

@@ -0,0 +1,402 @@
+import '../../../shared/global.css'
+import { IAccordionTranslate } from './IAccordionTrack'
+import * as Styles from './accordionTrackStyle'
+import { useState, useEffect } from 'react'
+import ThumbnailsDraggable from '../thumbnails/thumbnailsDraggable'
+import Thumbnails from '../thumbnails/thumbnails'
+import ScrollContainer from '@components/scroll-container'
+import { Droppable } from '@hello-pangea/dnd'
+import ContentCoursesTrails from './contentCoursesTrails'
+import ContentCourses from './contentCourses'
+import React from 'react'
+
+export default function AccordionTrack(props: IAccordionTranslate) {
+
+  const [trails, setTrail] = useState(props.trailsData)
+
+  const [courseData, setCourseData] = useState(props.courseData)
+  const [courseIndividualData, setCourseIndividualData] = useState(props.courseIndividualData)
+
+  const [ShowTrail, setShowTrail] = useState([]);
+  const [ShowIndividual, setShowIndividual] = useState<boolean>(true);
+  const [IsLoading, setIsLoading] = useState<boolean>(props.isLoading);
+  const MEUS_CONTEUDOS_CONTENT = '0'
+  const CONTEUDO_INDIVIDUAL_CONTENT = '1'
+
+  const create_UUID = () => {
+    var dt = new Date().getTime()
+    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = (dt + Math.random() * 16) % 16 | 0
+      dt = Math.floor(dt / 16)
+      return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
+    })
+    return uuid
+  }
+  
+  useEffect(()=>{
+    if (Array.isArray(props.trailsData)) {
+      setTrail(props.trailsData)
+      let showHideTrail = []    
+      props.trailsData.map((item) => {
+        showHideTrail.push(true)
+      })    
+      setShowTrail(showHideTrail)
+    }    
+  },[props.trailsData])
+
+
+  useEffect(() => {
+    setIsLoading(props.isLoading)
+  }, [props.isLoading])
+
+  useEffect(() => {
+    setCourseData(props.courseData)
+  }, [props.courseData])
+
+  useEffect(() => {
+    setCourseIndividualData(props.courseIndividualData)
+  }, [props.courseIndividualData])
+
+  return (
+    <>
+      {
+      /* ---------------------------------------------------------
+        Meus Conteúdos
+      --------------------------------------------------------- */
+      }   
+      <React.StrictMode>
+      <ContentCourses TrailName={''}>
+        <div>
+          <Styles.TypographyMyContents>
+            {props.textMeusConteudos ? props.textMeusConteudos : 'Meus Conteúdos'}
+          </Styles.TypographyMyContents>
+          <h2
+            style={{ fontFamily: 'PT Sans', fontWeight: 700, fontSize: 16, color: '#000000' }}
+          >
+            {
+              IsLoading ?
+              <>
+                <Styles.LoadingContent style={{width: 200, height: 20}}></Styles.LoadingContent>
+              </>
+              :
+              <>
+                {props.textTotalDe ? props.textTotalDe : 'Total de'} {props.courseData.length} {props.textRegistros ? props.textRegistros : 'registros'}
+              </>
+            }            
+          </h2>
+        </div>
+        
+        {/* Meus conteúdos */}
+        <Droppable droppableId={MEUS_CONTEUDOS_CONTENT} direction="horizontal" key={MEUS_CONTEUDOS_CONTENT}>
+          {(provided) => {
+            return (
+              <Styles.ContainerTrailsEmpty>
+                <ScrollContainer
+                  stepMove={380}
+                  isVisibleControlsButtons
+                  sizeArrowButton={80}
+                  marginsArrowButton={10}
+                  horizontalMarginInternScroll={'5px'}
+                  styles={{ justifyContent: 'flex-start', width: '100%' }}
+                  refreshResize={props.updateScrollSize}
+                >
+
+                  <Styles.ContainerCard ref={provided.innerRef} {...provided.droppableProps}>
+                    {
+                      IsLoading ?
+                      <>
+                        <Thumbnails 
+                            variant='default'
+                            isDisabled={false}
+                            isLoading
+                        />
+                        <Thumbnails 
+                            variant='default'
+                            isDisabled={false}
+                            isLoading
+                        />
+                        <Thumbnails 
+                            variant='default'
+                            isDisabled={false}
+                            isLoading
+                        />        
+                        <Thumbnails 
+                            variant='default'
+                            isDisabled={false}
+                            isLoading
+                        />                                                                   
+                      </>
+                      :
+                      <>
+                        <div 
+                          onClick={() => { 
+                            props.onNewTrail && props.onNewTrail() 
+                          }} 
+                          style={{wordWrap: 'break-word'}}
+                        >
+                          <Thumbnails variant='add' isDisabled={false} txtCriarNovoCurso={props.txtCriarNovoCurso} />
+                        </div>
+                        {
+                          courseData && courseData.map((el, contentIndex) => {
+                            return (
+                              <>
+                                <ThumbnailsDraggable
+                                  isDisabled={el.active}
+                                  key={`content${contentIndex}`}
+                                  id={`content${contentIndex}`}
+                                  index={contentIndex}
+                                  title={el.title}
+                                  variant={'default'}
+                                  handleSwitchAtivar={(checked) => {
+                                    props.handleSwitchAtivarConteudo(el.id, checked)
+                                  }}
+                                  isActive={el.active_individual}
+                                  showSwitch
+                                  src={el.settings.cover_thumb_url}
+                                  txtButtonLabel={props.txtButtonLabel}
+                                  txtAtivarCurso={props.txtAtivarCurso}
+                                  txtCriarNovoCurso={props.txtCriarNovoCurso}
+                                  handleClickCourse={() => {props.handleEditCourse(el.id)}}
+                                  handleClickPopOverEdit={() => {props.handlePopOverEdit(el.id)}}
+                                  handleClickPopOverMove={() => {props.handlePopOverMove(el.id)}}
+                                  handleClickPopOverDelete={() => {
+                                    props.handleDeleteCourse(el.id)
+                                  }}
+                                  txtPopOverEditContent={props.txtPopOverEditContent}
+                                  txtPopOverMoveToTrails={props.txtPopOverMoveToTrails}
+                                  txtPopOverDeleteContent={props.txtPopOverDeleteContent}                                                                                  
+                                />                          
+                              </>                              
+                            )
+                          })
+                        }
+                      </>
+                    }                  
+                  </Styles.ContainerCard>
+                </ScrollContainer>
+                {provided.placeholder}
+              </Styles.ContainerTrailsEmpty>
+            )
+          }}
+        </Droppable>
+      </ContentCourses>
+
+      {
+      /* ---------------------------------------------------------
+        Curso Individual
+      --------------------------------------------------------- */
+      }           
+      {
+        !IsLoading &&
+        <>
+          {/* 
+          //----------------------------------------------------------------------------
+          // Carregamento de trilhas
+          //---------------------------------------------------------------------------- 
+          */}
+          <ContentCoursesTrails
+            TrailName={props.txtCursoIndividual ? props.txtCursoIndividual : 'Conteúdo individual'}
+            ativo={true}
+            show={ShowIndividual}
+            handleChangeCheck={(bActive: boolean) => {
+              // if (props.handleSwitchActiveTrail) {
+              //   props.handleSwitchActiveTrail(trailIndex, bActive)
+              // }
+            }}
+            handleChangeTrailName={(name: boolean) => {
+              // if (props.onSetNameTrail) {
+              //   props.onSetNameTrail(name, trailIndex)
+              // }
+            }}
+            handleChangeShow={(bShow) => {
+              console.log(bShow)
+              setShowIndividual(bShow)           
+            }}
+            txtAtivarTrilha={props.txtAtivarTrilha}
+            handlePopOverTrailEdit={(id: string) => { props.handlePopOverTrailEdit(id) }}
+            handlePopOverTrailDelete={(id: string) => { props.handlePopOverTrailDelete(id) }}
+          >
+            {              
+              <Droppable droppableId={CONTEUDO_INDIVIDUAL_CONTENT} direction="horizontal" key={CONTEUDO_INDIVIDUAL_CONTENT}>
+                {(provided) => {
+                  return (
+                    <Styles.ContainerTrailsNormal style={{}}>
+                      <ScrollContainer
+                        stepMove={380}
+                        isVisibleControlsButtons
+                        sizeArrowButton={80}
+                        marginsArrowButton={10}
+                        horizontalMarginInternScroll={'5px'}
+                        refreshResize={props.updateScrollSize}
+                        styles={{ backgroundColor: '#ebebeb', justifyContent: 'flex-start', width: '100%' }}
+                      >
+                        <Styles.ContainerCard ref={provided.innerRef} {...provided.droppableProps}>
+                          {
+                            courseIndividualData && courseIndividualData.map((individual, individualIndex) => {
+                              return (
+                                <>
+                                  <ThumbnailsDraggable
+                                    key={`contentTrails${1}_individual${individualIndex}`}                                        
+                                    id={`contentTrails${1}_individual${individualIndex}`}                                
+                                    index={`${individualIndex}`}
+                                    isDisabled={individual.active === false ? false : individual.active}
+                                    title={individual.title}
+                                    variant={'default'}
+                                    showSwitch
+                                    handleClickCourse={() => {
+                                      props.handleEditCourse(individual.id)
+                                    }}
+                                    handleSwitchAtivar={(checked) => {
+                                      props.handleSwitchAtivarConteudo(individual.id, checked)
+                                    }}
+                                    src={individual.settings.cover_thumb_url}
+                                    txtButtonLabel={props.txtButtonLabel}
+                                    txtAtivarCurso={props.txtAtivarCurso}
+                                    txtCriarNovoCurso={props.txtCriarNovoCurso}
+                                    handleClickPopOverEdit={() => {props.handlePopOverEdit(individual.id)}}
+                                    handleClickPopOverMove={() => {props.handlePopOverMove(individual.id)}}
+                                    handleClickPopOverDelete={() => {
+                                      props.handleDeleteCourseTrail(individual.id)
+                                    }}                                        
+                                    txtPopOverEditContent={props.txtPopOverEditContent}
+                                    txtPopOverMoveToTrails={props.txtPopOverMoveToTrails}
+                                    txtPopOverDeleteContent={props.txtPopOverDeleteContent}
+                                  />
+                                </>
+                              )
+                            })
+                          }
+
+                        </Styles.ContainerCard>
+                      </ScrollContainer>
+                      {provided.placeholder}
+                    </Styles.ContainerTrailsNormal>
+                  )
+                }
+                }
+              </Droppable>
+            }
+          </ContentCoursesTrails>                
+        </>        
+      }
+
+      {
+      /* ---------------------------------------------------------
+        Trilhas 
+      --------------------------------------------------------- */
+      }           
+      {
+        !IsLoading &&
+        <>
+          <Styles.TypographyMyTrails style={{marginTop: 20}}>
+            {props.textMinhasTrihas ? props.textMinhasTrihas : 'Minhas Trilhas'}
+          </Styles.TypographyMyTrails>
+          {/* 
+          //----------------------------------------------------------------------------
+          // Carregamento de trilhas
+          //---------------------------------------------------------------------------- 
+          */}
+          {
+            trails && trails.map((trail, trailIndex) => {
+              return (
+                <>              
+                  <ContentCoursesTrails
+                    showButtonActive={true}
+                    key={`contentTrails${trailIndex}`}
+                    id={`${3000}${trailIndex}`}
+                    TrailName={trail.name}
+                    ativo={trail.active}
+                    handleChangeCheck={(bActive: boolean) => {
+                      if (props.handleSwitchActiveTrail) {
+                        props.handleSwitchActiveTrail(trailIndex, bActive)
+                      }
+                    }}
+                    handleChangeTrailName={(name: boolean) => {
+                      if (props.onSetNameTrail) {
+                        props.onSetNameTrail(name, trailIndex)
+                      }
+                    }}
+                    handleChangeShow={(bShow) => {                      
+                      setShowTrail((prev) => {
+                        prev = { ...prev }       
+                        prev[trailIndex] = bShow
+                        return prev
+                      })                  
+                    }}
+                    showButtonPublish={true}
+                    handlePublicarTrilha={props.handlePublicarTrilha}
+                    txtAtivarTrilha={props.txtAtivarTrilha}
+                    handlePopOverTrailEdit={(id: string) => { props.handlePopOverTrailEdit(id) }}
+                    handlePopOverTrailDelete={(id: string) => { props.handlePopOverTrailDelete(id) }}
+                  >
+                    {
+                      ShowTrail.length === 0 || ShowTrail[trailIndex] &&                  
+                      <Droppable droppableId={(trailIndex+2).toString()} direction="horizontal" key={trailIndex+2}>
+                        {(provided) => {
+                          return (
+                            <Styles.ContainerTrailsNormal
+                              key={`contentTrailsDrop${trailIndex}`}
+                            >
+                              <ScrollContainer
+                                stepMove={380}
+                                isVisibleControlsButtons
+                                sizeArrowButton={80}
+                                marginsArrowButton={10}
+                                horizontalMarginInternScroll={'5px'}
+                                refreshResize={props.updateScrollSize}
+                                styles={{ backgroundColor: '#ebebeb', justifyContent: 'flex-start', width: '100%' }}
+                              >
+
+                                <Styles.ContainerCard ref={provided.innerRef} {...provided.droppableProps}>
+                                  {
+                                    trail.trail_course && trail.trail_course.map((el, courseTrailIndex) => {
+                                      return (
+                                        <>
+                                          <ThumbnailsDraggable
+                                            id={`trail_${trailIndex}_course_${courseTrailIndex}`}                                                               
+                                            index={`${courseTrailIndex}`}                                          
+                                            isDisabled={trail.active === false ? false : el.course.active}
+                                            title={el.course.title}
+                                            variant={'default'}
+                                            handleClickCourse={() => {
+                                              props.handleEditCourse(el.course.id)
+                                            }}
+                                            showSwitch={true}
+                                            src={el.course.settings.cover_thumb_url}
+                                            txtButtonLabel={props.txtButtonLabel}
+                                            txtAtivarCurso={props.txtAtivarCurso}
+                                            txtCriarNovoCurso={props.txtCriarNovoCurso}
+                                            handleClickPopOverEdit={() => {props.handlePopOverEdit(el.course.id)}}
+                                            handleClickPopOverMove={() => {props.handlePopOverMove(el.course.id)}}
+                                            handleClickPopOverDelete={() => {
+                                              props.handleDeleteCourseTrail(el.course.id)
+                                            }}                                        
+                                            txtPopOverEditContent={props.txtPopOverEditContent}
+                                            txtPopOverMoveToTrails={props.txtPopOverMoveToTrails}
+                                            txtPopOverDeleteContent={props.txtPopOverDeleteContent}
+                                          />
+                                        </>
+                                      )
+                                    })
+                                  }
+
+                                </Styles.ContainerCard>
+                              </ScrollContainer>
+                              {provided.placeholder}
+                            </Styles.ContainerTrailsNormal>
+                          )
+                        }
+                        }
+                      </Droppable>
+                    }
+                  </ContentCoursesTrails>
+                </>
+              )
+            })
+          }
+        </>        
+      }        
+      </React.StrictMode>
+    </>
+  )
+}

package/src/components/LXP/accordionTrack/accordionTrackList.tsx

@@ -0,0 +1,263 @@
+import '../../../shared/global.css'
+import { useState, useEffect } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import { DragDropContext } from '@hello-pangea/dnd'
+// import { DragDropContext } from 'react-beautiful-dnd'
+import { IAccordionTranslate } from './IAccordionTrack'
+import AccordionTrack from './accordionTrack'
+import { Course } from '@shared/icons'
+
+export default function AccordionTrackList({
+  trailsData,
+  courseData,
+  handleChange,
+  onNewTrail,
+  handleEditCourse,
+  // handlePopOverDelete,
+  handlePopOverMove,
+  handlePopOverEdit,
+  handlePopOverTrailEdit,
+  handlePopOverTrailDelete,
+  handleSwitchActiveTrail,
+  onSetNameTrail,
+  handleSwitchAtivar,
+  handleDeleteCourse,
+  handleDeleteCourseTrail,
+  handleMessageError,
+  handleUpdateTrail,
+  txtPopOverDeleteContent,
+  txtPopOverEditContent,
+  txtPopOverMoveToTrails,
+  textMeusConteudos,
+  textTotalDe,
+  textRegistros,
+  textMinhasTrihas,
+  txtAtivarCurso,
+  txtButtonLabel,
+  txtCriarNovoCurso,
+  txtAtivarTrilha,
+  isLoading,
+  handlePublicarTrilha
+}: IAccordionTranslate) {
+  const [trails, setTrails] = useState(trailsData)
+  const [courses, setCourses] = useState(courseData)
+  const [ConteudoIndividual, setConteudoIndividual] = useState([])
+  const [MeusConteudosData, setMeusConteudosData] = useState([])
+  const [updateScrollSize, setUpdateScrollSize] = useState(0)
+  const MEUS_CONTEUDOS_CONTENT = '0'
+  const CONTEUDO_INDIVIDUAL_CONTENT = '1'
+
+  const create_UUID = () => {
+    var dt = new Date().getTime()
+    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = (dt + Math.random() * 16) % 16 | 0
+      dt = Math.floor(dt / 16)
+      return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
+    })
+    return uuid
+  }
+
+  useEffect(() => {
+    if (handleChange) {
+      handleChange({ courses: courses, trails: trails })
+    }
+  }, [trails])
+
+  useEffect(() => {
+    console.log("Atualizou em accordionTrackList", courses)
+    setMeusConteudosData(courses ? courses.filter(item => !item.active_individual) : [])
+    setConteudoIndividual(courses ? courses.filter(item => item.active_individual) : [])
+  }, [courses])
+
+  useEffect(() => {
+    console.log("Atualizou props em accordionTrackList", courseData)
+    setCourses(courseData)
+  }, [courseData])
+
+  useEffect(() => {   
+    setTrails(trailsData)
+  }, [trailsData])
+
+  const handleDragEnd = ({ destination, source }) => {
+    if (!destination) {
+      return
+    }
+
+    if (destination.index === source.index && destination.droppableId === source.droppableId) {
+      return
+    }
+
+    if ((destination.droppableId === MEUS_CONTEUDOS_CONTENT) && (source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT)) {
+      if (handleMessageError) {
+        handleMessageError('ERROR_COPY_TO_CONTENTS')
+      }
+      return
+    }
+
+    if (
+      (destination.droppableId !== source.droppableId) && 
+      ((destination.droppableId !== MEUS_CONTEUDOS_CONTENT) && (destination.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT))
+    ){
+      let idVerification = 0
+      if ((source.droppableId === MEUS_CONTEUDOS_CONTENT) || (source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT)) {
+        let uuidConteudo = source.droppableId === MEUS_CONTEUDOS_CONTENT ? MeusConteudosData[source.index].uuid : ConteudoIndividual[source.index].uuid
+        let indexTrail = courses.findIndex(item => item.uuid === uuidConteudo)
+        
+        idVerification = courseData[indexTrail].id
+
+      } else {
+        idVerification = trails[source.droppableId-2].trail_course[source.index].course.id
+      }
+
+      let filterCourses = trails[destination.droppableId-2].trail_course.find(
+        (element) => element.course.id === idVerification
+      )
+
+      if (filterCourses !== undefined) {
+        if (handleMessageError) {
+          handleMessageError('ERROR_DUPLICATE_CONTENTS')
+        }
+        return
+      }
+    }
+
+    /// Copiando do Meus conteúdos para Individual ou Individual para conteúdos
+    if (
+        ((source.droppableId === MEUS_CONTEUDOS_CONTENT) && (destination.droppableId === CONTEUDO_INDIVIDUAL_CONTENT)) ||
+        ((source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT) && (destination.droppableId === MEUS_CONTEUDOS_CONTENT))
+      ) {
+
+      /// Selecionando o UUID do conteúdo (se é individual ou não)
+      let uuidConteudo = source.droppableId === MEUS_CONTEUDOS_CONTENT ? MeusConteudosData[source.index].uuid : ConteudoIndividual[source.index].uuid
+      let indexTrail = courses.findIndex(item => item.uuid === uuidConteudo)
+      
+      if (indexTrail >= 0) {
+        setCourses((prev) => {
+          prev = [ ...prev ]
+          prev[indexTrail].active_individual = destination.droppableId === CONTEUDO_INDIVIDUAL_CONTENT
+          return prev
+        })
+      }      
+    }
+    else {
+      var itemCopy
+      if (source.droppableId === MEUS_CONTEUDOS_CONTENT) {
+        itemCopy = { ...MeusConteudosData[source.index] }
+      } else if (source.droppableId === CONTEUDO_INDIVIDUAL_CONTENT) {
+        itemCopy = { ...ConteudoIndividual[source.index] }
+      } else {
+        itemCopy = { ...trails[source.droppableId-2].trail_course[source.index].course }
+      }
+  
+      let trailId = trails[destination.droppableId - 2].id
+  
+      itemCopy = {
+        id: create_UUID(),
+        trail_id: trailId,
+        course: itemCopy,
+        course_id: itemCopy.id,
+        order: 0
+      }
+  
+      setTrails((prev) => {
+        prev = [ ...prev ]
+  
+        /// Armazendo o dado da trilha que será deletada
+        let deletedItem = null
+        if (source.droppableId !== MEUS_CONTEUDOS_CONTENT && source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT && source.droppableId !== destination.droppableId) {
+          deletedItem = prev[source.droppableId - 2].trail_course[source.index]
+        }
+  
+        /// Verificando se a movimentação vai ser do conteúdo ou das trilhas
+        if (source.droppableId !== MEUS_CONTEUDOS_CONTENT && source.droppableId !== CONTEUDO_INDIVIDUAL_CONTENT) {
+          prev[source.droppableId - 2].trail_course.splice(source.index, 1)
+        }
+        prev[destination.droppableId - 2].trail_course.splice(destination.index, 0, itemCopy)
+
+        /// Atualizando a saida
+        handleUpdateTrail(deletedItem, itemCopy, prev[destination.droppableId - 2])
+        return prev
+      })
+    }
+
+    setUpdateScrollSize(updateScrollSize + 1)
+  }
+
+  const setActiveTrail = (index, active) => {
+    setTrails((prev) => {
+      prev = { ...prev }
+      prev[index].active = active!
+      handleSwitchActiveTrail(prev[index].id, active!)
+      return prev
+    })
+  }
+
+  const setActiveContent = (id, active) => {
+    let indexTrail = courses.findIndex(item => item.id === id)      
+    setCourses((prev) => {
+      prev = [ ...prev ]
+      prev[indexTrail].active = active!
+      handleSwitchAtivar(id, active!)
+      return prev
+    })
+  }
+
+  const setNameTrail = (name, id) => {
+    const itemCopy = { ...trails[id] }
+    setTrails((prev) => {
+      prev = { ...prev }
+      prev[id].name = name
+      return prev
+    })
+    onSetNameTrail(name, trails[id].id)
+  }
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        {
+          <AccordionTrack
+            trailsData={trails}
+            courseData={MeusConteudosData}
+            courseIndividualData={ConteudoIndividual}
+            handleSwitchActiveTrail={(index, active) => {
+              setActiveTrail(index, active)
+            }}
+            onSetNameTrail={(name, id) => {
+              setNameTrail(name, id)
+            }}
+            onNewTrail={() => {
+              if (onNewTrail) {
+                onNewTrail()
+              }
+            }}
+            handleSwitchAtivarConteudo={setActiveContent}
+            handleSwitchAtivar={handleSwitchAtivar}
+            handleEditCourse={handleEditCourse}
+            handlePublicarTrilha={handlePublicarTrilha}
+            textMeusConteudos={textMeusConteudos}
+            textTotalDe={textTotalDe}
+            textRegistros={textRegistros}
+            textMinhasTrihas={textMinhasTrihas}
+            txtAtivarCurso={txtAtivarCurso}
+            txtAtivarTrilha={txtAtivarTrilha}
+            txtButtonLabel={txtButtonLabel}
+            txtCriarNovoCurso={txtCriarNovoCurso}
+            isLoading={isLoading}
+            updateScrollSize={updateScrollSize}
+            handleDeleteCourse={handleDeleteCourse}
+            handleDeleteCourseTrail={handleDeleteCourseTrail}
+            handlePopOverEdit={handlePopOverEdit}
+            handlePopOverTrailDelete={handlePopOverTrailDelete}
+            handlePopOverTrailEdit={handlePopOverTrailEdit}
+            handlePopOverMove={handlePopOverMove}
+            txtPopOverDeleteContent={txtPopOverDeleteContent}
+            txtPopOverEditContent={txtPopOverEditContent}
+            txtPopOverMoveToTrails={txtPopOverMoveToTrails}
+          />
+        }
+      </DragDropContext>
+    </ThemeProvider>
+  )
+}