feat(app): add docs score add

cypress/e2e/docs-display.cy.ts

@@ -13,6 +13,11 @@ const now = new Date();
 const getDocsResponse: { result: PublicDocumentDto[] } = {
   result: [
     {
+      score: {
+        average: 3.5,
+        count: 10,
+        values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      },
       id: `e9799f7b-013e-4231-88fe-e2072514f96a` as Atoms["DocumentId"],
       commentsCount: 0,
       name: `Mediator pattern in TypeScript`,

gatsby-node.ts

@@ -283,11 +283,12 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
 
   const topDocuments = getTopDocuments(trustedDocuments, documentsPerPage).map<
     EducationPageModel["documents"]["top"][number]
-  >(({ author, name, id, path, rating, cdate, commentsCount }) => ({
+  >(({ author, name, id, path, rating, cdate, commentsCount, score }) => ({
     name,
     id,
     path,
     rating,
+    score,
     cdate,
     commentsCount,
     author:
@@ -322,6 +323,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
                 name,
                 id,
                 path,
+                score,
                 commentsCount,
                 rating,
                 cdate,
@@ -332,6 +334,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
                 id,
                 path,
                 rating,
+                score,
                 commentsCount,
                 cdate,
                 description,
@@ -369,6 +372,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
             ({
               author,
               name,
+              score,
               id,
               path,
               rating,
@@ -383,6 +387,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
               path,
               rating,
               cdate,
+              score,
               description,
               tags,
               author:
@@ -412,6 +417,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
           id,
           path,
           rating,
+          score,
           cdate,
           description,
           tags,
@@ -421,6 +427,7 @@ export const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
           id,
           path,
           rating,
+          score,
           cdate,
           description,
           commentsCount,

src/api-4markdown-contracts/contracts.ts

@@ -238,6 +238,18 @@ type UserProfileCommentsContracts =
 type AccountsContracts = Contract<`getYourAccount`, YourAccountDto>;
 
 type DocumentsContracts =
+  | Contract<
+      `addDocumentScore`,
+      {
+        average: number;
+        count: number;
+        values: Atoms["ScoreValue"][];
+      },
+      {
+        documentId: Atoms["DocumentId"];
+        score: Atoms["ScoreValue"];
+      }
+    >
   | Contract<
       `getYourDocuments`,
       (

src/api-4markdown-contracts/dtos.ts

@@ -163,7 +163,7 @@ export type FullMindmapDto = MindmapDto & {
   isAuthorTrusted: boolean;
 };
 
-type Base = {
+type Base = Prettify<{
   id: Atoms["DocumentId"];
   name: string;
   commentsCount: number;
@@ -172,31 +172,44 @@ type Base = {
   cdate: Atoms["UTCDate"];
   sharedForGroups?: Atoms["AccessGroupId"][];
   path: Atoms["Path"];
-};
+  score: {
+    average: number;
+    count: number;
+    values: Atoms["ScoreValue"][];
+  };
+}>;
 
-export type PrivateDocumentDto = Base & {
-  visibility: "private";
-};
+export type PrivateDocumentDto = Prettify<
+  Base & {
+    visibility: "private";
+  }
+>;
 
-export type PublicDocumentDto = Base & {
-  visibility: "public";
-  author: UserProfileDto | null;
-  rating: Atoms["Rating"];
-};
+export type PublicDocumentDto = Prettify<
+  Base & {
+    visibility: "public";
+    author: UserProfileDto | null;
+    rating: Atoms["Rating"];
+  }
+>;
 
-export type PermanentDocumentDto = Base & {
-  visibility: `permanent`;
-  description: string;
-  tags: string[];
-  author: UserProfileDto | null;
-  rating: Atoms["Rating"];
-};
+export type PermanentDocumentDto = Prettify<
+  Base & {
+    visibility: `permanent`;
+    description: string;
+    tags: string[];
+    author: UserProfileDto | null;
+    rating: Atoms["Rating"];
+  }
+>;
 
-export type ManualDocumentDto = Base & {
-  visibility: "manual";
-  author: UserProfileDto | null;
-  rating: Atoms["Rating"];
-};
+export type ManualDocumentDto = Prettify<
+  Base & {
+    visibility: "manual";
+    author: UserProfileDto | null;
+    rating: Atoms["Rating"];
+  }
+>;
 
 export type DocumentDto =
   | PrivateDocumentDto

src/containers/document-layout.container.tsx

@@ -10,8 +10,6 @@ import {
   BiLogoMarkdown,
 } from "react-icons/bi";
 import { Button } from "design-system/button";
-import { useCopy } from "development-kit/use-copy";
-import { Status } from "design-system/status";
 import { seeInDocumentsCreatorAct } from "acts/see-in-documents-creator.act";
 import { Link, navigate } from "gatsby";
 import { meta } from "../../meta";
@@ -28,9 +26,18 @@ import {
   useResourceCompletionToggle,
   useResourcesCompletionState,
 } from "modules/resource-completions";
-import { API4MarkdownPayload, Atoms } from "api-4markdown-contracts";
+import {
+  API4MarkdownDto,
+  API4MarkdownPayload,
+  Atoms,
+} from "api-4markdown-contracts";
 import { CommentTrigger } from "components/comment-trigger";
 import { DocumentCommentsModule } from "modules/document-comments";
+import { ScorePicker } from "components/score-picker";
+import { useCopy } from "development-kit/use-copy";
+import { useMutation2 } from "core/use-mutation-2";
+import { getAPI } from "api-4markdown";
+import { toast } from "design-system/toast";
 
 const MarkdownWidget = React.lazy(() =>
   import("components/markdown-widget").then(({ MarkdownWidget }) => ({
@@ -39,6 +46,7 @@ const MarkdownWidget = React.lazy(() =>
 );
 
 const CONTENT_ID = `document-layout-content`;
+const COMMENTS_CONTAINER_ID = `document-layout-comments`;
 
 const ResourceCompletionTriggerContainer = () => {
   const [{ document }] = useDocumentLayoutContext();
@@ -105,6 +113,34 @@ const DocumentLayoutContainer = () => {
     navigate(meta.routes.home);
   };
 
+  const addScoreMutation = useMutation2<API4MarkdownDto<"addDocumentScore">>({
+    onFail: (error) => {
+      toast.error({
+        title: "Failed to add score",
+        children: error.message,
+      });
+    },
+    onOk: (data) => {
+      setDocumentLayoutState(({ document, yourRate }) => ({
+        document: {
+          ...document,
+          score: {
+            average: data.average,
+            count: data.count,
+            values: data.values,
+          },
+        },
+        yourRate,
+      }));
+    },
+  });
+
+  const addScore = (score: Atoms["ScoreValue"]): void => {
+    addScoreMutation.start(() =>
+      getAPI().call("addDocumentScore")({ documentId: document.id, score }),
+    );
+  };
+
   return (
     <>
       <div className="px-4 py-10 relative lg:flex lg:justify-center">
@@ -120,16 +156,7 @@ const DocumentLayoutContainer = () => {
               <BiLogoMarkdown />
             </Button>
             <Button
-              title="Display this document like a book"
-              s={2}
-              i={2}
-              onClick={sectionsModal.on}
-            >
-              <BiBook />
-            </Button>
-            <div className="h-5 w-0.5 mx-1 bg-zinc-300 dark:bg-zinc-800" />
-            <SocialShare />
-            <Button
+              className="tn:flex hidden"
               title="Copy this document markdown"
               s={2}
               i={2}
@@ -141,20 +168,35 @@ const DocumentLayoutContainer = () => {
                 <BiCopyAlt />
               )}
             </Button>
-            <CommentTrigger
-              i={2}
+            <Button
+              title="Display this document like a book"
               s={2}
-              position="right"
-              count={document.commentsCount}
-              onClick={() => {
-                window.scrollTo({
-                  top: Math.max(
-                    window.document.documentElement.scrollHeight,
-                    window.document.body.scrollHeight,
-                  ),
-                });
-              }}
-            />
+              i={2}
+              onClick={sectionsModal.on}
+            >
+              <BiBook />
+            </Button>
+            <SocialShare />
+            <div className="ml-auto flex gap-2.5 items-center">
+              <ScorePicker
+                disabled={addScoreMutation.busy || addScoreMutation.ok}
+                popoverClassName="-right-10 w-[280px]"
+                average={document.score.average}
+                count={document.score.count}
+                onRate={addScore}
+              />
+              <CommentTrigger
+                i={2}
+                s={2}
+                position="right"
+                count={document.commentsCount}
+                onClick={() => {
+                  window.document
+                    .getElementById(COMMENTS_CONTAINER_ID)
+                    ?.scrollIntoView();
+                }}
+              />
+            </div>
           </section>
           <DocumentRatingContainer className="mb-6 justify-end" />
           {document.visibility === `permanent` && (
@@ -206,18 +248,32 @@ const DocumentLayoutContainer = () => {
               </div>
             </section>
           )}
-          <DocumentRatingContainer className="mt-10 justify-end" />
-          <DocumentCommentsModule
-            documentId={document.id}
-            onCountChange={(count) =>
-              setDocumentLayoutState(({ document, yourRate }) => ({
-                yourRate,
-                document: { ...document, commentsCount: count },
-              }))
-            }
-            commentsCount={document.commentsCount}
-            className="mt-10"
-          />
+
+          <div className="mt-10 mb-4 ml-auto w-fit">
+            <ScorePicker
+              disabled={addScoreMutation.busy || addScoreMutation.ok}
+              popoverClassName="right-0 w-[280px]"
+              average={document.score.average}
+              count={document.score.count}
+              onRate={addScore}
+            />
+          </div>
+
+          <DocumentRatingContainer className="justify-end" />
+
+          <section id={COMMENTS_CONTAINER_ID}>
+            <DocumentCommentsModule
+              documentId={document.id}
+              onCountChange={(count) =>
+                setDocumentLayoutState(({ document, yourRate }) => ({
+                  yourRate,
+                  document: { ...document, commentsCount: count },
+                }))
+              }
+              commentsCount={document.commentsCount}
+              className="mt-10"
+            />
+          </section>
         </main>
         <TableOfContent markdownContainerId={CONTENT_ID} markdown={code} />
       </div>
@@ -229,7 +285,6 @@ const DocumentLayoutContainer = () => {
           <MarkdownWidget markdown={code} onClose={sectionsModal.off} />
         </React.Suspense>
       )}
-      {copyState.is === `copied` && <Status>Document markdown copied</Status>}
     </>
   );
 };

src/models/page-models.ts

@@ -23,13 +23,14 @@ type RichEducationDocumentModel = Pick<
   | "description"
   | "tags"
   | "commentsCount"
+  | "score"
 > & {
   author: EducationDocumentAvatarModel;
 };
 
 type LightEducationDocumentModel = Pick<
   PermanentDocumentDto,
-  "id" | "path" | "name" | "rating" | "cdate" | "commentsCount"
+  "id" | "path" | "name" | "rating" | "cdate" | "commentsCount" | "score"
 > & {
   author: EducationDocumentAvatarModel;
 };

src/modules/document-comments/containers/document-comments.container.tsx

@@ -65,7 +65,7 @@ const DocumentCommentsContainer = ({
 
   return (
     <>
-      <section className={className}>
+      <div className={className}>
         <h2 className="mb-4 flex items-center gap-2 justify-between">
           <span className="text-lg">
             Comments{" "}
@@ -172,7 +172,7 @@ const DocumentCommentsContainer = ({
             )}
           </>
         )}
-      </section>
+      </div>
       {commentForm.is === "on" && (
         <DocumentCommentFormContainer {...commentForm.data} />
       )}