discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge branch 'dev' of github.com:Discours/discoursio-webapp into feature/rating

Browse Source
This commit is contained in:
Untone 2024-05-06 23:22:29 +03:00
commit 7d515c4fe2
25 changed files with 141 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/node-ci.yml vendored
View File

@ -13,7 +13,7 @@ jobs:
run: npm ci
- name: Check types
run: npm run typecheck
run: npm run check:types
- name: Lint with Biome
run: npm run check:code

4
package.json
View File

@ -24,8 +24,8 @@
"lint:styles:fix": "stylelint **/*.{scss,css} --fix",
"preview": "vite preview",
"start": "vite",
"typecheck": "tsc --noEmit",
"typecheck:watch": "tsc --noEmit --watch"
"check:types": "tsc --noEmit",
"check:types:watch": "tsc --noEmit --watch"
},
"dependencies": {
"form-data": "4.0.0",

1
public/locales/en/translation.json
View File

@ -449,6 +449,7 @@
"Write your colleagues name or email": "Write your colleague's name or email",
"You can download multiple tracks at once in .mp3, .wav or .flac formats": "You can download multiple tracks at once in .mp3, .wav or .flac formats",
"You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
"You can't edit this post": "You can't edit this post",
"You were successfully authorized": "You were successfully authorized",
"You ll be able to participate in discussions, rate others' comments and learn about new responses": "You ll be able to participate in discussions, rate others' comments and learn about new responses",
"You've confirmed email": "You've confirmed email",

1
public/locales/ru/translation.json
View File

@ -472,6 +472,7 @@
"You can download multiple tracks at once in .mp3, .wav or .flac formats": "Можно загрузить сразу несколько треков в форматах .mp3, .wav или .flac",
"You can now login using your new password": "Теперь вы можете входить с помощью нового пароля",
"You was successfully authorized": "Вы были успешно авторизованы",
"You can't edit this post": "Вы не можете редактировать этот материал",
"You ll be able to participate in discussions, rate others' comments and learn about new responses": "Вы сможете участвовать в обсуждениях, оценивать комментарии других и узнавать о новых ответах",
"You've confirmed email": "Вы подтвердили почту",
"You've reached a non-existed page": "Вы попали на несуществующую страницу",

7
src/components/Article/CommentsTree.tsx
View File

@ -29,7 +29,7 @@ export const CommentsTree = (props: Props) => {
const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
const [clearEditor, setClearEditor] = createSignal(false)
const [clickedReplyId, setClickedReplyId] = createSignal<number>()
const { reactionEntities, createReaction } = useReactions()
const { reactionEntities, createReaction, loadReactionsBy } = useReactions()
const comments = createMemo(() =>
Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT'),
@ -68,7 +68,9 @@ export const CommentsTree = (props: Props) => {
setCookie()
}
})
const [posting, setPosting] = createSignal(false)
const handleSubmitComment = async (value: string) => {
setPosting(true)
try {
await createReaction({
kind: ReactionKind.Comment,
@ -76,10 +78,12 @@ export const CommentsTree = (props: Props) => {
shout: props.shoutId,
})
setClearEditor(true)
await loadReactionsBy({ by: { shout: props.shoutSlug } })
} catch (error) {
console.error('[handleCreate reaction]:', error)
}
setClearEditor(false)
setPosting(false)
}
return (
@ -157,6 +161,7 @@ export const CommentsTree = (props: Props) => {
placeholder={t('Write a comment...')}
onSubmit={(value) => handleSubmitComment(value)}
setClear={clearEditor()}
isPosting={posting()}
/>
</ShowIfAuthenticated>
</>

2
src/components/Editor/Editor.tsx
View File

@ -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()

4
src/components/Editor/SimplifiedEditor.tsx
View File

@ -36,6 +36,7 @@ import { UploadModalContent } from './UploadModalContent'
import { Figcaption } from './extensions/Figcaption'
import { Figure } from './extensions/Figure'
import { Loading } from '../_shared/Loading'
import styles from './SimplifiedEditor.module.scss'
type Props = {
@ -58,6 +59,7 @@ type Props = {
controlsAlwaysVisible?: boolean
autoFocus?: boolean
isCancelButtonVisible?: boolean
isPosting?: boolean
}
const DEFAULT_MAX_LENGTH = 400
@ -365,12 +367,14 @@ const SimplifiedEditor = (props: Props) => {
<Show when={isCancelButtonVisible()}>
<Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
</Show>
<Show when={!props.isPosting} fallback={<Loading />}>
<Button
value={props.submitButtonText ?? t('Send')}
variant="primary"
disabled={isEmpty()}
onClick={() => props.onSubmit(html())}
/>
</Show>
</div>
</Show>
</div>

5
src/components/Editor/UploadModalContent/UploadModalContent.tsx
View File

@ -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<string | undefined>()
const [dragActive, setDragActive] = createSignal(false)
const [dragError, setDragError] = createSignal<string | undefined>()
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) {

7
src/components/Nav/AuthModal/LoginForm.tsx
View File

@ -97,7 +97,12 @@ export const LoginForm = () => {
const { errors } = await signIn({ email: email(), password: password() })
console.error('[signIn errors]', errors)
if (errors?.length > 0) {
if (errors.some((error) => error.message.includes('bad user credentials'))) {
if (
errors.some(
(error) =>
error.message.includes('bad user credentials') || error.message.includes('user not found'),
)
) {
setValidationErrors((prev) => ({
...prev,
password: t('Something went wrong, check email and password'),

7
src/components/Nav/AuthModal/SendResetLinkForm.tsx
View File

@ -61,7 +61,12 @@ export const SendResetLinkForm = () => {
redirect_uri: window.location.origin,
})
console.debug('[SendResetLinkForm] authorizer response:', data)
if (errors?.some((error) => error.message.includes('bad user credentials'))) {
if (
errors?.some(
(error) =>
error.message.includes('bad user credentials') || error.message.includes('user not found'),
)
) {
setIsUserNotFound(true)
}
if (data.message) setMessage(data.message)

9
src/components/Nav/Header/Header.tsx
View File

@ -59,6 +59,7 @@ export const Header = (props: Props) => {
const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
const [isZineVisible, setIsZineVisible] = createSignal(false)
const [isFeedVisible, setIsFeedVisible] = createSignal(false)
const { session } = useSession()
const toggleFixed = () => setFixed(!fixed())
@ -68,7 +69,9 @@ export const Header = (props: Props) => {
let windowScrollTop = 0
createEffect(() => {
if (topics()?.length) {
setRandomTopics(getRandomTopicsFromArray(topics()))
}
})
createEffect(() => {
@ -330,7 +333,11 @@ export const Header = (props: Props) => {
</div>
<HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
<Show when={props.title}>
<div class={clsx(styles.articleControls, 'col-auto')}>
<div
class={clsx(styles.articleControls, 'col-auto', {
// FIXME: use or remove [styles.articleControlsAuthorized]: session()?.user?.id,
})}
>
<SharePopup
title={props.title}
imageUrl={props.cover}

58
src/components/Nav/HeaderAuth.tsx
View File

@ -34,12 +34,12 @@ export const HeaderAuth = (props: Props) => {
const { page } = useRouter()
const { session, author, isSessionLoaded } = useSession()
const { unreadNotificationsCount, showNotificationsPanel } = useNotifications()
const { form, toggleEditorPanel, saveShout, saveDraft, publishShout } = useEditorContext()
const { form, toggleEditorPanel, saveShout, publishShout } = useEditorContext()
const handleBellIconClick = (event: Event) => {
event.preventDefault()
if (!author()?.id) {
if (!session()?.access_token) {
showModal('auth')
return
}
@ -48,22 +48,19 @@ export const HeaderAuth = (props: Props) => {
}
const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')
const isNotificationsVisible = createMemo(() => author()?.id && !isEditorPage())
const isSaveButtonVisible = createMemo(() => author()?.id && isEditorPage())
const isNotificationsVisible = createMemo(() => session()?.access_token && !isEditorPage())
const isSaveButtonVisible = createMemo(() => session()?.access_token && isEditorPage())
const isCreatePostButtonVisible = createMemo(() => !isEditorPage())
const isAuthenticatedControlsVisible = createMemo(() => author()?.id && session()?.user?.email_verified)
const isAuthenticatedControlsVisible = createMemo(
() => session()?.access_token && session()?.user?.email_verified,
)
const handleBurgerButtonClick = () => {
toggleEditorPanel()
}
// FIXME: use handler
const _handleSaveClick = () => {
const hasTopics = form.selectedTopics?.length > 0
if (hasTopics) {
const handleSaveButtonClick = () => {
saveShout(form)
} else {
saveDraft(form)
}
}
const [width, setWidth] = createSignal(0)
@ -109,14 +106,8 @@ export const HeaderAuth = (props: Props) => {
<Show when={isSessionLoaded()} keyed={true}>
<div class={clsx('col-auto col-lg-7', styles.usernav)}>
<div class={styles.userControl}>
<Show when={isCreatePostButtonVisible() && author()?.id}>
<div
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
// styles.userControlItemCreate,
)}
>
<Show when={isCreatePostButtonVisible() && session()?.access_token}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil-outline" class={styles.icon} />
@ -223,18 +214,12 @@ export const HeaderAuth = (props: Props) => {
</div>
</Show>
<Show when={isCreatePostButtonVisible() && !author()?.id}>
<div
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
// styles.userControlItemCreate,
)}
>
<Show when={isCreatePostButtonVisible() && !session()?.access_token}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
<a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil-outline" class={styles.icon} />
<Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
<Icon name="pencil" class={styles.icon} />
<Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
</a>
</div>
</Show>
@ -242,24 +227,19 @@ export const HeaderAuth = (props: Props) => {
<Show
when={isAuthenticatedControlsVisible()}
fallback={
<Show when={!author()?.id}>
<Show when={!session()?.access_token}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
<a href="?m=auth&mode=login">
<span class={styles.textLabel}>{t('Enter')}</span>
<Icon name="key" class={styles.icon} />
<Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
{/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
</a>
</div>
</Show>
}
>
<Show when={!isSaveButtonVisible()}>
<div
class={clsx(
styles.userControlItem,
// styles.userControlItemInbox
)}
>
<div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
<a href={getPagePath(router, 'inbox')}>
<div classList={{ entered: page().path === '/inbox' }}>
<Icon name="inbox-white" class={styles.icon} />
@ -271,7 +251,7 @@ export const HeaderAuth = (props: Props) => {
</Show>
</div>
<Show when={author()?.id}>
<Show when={session()?.access_token}>
<ProfilePopup
onVisibilityChange={(isVisible) => {
props.setIsProfilePopupVisible(isVisible)

4
src/components/ProfileSettings/ProfileSettings.tsx
View File

@ -57,7 +57,7 @@ export const ProfileSettings = () => {
const [nameError, setNameError] = createSignal<string>()
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)

18
src/components/Views/DraftsView/DraftsView.tsx
View File

@ -13,16 +13,20 @@ import { Loading } from '../../_shared/Loading'
import styles from './DraftsView.module.scss'
export const DraftsView = () => {
const { session } = useSession()
const { author, loadSession } = useSession()
const [drafts, setDrafts] = createSignal<Shout[]>([])
createEffect(
on(
() => session(),
async (s) => {
if (s) {
const loadedDrafts = await apiClient.getDrafts()
setDrafts(loadedDrafts.reverse() || [])
() => author(),
async (a) => {
if (a) {
const { shouts: loadedDrafts, error } = await apiClient.getDrafts()
if (error) {
console.warn(error)
await loadSession()
}
setDrafts(loadedDrafts || [])
}
},
),
@ -46,7 +50,7 @@ export const DraftsView = () => {
return (
<div class={clsx(styles.DraftsView)}>
<Show when={session()?.user?.id} fallback={<Loading />}>
<Show when={author()?.id} fallback={<Loading />}>
<div class="wide-container">
<div class="row">
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">

4
src/components/_shared/DropArea/DropArea.tsx
View File

@ -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)

5
src/components/_shared/SolidSwiper/EditorSwiper.tsx
View File

@ -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<string>()
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))

2
src/graphql/client/core.ts
View File

@ -175,7 +175,7 @@ export const apiClient = {
console.debug('[graphql.client.core] deleteShout:', response)
},
getDrafts: async (): Promise<Shout[]> => {
getDrafts: async (): Promise<CommonResult> => {
const response = await apiClient.private.query(draftsLoad, {}).toPromise()
console.debug('[graphql.client.core] getDrafts:', response)
return response.data.get_shouts_drafts

3
src/graphql/query/core/articles-load-drafts.ts
View File

@ -3,6 +3,8 @@ import { gql } from '@urql/core'
export default gql`
query LoadDraftsQuery {
get_shouts_drafts {
error
shouts {
id
title
subtitle
@ -40,4 +42,5 @@ export default gql`
}
}
}
}
`

28
src/graphql/query/core/my-followed.ts
View File

@ -1,28 +0,0 @@
import { gql } from '@urql/core'
export default gql`
query MySubscriptionsQuery {
get_my_followed {
topics {
id
title
body
slug
}
authors {
id
name
slug
pic
created_at
}
communities {
id
name
slug
pic
created_at
}
}
}
`

3
src/pages/edit.page.tsx
View File

@ -37,7 +37,8 @@ export const EditPage = () => {
const fail = async (error: string) => {
console.error(error)
await snackbar?.showSnackbar({ type: 'error', body: t(error) })
const errorMessage = error === 'forbidden' ? "You can't edit this post" : error
await snackbar?.showSnackbar({ type: 'error', body: t(errorMessage) })
redirectPage(router, 'drafts')
}

19
src/renderer/_default.page.client.tsx
View File

@ -1,7 +1,7 @@
import type { PageContextBuiltInClientWithClientRouting } from 'vike/types'
import type { PageContext } from './types'
// import * as Sentry from '@sentry/browser'
import { init as SentryInit, replayIntegration } from '@sentry/browser'
import i18next from 'i18next'
import HttpApi from 'i18next-http-backend'
import ICU from 'i18next-icu'
@ -9,7 +9,7 @@ import { hydrate } from 'solid-js/web'
import { App } from '../components/App'
import { initRouter } from '../stores/router'
// import { SENTRY_DSN } from '../utils/config'
import { GLITCHTIP_DSN } from '../utils/config'
import { resolveHydrationPromise } from '../utils/hydrationPromise'
let layoutReady = false
@ -20,13 +20,16 @@ export const render = async (pageContext: PageContextBuiltInClientWithClientRout
const { pathname, search } = window.location
const searchParams = Object.fromEntries(new URLSearchParams(search))
initRouter(pathname, searchParams)
/*
if (SENTRY_DSN) {
Sentry.init({
dsn: SENTRY_DSN,
SentryInit({
dsn: GLITCHTIP_DSN,
tracesSampleRate: 0.01,
integrations: [replayIntegration()],
// Session Replay
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
})
}
*/
// eslint-disable-next-line import/no-named-as-default-member
await i18next
.use(HttpApi)

1
src/utils/config.ts
View File

@ -5,6 +5,7 @@ export const cdnUrl = 'https://cdn.discours.io'
export const thumborUrl = import.meta.env.PUBLIC_THUMBOR_URL || defaultThumborUrl
export const SENTRY_DSN = import.meta.env.PUBLIC_SENTRY_DSN || ''
export const GLITCHTIP_DSN = import.meta.env.PUBLIC_GLITCHTIP_DSN || ''
const defaultSearchUrl = 'https://search.discours.io'
export const searchUrl = import.meta.env.PUBLIC_SEARCH_URL || defaultSearchUrl

5
src/utils/handleFileUpload.ts
View File

@ -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()
}

4
src/utils/handleImageUpload.ts
View File

@ -4,12 +4,14 @@ 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> => {
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')

1
vite.config.ts
View File

@ -70,6 +70,7 @@ export default defineConfig(({ mode, command }) => {
https: {},
port: 3000,
},
sourcemap: isDev,
css: {
devSourcemap: isDev,
preprocessorOptions: {