[Frontend] Followed tags in profile

frontend/src/routes/profile.tsx

@@ -17,6 +17,7 @@ import useAuthStore from "@/services/auth";
 import { useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 
+import { Badge } from "@/components/ui/badge";
 import { Textarea } from "@/components/ui/textarea";
 
 export default function Profile() {
@@ -83,10 +84,10 @@ export default function Profile() {
             />
           </Avatar>
           <div className="flex space-x-4 text-center">
-            {/* <div>
+            <div>
               <div className="font-bold">{profile.questionCount}</div>
               <div className="text-sm text-gray-700">Questions</div>
-            </div> */}
+            </div>
             <div>
               <div className="font-bold">{profile.answerCount}</div>
               <div className="text-sm text-gray-700">Answers</div>
@@ -166,6 +167,26 @@ export default function Profile() {
             )
           )}
         </div>
+        {profile.followedTags && (
+          <div className="flex flex-col">
+            <div className="flex flex-wrap gap-2">
+              <span className="flex items-center gap-2">
+                <span>Followed tags: </span>
+                {profile.followedTags
+                  ?.map((s) => (
+                    <Link to={`/tag/${s.id}`} key={s.name}>
+                      <Badge>{s.name}</Badge>
+                    </Link>
+                  ))
+                  .slice(0, 3)}
+                {profile.followedTags?.length &&
+                  profile.followedTags?.length > 3 && (
+                    <span>+ {profile.followedTags?.length - 3} more</span>
+                  )}
+              </span>
+            </div>
+          </div>
+        )}
       </div>
       <div className="mt-4 flex flex-col gap-4 px-4 py-2">
         <Tabs value={activeTab} onValueChange={setActiveTab}>

frontend/src/routes/question.test.tsx

@@ -36,6 +36,12 @@ const mockQuestionData = vi.hoisted(
       createdAt: "2023-01-01T00:00:00Z",
       updatedAt: "2023-01-01T00:00:00Z",
       dislikeCount: 0,
+      bookmarked: false,
+      selfVoted: 1,
+      selfDifficultyVote: "EASY",
+      easyCount: 0,
+      hardCount: 0,
+      mediumCount: 0,
     }) satisfies QuestionDetails,
 );
 // Mock the API hook

frontend/src/routes/question.tsx

@@ -1,5 +1,6 @@
 import LinkIcon from "@/assets/Icon/General/Link.svg?react";
 import { Answers } from "@/components/Answers";
+import { ContentWithSnippets } from "@/components/ContentWithSnippets";
 import { CreateAnswerForm } from "@/components/CreateAnswerForm";
 import ErrorAlert from "@/components/ErrorAlert";
 import { ExerciseCard } from "@/components/ExerciseCard";
@@ -19,7 +20,6 @@ import { convertTagToTrack, useExercismSearch } from "@/services/exercism";
 import { Flag, MessageSquare, ThumbsDown, ThumbsUp, Trash } from "lucide-react";
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { ContentWithSnippets } from "@/components/ContentWithSnippets";
 
 export default function QuestionPage() {
   const { questionId } = useParams();
@@ -75,7 +75,7 @@ export default function QuestionPage() {
         difficulty:
           (data as unknown as { difficultyLevel: string })?.difficultyLevel ??
           "easy",
-        track: convertTagToTrack(data?.tags[0].name ?? ""),
+        track: convertTagToTrack(data?.tags?.[0]?.name ?? ""),
       },
     },
     {

frontend/src/services/api/programmingForumSchemas.ts

@@ -86,6 +86,7 @@ export type UserProfile = {
   answerCount?: number;
   answers?: AnswerDetails[];
   questions?: QuestionSummary[];
+  followedTags?: TagSummary[];
 };
 
 export type UserProfileUpdate = {
@@ -150,7 +151,7 @@ export type QuestionDetails = {
    * @maximum 1
    */
   selfVoted: number;
-  selfDifficultyVote: boolean;
+  selfDifficultyVote: DifficultyLevel;
   easyCount: number;
   mediumCount: number;
   hardCount: number;
@@ -261,6 +262,7 @@ export type TagDetails = {
 export type TagSummary = {
   id?: string;
   name?: string;
+  tagType?: TagType;
   questionCount?: number;
   /**
    * @format url

mobile/services/api/programmingForumSchemas.ts

@@ -86,6 +86,7 @@ export type UserProfile = {
   answerCount?: number;
   answers?: AnswerDetails[];
   questions?: QuestionSummary[];
+  followedTags?: TagSummary[];
 };
 
 export type UserProfileUpdate = {
@@ -150,7 +151,7 @@ export type QuestionDetails = {
    * @maximum 1
    */
   selfVoted: number;
-  selfDifficultyVote: boolean;
+  selfDifficultyVote: DifficultyLevel;
   easyCount: number;
   mediumCount: number;
   hardCount: number;
@@ -261,6 +262,7 @@ export type TagDetails = {
 export type TagSummary = {
   id?: string;
   name?: string;
+  tagType?: TagType;
   questionCount?: number;
   /**
    * @format url

swagger/openapi.yml

@@ -1297,6 +1297,10 @@ components:
           type: array
           items:
             $ref: "#/components/schemas/QuestionSummary"
+        followedTags:
+          type: array
+          items:
+            $ref: "#/components/schemas/TagSummary"
       examples:
         - id: 1
           username: "john_doe"
@@ -1447,7 +1451,7 @@ components:
           minimum: -1
           maximum: 1
         selfDifficultyVote:
-          type: boolean
+          $ref: "#/components/schemas/DifficultyLevel"
         easyCount:
           type: integer
         mediumCount:
@@ -1709,6 +1713,8 @@ components:
           type: string
         name:
           type: string
+        tagType:
+          $ref: '#/components/schemas/TagType'
         questionCount:
           type: integer
         photo: