diff --git a/public/pages/ShowPost/ShowPost.page.scss b/public/pages/ShowPost/ShowPost.page.scss index 2e5e037bc..83fd0391b 100644 --- a/public/pages/ShowPost/ShowPost.page.scss +++ b/public/pages/ShowPost/ShowPost.page.scss @@ -25,8 +25,8 @@ @include media("lg") { .p-show-post { display: grid; - gap: spacing(4); - grid-template-columns: 3fr 1fr; + gap: spacing(6); + grid-template-columns: 5fr 2fr; grid-template-rows: auto; grid-template-areas: "Main Action" diff --git a/public/pages/ShowPost/ShowPost.page.tsx b/public/pages/ShowPost/ShowPost.page.tsx index ccacf8636..91b2984c2 100644 --- a/public/pages/ShowPost/ShowPost.page.tsx +++ b/public/pages/ShowPost/ShowPost.page.tsx @@ -39,6 +39,8 @@ import { TagsPanel2 } from "./components/TagsPanel2" import { NotificationsPanel2 } from "./components/NotificationsPanel2" import { VoteSection } from "./components/VoteSection" import { ModerationPanel } from "./components/ModerationPanel" +import { ResponseModal } from "./components/ResponseModal" +import { MostWanted } from "./components/MostWanted" interface ShowPostPageProps { post: Post @@ -53,6 +55,7 @@ interface ShowPostPageState { editMode: boolean newTitle: string showDeleteModal: boolean + showResponseModal: boolean attachments: ImageUpload[] newDescription: string highlightedComment?: number @@ -75,6 +78,7 @@ export default class ShowPostPage extends React.Component { + this.setState({ showResponseModal }) + } + private cancelEdit = async () => { this.setState({ error: undefined, editMode: false }) } @@ -167,7 +175,7 @@ export default class ShowPostPage extends React.Component this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} /> + {Fider.session.user.isCollaborator && ( + this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} /> + )} {!this.state.editMode && ( }> @@ -235,6 +246,7 @@ export default class ShowPostPage extends React.Component )} + {this.state.editMode ? (
@@ -276,7 +288,6 @@ export default class ShowPostPage extends React.Component - @@ -285,47 +296,7 @@ export default class ShowPostPage extends React.Component
- {/* - - - {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && ( - - - Actions - - {this.state.editMode ? ( - - - - - ) : ( - - - {Fider.session.user.isCollaborator && } - - )} - - )} - - - - - */} +
diff --git a/public/pages/ShowPost/components/MostWanted.tsx b/public/pages/ShowPost/components/MostWanted.tsx new file mode 100644 index 000000000..1a25df96e --- /dev/null +++ b/public/pages/ShowPost/components/MostWanted.tsx @@ -0,0 +1,32 @@ +import React from "react" +import { VStack } from "@fider/components/layout" +import { actions } from "@fider/services" +import { Post } from "@fider/models" + +export const MostWanted = () => { + const [posts, setPosts] = React.useState([]) + + React.useEffect(() => { + const fetchPosts = async () => { + const result = await actions.searchPosts({ view: "most-wanted", limit: 5 }) + setPosts(result.data) + } + fetchPosts() + }, []) + + return ( + +

Most Wanted

+ {posts.length > 0 && + posts.map((post) => ( +
+ {post.title} +
+ {post.commentsCount} comments + {post.votesCount} votes +
+
+ ))} +
+ ) +} diff --git a/public/pages/ShowPost/components/ResponseForm.tsx b/public/pages/ShowPost/components/ResponseModal.tsx similarity index 72% rename from public/pages/ShowPost/components/ResponseForm.tsx rename to public/pages/ShowPost/components/ResponseModal.tsx index 92f0f1d66..c94a79d83 100644 --- a/public/pages/ShowPost/components/ResponseForm.tsx +++ b/public/pages/ShowPost/components/ResponseModal.tsx @@ -1,31 +1,30 @@ import React from "react" -import { Modal, Button, DisplayError, Select, Form, TextArea, Field, SelectOption, Icon } from "@fider/components" +import { Modal, Button, DisplayError, Select, Form, TextArea, Field, SelectOption } from "@fider/components" import { Post, PostStatus } from "@fider/models" -import { actions, Failure, Fider } from "@fider/services" +import { actions, Failure } from "@fider/services" import { PostSearch } from "./PostSearch" -import IconSpeakerPhone from "@fider/assets/images/heroicons-speakerphone.svg" import { t, Trans } from "@lingui/macro" -interface ResponseFormProps { +interface ResponseModalProps { post: Post + showModal: boolean + onCloseModal: () => void } -interface ResponseFormState { - showModal: boolean +interface ResponseModalState { status: string text: string originalNumber: number error?: Failure } -export class ResponseForm extends React.Component { - constructor(props: ResponseFormProps) { +export class ResponseModal extends React.Component { + constructor(props: ResponseModalProps) { super(props) this.state = { - showModal: false, status: this.props.post.status, originalNumber: 0, text: this.props.post.response ? this.props.post.response.text : "", @@ -43,14 +42,6 @@ export class ResponseForm extends React.Component { - this.setState({ showModal: true }) - } - - private closeModal = async () => { - this.setState({ showModal: false }) - } - private setStatus = (opt?: SelectOption) => { if (opt) { this.setState({ status: opt.value }) @@ -66,15 +57,6 @@ export class ResponseForm extends React.Component - {" "} - - Respond - - - ) - const options = PostStatus.All.map((s) => { const id = `enum.poststatus.${s.value.toString()}` return { @@ -84,7 +66,7 @@ export class ResponseForm extends React.Component +