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

Merge remote-tracking branch 'gitlab/dev' into create-shout-2

Browse Source
This commit is contained in:
bniwredyc 2023-04-17 13:04:01 +02:00
commit 61a6448b61
15 changed files with 148 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Article/Article.module.scss
View File

@ -144,6 +144,7 @@ img {
.shoutStatsItem {
@include font-size(1.5rem);
font-weight: 500;
display: inline-block;
margin: 0 3.2rem 1em 0;
@ -175,6 +176,19 @@ img {
a {
border: none;
text-decoration: none;
&:hover {
background: unset;
color: #000;
img {
filter: unset;
}
}
}
&:hover {
cursor: pointer;
}
}

13
src/components/Article/Comment.tsx
View File

@ -1,7 +1,7 @@
import styles from './Comment.module.scss'
import { Icon } from '../_shared/Icon'
import { AuthorCard } from '../Author/Card'
import { Show, createMemo, createSignal, For, lazy, Suspense } from 'solid-js'
import { Show, createMemo, createSignal, For, lazy, Suspense, createEffect } from 'solid-js'
import { clsx } from 'clsx'
import type { Author, Reaction } from '../../graphql/types.gen'
import MD from './MD'
@ -30,6 +30,7 @@ export const Comment = (props: Props) => {
const [isReplyVisible, setIsReplyVisible] = createSignal(false)
const [loading, setLoading] = createSignal<boolean>(false)
const [editMode, setEditMode] = createSignal<boolean>(false)
const [submitted, setSubmitted] = createSignal<boolean>(false)
const { session } = useSession()
const {
@ -66,6 +67,7 @@ export const Comment = (props: Props) => {
})
setIsReplyVisible(false)
setLoading(false)
setSubmitted(true)
} catch (error) {
console.error('[handleCreate reaction]:', error)
}
@ -94,6 +96,7 @@ export const Comment = (props: Props) => {
}
const createdAt = new Date(comment()?.createdAt)
return (
<li class={clsx(styles.comment, { [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen })}>
<Show when={!!body()}>
@ -105,7 +108,6 @@ export const Comment = (props: Props) => {
<Userpic
user={comment().createdBy as Author}
isBig={false}
isAuthorsList={false}
class={clsx({
[styles.compactUserpic]: props.compact
})}
@ -202,7 +204,12 @@ export const Comment = (props: Props) => {
<Show when={isReplyVisible()}>
<Suspense fallback={<p>{t('Loading')}</p>}>
<CommentEditor placeholder={''} onSubmit={(value) => handleCreate(value)} />
<CommentEditor
placeholder={''}
clear={submitted()}
onSubmit={(value) => handleCreate(value)}
cancel={() => setIsReplyVisible(false)}
/>
</Suspense>
</Show>
</Show>

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

@ -39,15 +39,16 @@ type Props = {
}
export const CommentsTree = (props: Props) => {
const { session } = useSession()
const { t } = useLocalize()
const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt')
const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
const [submitted, setSubmitted] = createSignal(false)
const {
reactionEntities,
actions: { createReaction }
} = useReactions()
const { t } = useLocalize()
const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
const comments = createMemo(() =>
Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT')
)
@ -78,7 +79,7 @@ export const CommentsTree = (props: Props) => {
setCookie()
} else if (currentDate > dateFromLocalStorage) {
const newComments = comments().filter((c) => {
if (c.replyTo) {
if (c.replyTo || c.createdBy.slug === session()?.user.slug) {
return
}
const created = new Date(c.createdAt)
@ -89,8 +90,6 @@ export const CommentsTree = (props: Props) => {
}
})
const { session } = useSession()
const [submitted, setSubmitted] = createSignal<boolean>(false)
const handleSubmitComment = async (value) => {
try {
await createReaction({
@ -113,7 +112,7 @@ export const CommentsTree = (props: Props) => {
<span class={styles.newReactions}>&nbsp;+{newReactions().length}</span>
</Show>
</h2>
<Show when={comments().length > 0}>
<ul class={clsx(styles.commentsViewSwitcher, 'view-switcher')}>
<Show when={newReactions().length > 0}>
<li classList={{ selected: commentsOrder() === 'newOnly' }}>
@ -148,6 +147,7 @@ export const CommentsTree = (props: Props) => {
/>
</li>
</ul>
</Show>
</div>
<ul class={styles.comments}>
<For each={sortedComments().filter((r) => !r.replyTo)}>

29
src/components/Article/FullArticle.tsx
View File

@ -22,6 +22,7 @@ import styles from './Article.module.scss'
interface ArticleProps {
article: Shout
scrollToComments?: boolean
}
interface MediaItem {
@ -87,6 +88,22 @@ export const FullArticle = (props: ArticleProps) => {
return mi
})
const commentsRef: { current: HTMLDivElement } = { current: null }
const scrollToComments = () => {
window.scrollTo({
top: commentsRef.current.offsetTop - 96,
left: 0,
behavior: 'smooth'
})
}
createEffect(() => {
if (props.scrollToComments) {
scrollToComments()
}
})
const {
actions: { loadReactionsBy }
} = useReactions()
@ -122,10 +139,12 @@ export const FullArticle = (props: ArticleProps) => {
)}
</For>
</div>
<Show when={props.article.cover}>
<div
class={styles.shoutCover}
style={{ 'background-image': `url('${props.article.cover}')` }}
/>
</Show>
</div>
<Show when={media() && props.article.layout !== 'image'}>
@ -183,12 +202,10 @@ export const FullArticle = (props: ArticleProps) => {
{props.article.stat?.viewed}
</div>
</Show>
<a href="#comments" class={styles.shoutStatsItem}>
<div class={styles.shoutStatsItem} onClick={scrollToComments}>
<Icon name="comment" class={styles.icon} />
{props.article.stat?.commented ?? ''}
</a>
</div>
<div class={styles.shoutStatsItem}>
<SharePopup
title={props.article.title}
@ -251,12 +268,12 @@ export const FullArticle = (props: ArticleProps) => {
<For each={props.article.authors}>
{(a) => (
<div class="col-xl-12">
<AuthorCard author={a} compact={false} hasLink={true} liteButtons={true} />
<AuthorCard author={a} hasLink={true} liteButtons={true} />
</div>
)}
</For>
</div>
<div id="comments">
<div id="comments" ref={(el) => (commentsRef.current = el)}>
<Show when={isReactionsLoaded()}>
<CommentsTree
shoutId={props.article.id}

4
src/components/Author/Card.tsx
View File

@ -16,7 +16,7 @@ import { useLocalize } from '../../context/localize'
interface AuthorCardProps {
caption?: string
compact?: boolean
hideWriteButton?: boolean
hideDescription?: boolean
hideFollow?: boolean
hasLink?: boolean
@ -166,7 +166,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
</button>
</Show>
<Show when={!props.compact && !props.isAuthorsList}>
<Show when={!props.hideWriteButton}>
<button
class={styles.button}
classList={{

2
src/components/Author/Full.tsx
View File

@ -6,7 +6,7 @@ export const AuthorFull = (props: { author: Author }) => {
return (
<div class="row">
<div class="col-md-18 col-lg-16 user-details">
<AuthorCard author={props.author} compact={false} isAuthorPage={true} />
<AuthorCard author={props.author} isAuthorPage={true} />
</div>
</div>
)

2
src/components/Feed/Beside.tsx
View File

@ -69,7 +69,7 @@ export const Beside = (props: BesideProps) => {
<Show when={props.wrapper === 'author'}>
<AuthorCard
author={value as Author}
compact={true}
hideWriteButton={true}
hasLink={true}
truncateBio={true}
/>

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

@ -15,9 +15,11 @@ import { useLocalize } from '../../context/localize'
type Props = {
title?: string
slug?: string
isHeaderFixed?: boolean
articleBody?: string
cover?: string
scrollToComments?: (value: boolean) => void
}
export const Header = (props: Props) => {
@ -78,6 +80,10 @@ export const Header = (props: Props) => {
})
})
const scrollToComments = (value) => {
props.scrollToComments(value)
}
return (
<header
class={styles.mainHeader}
@ -138,9 +144,9 @@ export const Header = (props: Props) => {
containerCssClass={styles.control}
trigger={<Icon name="share-outline" class={styles.icon} />}
/>
<a href={getPagePath(router, 'inbox')} class={styles.control}>
<div onClick={() => scrollToComments(true)} class={styles.control}>
<Icon name="comments-outline" class={styles.icon} />
</a>
</div>
<a href={getPagePath(router, 'create')} class={styles.control}>
<Icon name="pencil-outline" class={styles.icon} />
</a>

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

@ -99,7 +99,7 @@ export const AuthorView = (props: AuthorProps) => {
})
setCommented(data)
} catch (error) {
console.error('[getReactionsBy]:', error)
console.error('[getReactionsBy comment]', error)
}
}
})
@ -209,6 +209,19 @@ export const AuthorView = (props: AuthorProps) => {
</ul>
</div>
</Match>
<Match when={searchParams().by === 'followed'}>
<div class="wide-container">
<div class="row">
<For each={followers()}>
{(follower: Author) => (
<div class="col-md-6 col-lg-4">
<AuthorCard author={follower} hideWriteButton={true} hasLink={true} />
</div>
)}
</For>
</div>
</div>
</Match>
<Match when={searchParams().by === 'rating'}>
<Row1 article={sortedArticles()[0]} />
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} />

4
src/components/Views/Feed.tsx
View File

@ -122,7 +122,7 @@ export const FeedView = () => {
<For each={topAuthors().slice(0, 5)}>
{(author) => (
<li>
<AuthorCard author={author} compact={true} hasLink={true} />
<AuthorCard author={author} hideWriteButton={true} hasLink={true} />
</li>
)}
</For>
@ -153,7 +153,7 @@ export const FeedView = () => {
<AuthorCard
author={comment.createdBy as Author}
isFeedMode={true}
compact={true}
hideWriteButton={true}
hideFollow={true}
/>
<div class={clsx('text-truncate', styles.commentArticleTitle)}>

5
src/components/_shared/CommentEditor/CommentEditor.tsx
View File

@ -21,6 +21,7 @@ type Props = {
placeholder?: string
onSubmit: (value: string) => void
clear?: boolean
cancel?: () => void
initialContent?: string
}
@ -69,6 +70,9 @@ const CommentEditor = (props: Props) => {
const clearEditor = () => {
editorViewRef.current.destroy()
initEditor()
if (props.cancel) {
props.cancel()
}
}
createEffect(() => {
@ -76,7 +80,6 @@ const CommentEditor = (props: Props) => {
clearEditor()
}
})
return (
<div class={styles.commentEditor}>
<div class={clsx('ProseMirrorOverrides', styles.textarea)} ref={(el) => (editorElRef.current = el)} />

13
src/components/_shared/PageLayout.tsx
View File

@ -2,7 +2,7 @@ import type { JSX } from 'solid-js'
import { Header } from '../Nav/Header'
import { Footer } from '../Discours/Footer'
import { Show } from 'solid-js'
import { createEffect, createSignal, Show } from 'solid-js'
import { clsx } from 'clsx'
import '../../styles/app.scss'
import styles from './PageLayout.module.scss'
@ -10,6 +10,7 @@ import { Meta } from '@solidjs/meta'
type PageLayoutProps = {
headerTitle?: string
slug?: string
articleBody?: string
cover?: string
children: JSX.Element
@ -17,19 +18,29 @@ type PageLayoutProps = {
hideFooter?: boolean
class?: string
withPadding?: boolean
scrollToComments?: (value: boolean) => void
}
export const PageLayout = (props: PageLayoutProps) => {
const isHeaderFixed = props.isHeaderFixed === undefined ? true : props.isHeaderFixed
const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
createEffect(() => {
if (props.scrollToComments) {
props.scrollToComments(scrollToComments())
}
})
return (
<>
<Meta name="viewport" content="width=device-width, initial-scale=1" />
<Header
slug={props.slug}
title={props.headerTitle}
articleBody={props.articleBody}
cover={props.articleBody}
isHeaderFixed={isHeaderFixed}
scrollToComments={(value) => setScrollToComments(value)}
/>
<main
class={clsx('main-content', {

4
src/components/_shared/Popup/Popup.module.scss
View File

@ -2,6 +2,10 @@
position: relative;
}
.trigger {
cursor: pointer;
}
.popup {
background: #fff;
color: #000;

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

@ -37,7 +37,9 @@ export const Popup = (props: PopupProps) => {
return (
<span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>
<span onClick={toggle}>{props.trigger}</span>
<span class={styles.trigger} onClick={toggle}>
{props.trigger}
</span>
<Show when={isVisible()}>
<div
class={clsx(styles.popup, props.popupCssClass, {

15
src/pages/article.page.tsx
View File

@ -1,4 +1,4 @@
import { createMemo, onMount, Show } from 'solid-js'
import { createMemo, createSignal, onMount, Show } from 'solid-js'
import type { Shout } from '../graphql/types.gen'
import { PageLayout } from '../components/_shared/PageLayout'
import type { PageProps } from './types'
@ -48,12 +48,21 @@ export const ArticlePage = (props: PageProps) => {
script.dataset.ackeeDomainId = '1004abeb-89b2-4e85-ad97-74f8d2c8ed2d'
document.body.appendChild(script)
})
const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
return (
<PageLayout headerTitle={article()?.title || ''} articleBody={article()?.body} cover={article()?.cover}>
<PageLayout
headerTitle={article()?.title || ''}
slug={article()?.slug}
articleBody={article()?.body}
cover={article()?.cover}
scrollToComments={(value) => {
setScrollToComments(value)
}}
>
<ReactionsProvider>
<Show when={Boolean(article())} fallback={<Loading />}>
<FullArticle article={article()} />
<FullArticle article={article()} scrollToComments={scrollToComments()} />
</Show>
</ReactionsProvider>
</PageLayout>