feat(app): full rating of user profiles

gatsby-browser.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import ErrorBoundary from "./src/development-kit/error-boundary";
 import { useAuth } from "./src/core/use-auth";
 import { CookiesModalLoader } from "./src/components/cookies-modal-loader";
+import { ToastSlot } from "./src/design-system/toast";
 import "katex/dist/katex.min.css";
 import "prismjs/themes/prism-okaidia.css";
 import "./src/style/index.css";
@@ -27,6 +28,7 @@ export const wrapPageElement = ({ element }) => {
     <ErrorBoundary fallback={SafeExceptionScreen}>
       {element}
       <CookiesModalLoader />
+      <ToastSlot />
     </ErrorBoundary>
   );
 };

package.json

@@ -41,7 +41,7 @@
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "firebase": "^12.4.0",
+    "firebase": "^12.5.0",
     "gatsby": "^5.15.0",
     "gatsby-plugin-manifest": "^5.15.0",
     "gatsby-plugin-mdx": "^5.15.0",

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

@@ -10,7 +10,7 @@ import type {
 import {
   AccessGroupDto,
   Atoms,
-  CommentDto,
+  UserProfileCommentDto,
   FullMindmapDto,
   ImageDto,
   MindmapDto,
@@ -149,6 +149,22 @@ type ResourceCompletionsContracts =
     >;
 
 type UserProfilesContracts =
+  | Contract<
+      "rateUserProfile",
+      null,
+      {
+        userProfileId: Atoms["UserProfileId"];
+        category: Atoms["RatingCategory"];
+      }
+    >
+  | Contract<
+      "addUserProfileScore",
+      Atoms["Score"],
+      {
+        userProfileId: Atoms["UserProfileId"];
+        score: Atoms["ScoreValue"];
+      }
+    >
   | Contract<
       `getYourUserProfile`,
       {
@@ -185,27 +201,38 @@ type UserProfilesContracts =
       `getUserProfile`,
       {
         profile: UserProfileDto;
-        comments: CommentDto[];
+        comments: UserProfileCommentDto[];
       },
       {
         profileId: Atoms["UserProfileId"];
       }
     >
+  | Contract<
+      "findUserProfiles",
+      {
+        hasMore: boolean;
+        userProfiles: UserProfileDto[];
+      },
+      { query: string; by: "displayName" | "id"; limit?: number }
+    >;
+
+type UserProfileCommentsContracts =
   | Contract<
       `addUserProfileComment`,
-      CommentDto,
+      UserProfileCommentDto,
       {
         receiverProfileId: Atoms["UserProfileId"];
         comment: string;
       }
     >
   | Contract<
-      "findUserProfiles",
+      `rateUserProfileComment`,
+      null,
       {
-        hasMore: boolean;
-        userProfiles: UserProfileDto[];
-      },
-      { query: string; by: "displayName" | "id"; limit?: number }
+        profileId: Atoms["UserProfileId"];
+        commentId: Atoms["UserProfileCommentId"];
+        category: Atoms["RatingCategory"];
+      }
     >;
 
 type AccountsContracts = Contract<`getYourAccount`, YourAccountDto>;
@@ -361,7 +388,8 @@ type API4MarkdownContracts =
   | AccountsContracts
   | ResourceCompletionsContracts
   | AccessGroupsContracts
-  | UserProfilesContracts;
+  | UserProfilesContracts
+  | UserProfileCommentsContracts;
 
 export type API4MarkdownContractKey = API4MarkdownContracts["key"];
 export type API4MarkdownDto<TKey extends API4MarkdownContractKey> = Extract<

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

@@ -13,12 +13,13 @@ export type Atoms = {
   ResourceType: "document" | "mindmap" | "mindmap-node";
   ResourceVisibility: "private" | "public" | "permanent" | "manual";
   RatingCategory: "ugly" | "bad" | "decent" | "good" | "perfect";
+  ScoreValue: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   ImageId: Brand<string, `ImageId`>;
   Path: Brand<string, `Path`>;
   Slug: Brand<string, `Slug`>;
   Url: Brand<string, `Url`>;
   RewriteAssistantPersona: "cleany" | "grammy" | "teacher";
-  CommentId: Brand<string, `CommentId`>;
+  UserProfileCommentId: Brand<string, `UserProfileCommentId`>;
   AvatarVariantId: Brand<string, `AvatarVariantId`>;
   AvatarVariant: {
     w: number;
@@ -28,6 +29,11 @@ export type Atoms = {
   };
   DocumentCommentId: Brand<string, `DocumentCommentId`>;
   Rating: Record<Atoms["RatingCategory"], number>;
+  Score: {
+    scoreAverage: number;
+    scoreCount: number;
+    scoreValues: Atoms["ScoreValue"][];
+  };
 };
 
 export type AccessGroupDto = {
@@ -59,24 +65,27 @@ export type ImageDto = {
   id: Atoms["ImageId"];
 };
 
-export type UserProfileDto = {
-  id: Atoms["UserProfileId"];
-  cdate: Atoms["UTCDate"];
-  mdate: Atoms["UTCDate"];
-  displayNameSlug: Atoms["Slug"] | null;
-  displayName: string | null;
-  bio: string | null;
-  avatar: Record<"tn" | "sm" | "md" | "lg", Atoms["AvatarVariant"]> | null;
-  githubUrl: Atoms["Url"] | null;
-  linkedInUrl: Atoms["Url"] | null;
-  twitterUrl: Atoms["Url"] | null;
-  fbUrl: Atoms["Url"] | null;
-  blogUrl: Atoms["Url"] | null;
-};
+export type UserProfileDto = Prettify<
+  {
+    id: Atoms["UserProfileId"];
+    cdate: Atoms["UTCDate"];
+    mdate: Atoms["UTCDate"];
+    displayNameSlug: Atoms["Slug"] | null;
+    displayName: string | null;
+    bio: string | null;
+    avatar: Record<"tn" | "sm" | "md" | "lg", Atoms["AvatarVariant"]> | null;
+    githubUrl: Atoms["Url"] | null;
+    linkedInUrl: Atoms["Url"] | null;
+    twitterUrl: Atoms["Url"] | null;
+    fbUrl: Atoms["Url"] | null;
+    blogUrl: Atoms["Url"] | null;
+  } & Partial<Atoms["Rating"]> &
+    Partial<Atoms["Score"]>
+>;
 
-export type CommentDto = Prettify<
+export type UserProfileCommentDto = Prettify<
   Atoms["Rating"] & {
-    id: Atoms["CommentId"];
+    id: Atoms["UserProfileCommentId"];
     ownerProfile: UserProfileDto;
     cdate: Atoms["UTCDate"];
     mdate: Atoms["UTCDate"];

src/api-4markdown/__tests__/parse-error.test.ts

@@ -1,5 +1,5 @@
 import type { API4MarkdownError } from "api-4markdown-contracts";
-import { parseError } from "../parse-error";
+import { parseError } from "../errors";
 import { expect } from "@jest/globals";
 
 describe(`Error parsing works when`, () => {

src/api-4markdown/parse-error.ts → src/api-4markdown/errors.ts

@@ -1,12 +1,22 @@
 import type { API4MarkdownError } from "api-4markdown-contracts";
 
+class CustomError extends Error {}
+
 const parseError = (error: unknown): API4MarkdownError => {
   const unknownError: Extract<API4MarkdownError, { symbol: "unknown" }> = {
     symbol: `unknown`,
     content: `Unknown error occured`,
     message: `Unknown error occured`,
   };
 
+  if (error instanceof CustomError) {
+    return {
+      symbol: `custom-error`,
+      content: error.message,
+      message: error.message,
+    };
+  }
+
   if (!(error instanceof Error)) {
     return unknownError;
   }
@@ -18,4 +28,6 @@ const parseError = (error: unknown): API4MarkdownError => {
   }
 };
 
-export { parseError };
+const customError = (message: string): CustomError => new CustomError(message);
+
+export { parseError, customError };

src/api-4markdown/index.ts

@@ -1,4 +1,4 @@
-export { parseError } from "./parse-error";
+export { parseError, customError } from "./errors";
 export { observe, emit, unobserveAll } from "./observer";
 export { initializeAPI, getAPI } from "./use-api";
 export { getCache, removeCache, setCache, type CacheVersion } from "./cache";

src/components/rate-picker.tsx

@@ -0,0 +1,53 @@
+import { Atoms } from "api-4markdown-contracts";
+import { RATING_ICONS } from "core/rating-config";
+import { Button } from "design-system/button";
+import { c } from "design-system/c";
+import { playNote } from "development-kit/play-note";
+import React from "react";
+
+type RatePickerProps = {
+  className?: string;
+  rating?: Partial<Record<Atoms["RatingCategory"], number>>;
+  disabled?: boolean;
+  rate: Atoms["RatingCategory"] | null;
+  onRate: (category: Atoms["RatingCategory"], index: number) => void;
+};
+
+const RATE_NOTES = ["c4", "d4", "e4", "f4", "g4"] as const;
+
+const RatePicker = ({
+  className,
+  rate,
+  disabled,
+  rating = {},
+  onRate,
+}: RatePickerProps) => {
+  const rateAndPlay = async (
+    category: Atoms["RatingCategory"],
+    index: number,
+  ): Promise<void> => {
+    playNote(RATE_NOTES[index]);
+    onRate(category, index);
+  };
+
+  return (
+    <div className={c(`flex`, className)}>
+      {RATING_ICONS.map(([Icon, category], idx) => (
+        <Button
+          i={rate === category ? 2 : 1}
+          s={1}
+          auto
+          disabled={disabled}
+          key={category}
+          title={`Rate as ${category}`}
+          onClick={() => rateAndPlay(category, idx)}
+        >
+          <Icon className="mr-0.5" />
+          <strong>{rating[category] ?? 0}</strong>
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export { RatePicker };