More changes to the show post page.

getfider · Dec 29, 2024 · c9243d6 · c9243d6
1 parent b1e7f2c
commit c9243d6
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 79 deletions.
diff --git 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
@@ -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<ShowPostPageProps, Sho
     this.state = {
       editMode: false,
       showDeleteModal: false,
+      showResponseModal: false,
       newTitle: this.props.post.title,
       newDescription: this.props.post.description,
       attachments: [],
@@ -125,6 +129,10 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     this.setState({ showDeleteModal })
   }
 
+  private setShowResponseModal = (showResponseModal: boolean) => {
+    this.setState({ showResponseModal })
+  }
+
   private cancelEdit = async () => {
     this.setState({ error: undefined, editMode: false })
   }
@@ -167,7 +175,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
     } else if (action === "delete") {
       this.setShowDeleteModal(true)
     } else if (action === "status") {
-      // actions.changeStatus(this.props.post.number, this.props.post.status)
+      this.setShowResponseModal(true)
     } else if (action === "edit") {
       this.startEdit()
     }
@@ -198,6 +206,9 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       )}
                     </div>
                     <ModerationPanel onModalClose={() => this.setShowDeleteModal(false)} showModal={this.state.showDeleteModal} post={this.props.post} />
+                    {Fider.session.user.isCollaborator && (
+                      <ResponseModal onCloseModal={() => this.setShowResponseModal(false)} showModal={this.state.showResponseModal} post={this.props.post} />
+                    )}
                     {!this.state.editMode && (
                       <Dropdown position="left" renderHandle={<Icon sprite={IconDotsHorizontal} width="24" height="24" />}>
                         <Dropdown.ListItem onClick={this.onActionSelected("copy")}>
@@ -235,6 +246,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                       <NotificationsPanel2 post={this.props.post} subscribed={this.props.subscribed} />
                     </HStack>
                   )}
+                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                   <VStack>
                     {this.state.editMode ? (
                       <Form error={this.state.error}>
@@ -276,7 +288,6 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
                   )}
 
                   <div className="purple-border" />
-                  <ShowPostResponse status={this.props.post.status} response={this.props.post.response} />
                 </VStack>
               </div>
 
@@ -285,47 +296,7 @@ export default class ShowPostPage extends React.Component<ShowPostPageProps, Sho
               </div>
             </div>
             <div className="p-show-post__action-col">
-              {/* <VStack spacing={4}>
-                <VotesPanel post={this.props.post} votes={this.props.votes} />
-
-                {Fider.session.isAuthenticated && canEditPost(Fider.session.user, this.props.post) && (
-                  <VStack>
-                    <span key={0} className="text-category">
-                      <Trans id="label.actions">Actions</Trans>
-                    </span>
-                    {this.state.editMode ? (
-                      <VStack>
-                        <Button variant="primary" onClick={this.saveChanges} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconThumbsUp} />{" "}
-                          <span>
-                            <Trans id="action.save">Save</Trans>
-                          </span>
-                        </Button>
-                        <Button onClick={this.cancelEdit} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconX} />
-                          <span>
-                            <Trans id="action.cancel">Cancel</Trans>
-                          </span>
-                        </Button>
-                      </VStack>
-                    ) : (
-                      <VStack>
-                        <Button onClick={this.startEdit} disabled={Fider.isReadOnly}>
-                          <Icon sprite={IconPencilAlt} />
-                          <span>
-                            <Trans id="action.edit">Edit</Trans>
-                          </span>
-                        </Button>
-                        {Fider.session.user.isCollaborator && <ResponseForm post={this.props.post} />}
-                      </VStack>
-                    )}
-                  </VStack>
-                )}
-
-                <TagsPanel post={this.props.post} tags={this.props.tags} />
-                <NotificationsPanel post={this.props.post} subscribed={this.props.subscribed} />
-                <ModerationPanel post={this.props.post} />
-              </VStack> */}
+              <MostWanted />
               <PoweredByFider slot="show-post" className="mt-3" />
             </div>
           </div>

diff --git a/public/pages/ShowPost/components/MostWanted.tsx 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<Post[]>([])
+
+  React.useEffect(() => {
+    const fetchPosts = async () => {
+      const result = await actions.searchPosts({ view: "most-wanted", limit: 5 })
+      setPosts(result.data)
+    }
+    fetchPosts()
+  }, [])
+
+  return (
+    <VStack spacing={4}>
+      <h1 className="text-title">Most Wanted</h1>
+      {posts.length > 0 &&
+        posts.map((post) => (
+          <div key={post.id} className="pt-1">
+            <span className="text-medium">{post.title}</span>
+            <div className="pt-1 flex">
+              <span className="text-muted" style={{ width: "150px" }}>{post.commentsCount} comments</span>
+              <span className="text-muted">{post.votesCount} votes</span>
+            </div>
+          </div>
+        ))}
+    </VStack>
+  )
+}
diff --git a/...ages/ShowPost/components/ResponseForm.tsx → ...ges/ShowPost/components/ResponseModal.tsx b/...ages/ShowPost/components/ResponseForm.tsx → ...ges/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<ResponseFormProps, ResponseFormState> {
-  constructor(props: ResponseFormProps) {
+export class ResponseModal extends React.Component<ResponseModalProps, ResponseModalState> {
+  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<ResponseFormProps, ResponseFor
     }
   }
 
-  private showModal = async () => {
-    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<ResponseFormProps, ResponseFor
   }
 
   public render() {
-    const button = (
-      <Button className="w-full" onClick={this.showModal} disabled={Fider.isReadOnly}>
-        <Icon sprite={IconSpeakerPhone} />{" "}
-        <span>
-          <Trans id="action.respond">Respond</Trans>
-        </span>
-      </Button>
-    )
-
     const options = PostStatus.All.map((s) => {
       const id = `enum.poststatus.${s.value.toString()}`
       return {
@@ -84,7 +66,7 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
     })
 
     const modal = (
-      <Modal.Window isOpen={this.state.showModal} onClose={this.closeModal} center={false} size="large">
+      <Modal.Window isOpen={this.props.showModal} onClose={this.props.onCloseModal} center={false} size="large">
         <Modal.Content>
           <Form error={this.state.error} className="c-response-form">
             <Select field="status" label="Status" defaultValue={this.state.status} options={options} onChange={this.setStatus} />
@@ -117,18 +99,13 @@ export class ResponseForm extends React.Component<ResponseFormProps, ResponseFor
           <Button variant="primary" onClick={this.submit}>
             <Trans id="action.submit">Submit</Trans>
           </Button>
-          <Button variant="tertiary" onClick={this.closeModal}>
+          <Button variant="tertiary" onClick={this.props.onCloseModal}>
             <Trans id="action.cancel">Cancel</Trans>
           </Button>
         </Modal.Footer>
       </Modal.Window>
     )
 
-    return (
-      <>
-        {button}
-        {modal}
-      </>
-    )
+    return modal
   }
 }