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

Profile settings update view (#214)

Browse Source 
Profile settings update view
This commit is contained in:
Ilya Y 2023-09-09 15:04:46 +03:00 committed by GitHub
parent 5d116ede22
commit 9c7f6249a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -19,7 +19,7 @@ import { TopicCard } from '../../Topic/Card'
import { getNumeralsDeclension } from '../../../utils/getNumeralsDeclension'
type SubscriptionFilter = 'all' | 'users' | 'topics'
type AuthorCardProps = {
type Props = {
caption?: string
hideWriteButton?: boolean
hideDescription?: boolean
@ -46,7 +46,7 @@ function isAuthor(value: Author | Topic): value is Author {
return 'name' in value
}
export const AuthorCard = (props: AuthorCardProps) => {
export const AuthorCard = (props: Props) => {
const { t, lang } = useLocalize()
const {
@ -58,6 +58,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
const [isSubscribing, setIsSubscribing] = createSignal(false)
const [subscriptions, setSubscriptions] = createSignal<Array<Author | Topic>>(props.subscriptions)
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
const [userpicUrl, setUserpicUrl] = createSignal<string>()
const subscribed = createMemo<boolean>(() => {
return session()?.news?.authors?.some((u) => u === props.author.slug) || false
@ -115,6 +116,10 @@ export const AuthorCard = (props: AuthorCardProps) => {
}
})
if (props.isAuthorPage && props.author.userpic.includes('assets.discours.io')) {
setUserpicUrl(props.author.userpic.replace('100x', '500x500'))
}
return (
<>
<div
@ -145,7 +150,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
<div class="col-md-5">
<Userpic
name={props.author.name}
userpic={props.author.userpic}
userpic={userpicUrl()}
hasLink={props.hasLink}
isBig={props.isAuthorPage}
isAuthorsList={props.isAuthorsList}

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

@ -220,8 +220,8 @@ const SimplifiedEditor = (props: Props) => {
})
onCleanup(() => {
editor().destroy()
window.removeEventListener('keydown', handleKeyDown)
editor().destroy()
})
if (props.onChange) {

5
src/components/Views/Author/Author.tsx
View File

@ -18,7 +18,7 @@ import { useLocalize } from '../../../context/localize'
import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
import { hideModal } from '../../../stores/ui'
type AuthorProps = {
type Props = {
shouts: Shout[]
author: Author
authorSlug: string
@ -31,7 +31,7 @@ export type AuthorPageSearchParams = {
export const PRERENDERED_ARTICLES_COUNT = 12
const LOAD_MORE_PAGE_SIZE = 9
export const AuthorView = (props: AuthorProps) => {
export const AuthorView = (props: Props) => {
const { t } = useLocalize()
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
@ -127,6 +127,7 @@ export const AuthorView = (props: AuthorProps) => {
}
}
})
return (
<div class={styles.authorPage}>
<div class="wide-container">

16
src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
View File

@ -1,6 +1,6 @@
import { clsx } from 'clsx'
import styles from './GrowingTextarea.module.scss'
import { createSignal, Show } from 'solid-js'
import { createEffect, createSignal, onMount, Show } from 'solid-js'
type Props = {
class?: string
@ -15,8 +15,16 @@ type Props = {
}
export const GrowingTextarea = (props: Props) => {
const [value, setValue] = createSignal<string>(props.initialValue ?? '')
const [value, setValue] = createSignal<string>()
const [isFocused, setIsFocused] = createSignal(false)
createEffect(() => {
if (props.maxLength && props.initialValue?.length > props.maxLength) {
setValue(props.initialValue.slice(0, props.maxLength))
} else {
setValue(props.initialValue ?? '')
}
})
const handleChangeValue = (event) => {
setValue(event.target.value)
}
@ -32,6 +40,7 @@ export const GrowingTextarea = (props: Props) => {
}
return (
<Show when={value()}>
<div
class={clsx(styles.GrowingTextarea, {
[styles.bordered]: props.variant === 'bordered',
@ -48,7 +57,7 @@ export const GrowingTextarea = (props: Props) => {
maxlength={props.maxLength}
autocomplete="off"
class={clsx(styles.textInput, props.class)}
value={props.initialValue}
value={props.maxLength ? props.initialValue.slice(0, props.maxLength) : props.initialValue}
onKeyDown={props.allowEnterKey ? handleKeyDown : null}
onInput={(event) => handleChangeValue(event)}
onChange={(event) => props.value(event.target.value)}
@ -70,5 +79,6 @@ export const GrowingTextarea = (props: Props) => {
</div>
</Show>
</div>
</Show>
)
}

2
src/context/profile.tsx
View File

@ -40,7 +40,7 @@ const useProfileForm = () => {
slug: currentAuthor()?.slug,
bio: currentAuthor()?.bio,
about: currentAuthor()?.about,
userpic: currentAuthor()?.userpic,
userpic: currentAuthor()?.userpic.replace('100x', '500x500'),
links: currentAuthor()?.links
})
} catch (error) {

52
src/pages/profile/profileSettings.page.tsx
View File

@ -1,7 +1,7 @@
import { PageLayout } from '../../components/_shared/PageLayout'
import { Icon } from '../../components/_shared/Icon'
import ProfileSettingsNavigation from '../../components/Discours/ProfileSettingsNavigation'
import { For, createSignal, Show, onMount, onCleanup } from 'solid-js'
import { For, createSignal, Show, onMount, onCleanup, createEffect, on } from 'solid-js'
import deepEqual from 'fast-deep-equal'
import { clsx } from 'clsx'
import styles from './Settings.module.scss'
@ -16,6 +16,9 @@ import { handleFileUpload } from '../../utils/handleFileUpload'
import { Userpic } from '../../components/Author/Userpic'
import { createStore } from 'solid-js/store'
import { clone } from '../../utils/clone'
import SimplifiedEditor from '../../components/Editor/SimplifiedEditor'
import { GrowingTextarea } from '../../components/_shared/GrowingTextarea'
import { resetSortedArticles } from '../../stores/zine/articles'
export const ProfileSettingsPage = () => {
const { t } = useLocalize()
@ -96,6 +99,12 @@ export const ProfileSettingsPage = () => {
setPrevForm(clone(form))
}
createEffect(() => {
if (!deepEqual(form, prevForm)) {
setIsFloatingPanelVisible(true)
}
})
return (
<PageLayout>
<Show when={form}>
@ -111,15 +120,7 @@ export const ProfileSettingsPage = () => {
<div class="col-md-20 col-lg-18 col-xl-16">
<h1>{t('Profile settings')}</h1>
<p class="description">{t('Here you can customize your profile the way you want.')}</p>
<form
onSubmit={handleSubmit}
onChange={() => {
if (!deepEqual(form, prevForm)) {
setIsFloatingPanelVisible(true)
}
}}
enctype="multipart/form-data"
>
<form onSubmit={handleSubmit} enctype="multipart/form-data">
<h4>{t('Userpic')}</h4>
<div class="pretty-form__item">
<Userpic
@ -169,29 +170,26 @@ export const ProfileSettingsPage = () => {
</div>
<h4>{t('Introduce')}</h4>
<div class="pretty-form__item">
<textarea
name="bio"
id="bio"
<GrowingTextarea
variant="bordered"
placeholder={t('Introduce')}
value={form.bio}
onChange={(event) => updateFormField('bio', event.currentTarget.value)}
value={(value) => updateFormField('bio', value)}
initialValue={form.bio}
allowEnterKey={false}
maxLength={80}
/>
<label for="presentation">{t('Introduce')}</label>
</div>
<h4>{t('About myself')}</h4>
<div class="pretty-form__item">
<textarea
name="about"
id="about"
<SimplifiedEditor
variant="bordered"
onlyBubbleControls={true}
smallHeight={true}
placeholder={t('About myself')}
value={form.about}
onChange={(event) => updateFormField('about', event.currentTarget.value)}
label={t('About myself')}
initialContent={form.about}
onChange={(value) => updateFormField('about', value)}
maxLength={500}
/>
<label for="about">{t('About myself')}</label>
</div>
{/*Нет реализации полей на бэке*/}
{/*<h4>{t('How can I help/skills')}</h4>*/}
{/*<div class="pretty-form__item">*/}