shuffle-tolerate

src/components/_shared/DropArea/DropArea.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { JSX, Show, createSignal } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
+import { useSession } from '../../../context/session'
 import { UploadedFile } from '../../../pages/types'
 import { handleFileUpload } from '../../../utils/handleFileUpload'
 import { handleImageUpload } from '../../../utils/handleImageUpload'
@@ -27,6 +28,7 @@ export const DropArea = (props: Props) => {
   const [dragActive, setDragActive] = createSignal(false)
   const [dropAreaError, setDropAreaError] = createSignal<string>()
   const [loading, setLoading] = createSignal(false)
+  const { session } = useSession()
 
   const runUpload = async (files) => {
     try {
@@ -35,7 +37,7 @@ export const DropArea = (props: Props) => {
       const results: UploadedFile[] = []
       for (const file of files) {
         const handler = props.fileType === 'image' ? handleImageUpload : handleFileUpload
-        const result = await handler(file)
+        const result = await handler(file, session()?.access_token)
         results.push(result)
       }
       props.onUpload(results)

src/utils/getRandomTopicsFromArray.ts

@@ -2,6 +2,6 @@ import { RANDOM_TOPICS_COUNT } from '../components/Views/Home'
 import { Topic } from '../graphql/schema/core.gen'
 
 export const getRandomTopicsFromArray = (topics: Topic[], count: number = RANDOM_TOPICS_COUNT): Topic[] => {
-  const shuffledTopics = [...topics].sort(() => 0.5 - Math.random())
+  const shuffledTopics = [...(topics || [])].sort(() => 0.5 - Math.random())
   return shuffledTopics.slice(0, count)
 }

src/utils/handleFileUpload.ts

@@ -5,12 +5,15 @@ import { UploadedFile } from '../pages/types'
 const apiBaseUrl = 'https://core.discours.io'
 const apiUrl = `${apiBaseUrl}/upload`
 
-export const handleFileUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleFileUpload = async (uploadFile: UploadFile, token: string): Promise<UploadedFile> => {
   const formData = new FormData()
   formData.append('file', uploadFile.file, uploadFile.name)
   const response = await fetch(apiUrl, {
     method: 'POST',
     body: formData,
+    headers: {
+      Authorization: token,
+    },
   })
   return response.json()
 }

src/utils/handleImageUpload.ts

@@ -4,7 +4,8 @@ import { UploadedFile } from '../pages/types'
 
 import { thumborUrl } from './config'
 
-export const handleImageUpload = async (uploadFile: UploadFile): Promise<UploadedFile> => {
+export const handleImageUpload = async (uploadFile: UploadFile, _token: string): Promise<UploadedFile> => {
+  // TODO: image uploads can be authenticated too
   const formData = new FormData()
   formData.append('media', uploadFile.file, uploadFile.name)
   const response = await fetch(`${thumborUrl}/image`, {