Merge pull request #10 from EspiraMarvin/documentation

documentation: add detailed documentations

src/components/AddPill.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { usePills } from '../hooks/usePills'
 
+/** allows addding of an audio file/pill to the audio pill library */
 export default function AddPill() {
   const { file, handleAddPillToLibrary, handleUploadNewPill, handleDragOver } =
     usePills()

src/components/AudioLibrary.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import File from './File'
 import { usePills } from '../hooks/usePills'
 
+/** displays audio files */
 export default function AudioLibrary() {
   const { files } = usePills()
   return (

src/components/CreateTrack.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTracks } from '../hooks/useTracks'
 
+/** allows creating of a track, adds the track name */
 export default function CreateTrack() {
   const [loading, setLoading] = useState(false)
   const [audioTrackLength, setAudioTrackLength] = useState(0)

src/components/File.tsx

@@ -14,6 +14,7 @@ interface FileInterface {
   file: IFile
 }
 
+/** holds audio files displayed in the audio library */
 export default function File({ file }: FileInterface) {
   const [isPlaying, setIsPlaying] = useState(false)
   const [duration, setDuration] = useState(0)

src/components/Pill.tsx

@@ -19,6 +19,7 @@ interface PillInterface {
   handleDragEnter: (e: any, index: number) => any
 }
 
+/** displayed on the timeline, essentially forms a track */
 export default function Pill({
   file,
   index,

src/components/Timeline.tsx

@@ -4,6 +4,7 @@ import Pill from './Pill'
 import { usePills } from '../hooks/usePills'
 import { useTracks } from '../hooks/useTracks'
 
+/** allows adding of multiple pills on a track, shifting position of pills on the track, and playback options */
 export default function Timeline() {
   const [isPlaying, setIsPlaying] = useState(false)
   const [playingIndex, setPlayingIndex] = useState(0)
@@ -48,7 +49,7 @@ export default function Timeline() {
       )}
       {audioTrackLength > 0 && pills.length > 0 && (
         <div className="border">
-          <div className="flex flex-row border-top p-2 overflow-x-auto overflow-x-scroll">
+          <div className="flex flex-row border-top p-2 w-[100vw] scroll-x-auto">
             {pills.map((pill: any, index: any) => (
               <Pill
                 key={index}

src/components/TracksList.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import ReactPlayer from 'react-player'
 import { useTracks } from '../hooks/useTracks'
 
+/** shows the tracks  in a list */
 export default function TracksList() {
   const {
     audioTracks,

src/context/PillsContext.tsx

@@ -95,7 +95,6 @@ export const PillsProvider = ({ children }: { children: React.ReactNode }) => {
    */
   const handleUploadNewPill = useCallback((event: any) => {
     event.preventDefault()
-    // try {
     let isDropped = event?.dataTransfer?.files[0]?.type.includes('audio')
     let isUploaded = event?.target?.files[0]?.type.includes('audio')
 
@@ -123,11 +122,9 @@ export const PillsProvider = ({ children }: { children: React.ReactNode }) => {
       }
       setFile(newFile)
     }
-    // } catch (error: any) {
-    // notify(error?.message)
-    // }
   }, [])
 
+  /** handles pill start drag event */
   const handleDragStart = useCallback(
     () => (e: any, index: any) => {
       setDragItemIndex(index)
@@ -142,28 +139,19 @@ export const PillsProvider = ({ children }: { children: React.ReactNode }) => {
 
   /** handles drag enter event */
   const handleDragEnter = useCallback((e: any, index: any) => {
-    console.log('handleDragEnter', index)
-
     setDragOverItemIndex(index)
   }, [])
 
   /** handles drag drop event */
   const handleDrop = useCallback(
     (event: any, index: any) => {
-      console.log('BEFORE REORDERED PILLS', pills)
-
-      // console.log('event at handleDrop', event)
-      console.log('index at handleDrop', index)
-
+      /** from this event we can now reorder the order of each pill according to the index dropped on */
       const reorderedPills = [...pills]
       // move item to new position
       const dragItem = reorderedPills.splice(dragItemIndex, 1)[0]
-      console.log('DRAG ITEM', dragItem)
-      console.log('dragOverItemIndex', dragOverItemIndex)
 
       reorderedPills.splice(dragOverItemIndex, 0, dragItem)
       setPills(reorderedPills)
-      console.log('REORDERED PILLS', reorderedPills)
       setDragOverItemIndex(undefined)
     },
     [dragItemIndex, dragOverItemIndex, pills]

src/context/TracksContext.tsx

@@ -65,13 +65,15 @@ export const TracksProvider = ({ children }: { children: React.ReactNode }) => {
     }
   }, [trackName])
 
+  /** add pill to track */
   const handleAddPillToTrack = useCallback(
     (pill: any) => {
       setPills([...pills, pill])
     },
     [pills, setPills]
   )
 
+  /** save audio track, and show it in the Tracks list */
   const saveTrack = useCallback(() => {
     const newAudioTrack = { title: audioTrack.title, sources: [...pills] }
     setAudioTracks((prev: any) => [newAudioTrack, ...prev])
@@ -82,6 +84,7 @@ export const TracksProvider = ({ children }: { children: React.ReactNode }) => {
     setPlayingIndex(0)
   }, [audioTrack, pills, setPills])
 
+  /** delete pill from track in the timeline */
   const handleDeletePillFromTrack = useCallback(
     (pill: IPill) => {
       const index = pills.indexOf(pill)
@@ -94,6 +97,7 @@ export const TracksProvider = ({ children }: { children: React.ReactNode }) => {
     [pills, setPills]
   )
 
+  /** delete track from track list */
   const handleDeleteTrackFromTrackList = useCallback(
     (track: any) => {
       const index = audioTracks.indexOf(track)