From 1b1f3441dd55c9876792e336b4528fc94ad2e6bb Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 13:33:57 +0300 Subject: [PATCH 1/7] shuffle-tolerate --- src/components/_shared/DropArea/DropArea.tsx | 4 +++- src/utils/getRandomTopicsFromArray.ts | 2 +- src/utils/handleFileUpload.ts | 5 ++++- src/utils/handleImageUpload.ts | 3 ++- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/_shared/DropArea/DropArea.tsx b/src/components/_shared/DropArea/DropArea.tsx index 6e4db3d2..0ed46617 100644 --- a/src/components/_shared/DropArea/DropArea.tsx +++ b/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() 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) diff --git a/src/utils/getRandomTopicsFromArray.ts b/src/utils/getRandomTopicsFromArray.ts index ced616c0..58415c8d 100644 --- a/src/utils/getRandomTopicsFromArray.ts +++ b/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) } diff --git a/src/utils/handleFileUpload.ts b/src/utils/handleFileUpload.ts index 7013de52..6d7066ed 100644 --- a/src/utils/handleFileUpload.ts +++ b/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 => { +export const handleFileUpload = async (uploadFile: UploadFile, token: string): Promise => { 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() } diff --git a/src/utils/handleImageUpload.ts b/src/utils/handleImageUpload.ts index 54ec619e..d0308a03 100644 --- a/src/utils/handleImageUpload.ts +++ b/src/utils/handleImageUpload.ts @@ -4,7 +4,8 @@ import { UploadedFile } from '../pages/types' import { thumborUrl } from './config' -export const handleImageUpload = async (uploadFile: UploadFile): Promise => { +export const handleImageUpload = async (uploadFile: UploadFile, _token: string): Promise => { + // TODO: image uploads can be authenticated too const formData = new FormData() formData.append('media', uploadFile.file, uploadFile.name) const response = await fetch(`${thumborUrl}/image`, { From 28022607e314504eb2d1372dc30d1efc2c260931 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 13:46:00 +0300 Subject: [PATCH 2/7] topics-fix-2 --- src/utils/getRandomTopicsFromArray.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/getRandomTopicsFromArray.ts b/src/utils/getRandomTopicsFromArray.ts index 58415c8d..ebfbc9b5 100644 --- a/src/utils/getRandomTopicsFromArray.ts +++ b/src/utils/getRandomTopicsFromArray.ts @@ -2,6 +2,7 @@ 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()) + if (!topics) return [] + const shuffledTopics = [...topics].sort(() => 0.5 - Math.random()) return shuffledTopics.slice(0, count) } From 3f8d495076f298e927fd4d17f8554443ff2cacc4 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 13:50:15 +0300 Subject: [PATCH 3/7] shuffle-topic-fix-2 --- src/components/Nav/Header/Header.tsx | 2 +- src/utils/getRandomTopicsFromArray.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 312a6e1f..454fe521 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -69,7 +69,7 @@ export const Header = (props: Props) => { let windowScrollTop = 0 createEffect(() => { - setRandomTopics(getRandomTopicsFromArray(topics())) + if (topics()) setRandomTopics(getRandomTopicsFromArray(topics())) }) createEffect(() => { diff --git a/src/utils/getRandomTopicsFromArray.ts b/src/utils/getRandomTopicsFromArray.ts index ebfbc9b5..ced616c0 100644 --- a/src/utils/getRandomTopicsFromArray.ts +++ b/src/utils/getRandomTopicsFromArray.ts @@ -2,7 +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[] => { - if (!topics) return [] const shuffledTopics = [...topics].sort(() => 0.5 - Math.random()) return shuffledTopics.slice(0, count) } From 56f46c18dde6b66109175d27c8ca573db4d743a0 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 13:53:35 +0300 Subject: [PATCH 4/7] shuffle-topic-fix-3 --- src/components/Nav/Header/Header.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 454fe521..75ceeaac 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -69,7 +69,10 @@ export const Header = (props: Props) => { let windowScrollTop = 0 createEffect(() => { - if (topics()) setRandomTopics(getRandomTopicsFromArray(topics())) + if (topics()?.length) { + console.debug(topics()) + setRandomTopics(getRandomTopicsFromArray(topics())) + } }) createEffect(() => { From 83379c53aeb16025b2cd7d3241002c29eba68877 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 14:07:19 +0300 Subject: [PATCH 5/7] auth-upload --- src/components/Editor/Editor.tsx | 2 +- .../Editor/UploadModalContent/UploadModalContent.tsx | 5 +++-- src/components/Nav/Header/Header.tsx | 1 - src/components/ProfileSettings/ProfileSettings.tsx | 4 ++-- src/components/_shared/SolidSwiper/EditorSwiper.tsx | 5 +++-- src/utils/handleImageUpload.ts | 5 +++-- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 950aa355..26b79f75 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -151,7 +151,7 @@ export const Editor = (props: Props) => { } showSnackbar({ body: t('Uploading image') }) - const result = await handleImageUpload(uplFile) + const result = await handleImageUpload(uplFile, session()?.access_token) editor() .chain() diff --git a/src/components/Editor/UploadModalContent/UploadModalContent.tsx b/src/components/Editor/UploadModalContent/UploadModalContent.tsx index c2e99ad4..51b0939f 100644 --- a/src/components/Editor/UploadModalContent/UploadModalContent.tsx +++ b/src/components/Editor/UploadModalContent/UploadModalContent.tsx @@ -12,6 +12,7 @@ import { Icon } from '../../_shared/Icon' import { Loading } from '../../_shared/Loading' import { InlineForm } from '../InlineForm' +import { useSession } from '../../../context/session' import styles from './UploadModalContent.module.scss' type Props = { @@ -24,12 +25,12 @@ export const UploadModalContent = (props: Props) => { const [uploadError, setUploadError] = createSignal() const [dragActive, setDragActive] = createSignal(false) const [dragError, setDragError] = createSignal() - + const { session } = useSession() const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) const runUpload = async (file: UploadFile) => { try { setIsUploading(true) - const result = await handleImageUpload(file) + const result = await handleImageUpload(file, session()?.access_token) props.onClose(result) setIsUploading(false) } catch (error) { diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 75ceeaac..360d5a25 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -70,7 +70,6 @@ export const Header = (props: Props) => { createEffect(() => { if (topics()?.length) { - console.debug(topics()) setRandomTopics(getRandomTopicsFromArray(topics())) } }) diff --git a/src/components/ProfileSettings/ProfileSettings.tsx b/src/components/ProfileSettings/ProfileSettings.tsx index 9d405a9b..15532ddb 100644 --- a/src/components/ProfileSettings/ProfileSettings.tsx +++ b/src/components/ProfileSettings/ProfileSettings.tsx @@ -57,7 +57,7 @@ export const ProfileSettings = () => { const [nameError, setNameError] = createSignal() const { form, submit, updateFormField, setForm } = useProfileForm() const { showSnackbar } = useSnackbar() - const { loadAuthor } = useSession() + const { loadAuthor, session } = useSession() const { showConfirm } = useConfirm() createEffect(() => { @@ -140,7 +140,7 @@ export const ProfileSettings = () => { setUploadError(false) setIsUserpicUpdating(true) - const result = await handleImageUpload(uploadFile) + const result = await handleImageUpload(uploadFile, session()?.access_token) updateFormField('pic', result.url) setUserpicFile(null) diff --git a/src/components/_shared/SolidSwiper/EditorSwiper.tsx b/src/components/_shared/SolidSwiper/EditorSwiper.tsx index c7f53a03..83d691a8 100644 --- a/src/components/_shared/SolidSwiper/EditorSwiper.tsx +++ b/src/components/_shared/SolidSwiper/EditorSwiper.tsx @@ -19,6 +19,7 @@ import { Popover } from '../Popover' import { SwiperRef } from './swiper' +import { useSession } from '../../../context/session' import styles from './Swiper.module.scss' const SimplifiedEditor = lazy(() => import('../../Editor/SimplifiedEditor')) @@ -36,7 +37,7 @@ export const EditorSwiper = (props: Props) => { const [loading, setLoading] = createSignal(false) const [slideIndex, setSlideIndex] = createSignal(0) const [slideBody, setSlideBody] = createSignal() - + const { session } = useSession() const mainSwipeRef: { current: SwiperRef } = { current: null } const thumbSwipeRef: { current: SwiperRef } = { current: null } @@ -100,7 +101,7 @@ export const EditorSwiper = (props: Props) => { setLoading(true) const results: UploadedFile[] = [] for (const file of selectedFiles) { - const result = await handleImageUpload(file) + const result = await handleImageUpload(file, session()?.access_token) results.push(result) } props.onImagesAdd(composeMediaItems(results)) diff --git a/src/utils/handleImageUpload.ts b/src/utils/handleImageUpload.ts index d0308a03..56181ca8 100644 --- a/src/utils/handleImageUpload.ts +++ b/src/utils/handleImageUpload.ts @@ -4,13 +4,14 @@ import { UploadedFile } from '../pages/types' import { thumborUrl } from './config' -export const handleImageUpload = async (uploadFile: UploadFile, _token: string): Promise => { - // TODO: image uploads can be authenticated too +export const handleImageUpload = async (uploadFile: UploadFile, token: string): Promise => { const formData = new FormData() formData.append('media', uploadFile.file, uploadFile.name) + const headers = token ? { Authorization: token } : {} const response = await fetch(`${thumborUrl}/image`, { method: 'POST', body: formData, + headers }) const location = response.headers.get('Location') From 8e69c3979e5e84c8f7014d4ef1736a7d686e0cc0 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 14:08:41 +0300 Subject: [PATCH 6/7] fmt --- src/utils/handleImageUpload.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/handleImageUpload.ts b/src/utils/handleImageUpload.ts index 56181ca8..9fd2455f 100644 --- a/src/utils/handleImageUpload.ts +++ b/src/utils/handleImageUpload.ts @@ -11,7 +11,7 @@ export const handleImageUpload = async (uploadFile: UploadFile, token: string): const response = await fetch(`${thumborUrl}/image`, { method: 'POST', body: formData, - headers + headers, }) const location = response.headers.get('Location') From fe695f427fd3a1e47a744cc1b1ac7c508a3e780f Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 6 May 2024 17:26:03 +0300 Subject: [PATCH 7/7] postmerge --- src/components/Nav/Header/Header.tsx | 4 ++-- src/components/Nav/HeaderAuth.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 360d5a25..f1342f1d 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -59,7 +59,7 @@ export const Header = (props: Props) => { const [isTopicsVisible, setIsTopicsVisible] = createSignal(false) const [isZineVisible, setIsZineVisible] = createSignal(false) const [isFeedVisible, setIsFeedVisible] = createSignal(false) - const { isAuthenticated } = useSession() + const { session } = useSession() const toggleFixed = () => setFixed(!fixed()) @@ -335,7 +335,7 @@ export const Header = (props: Props) => {
{ +