update

pages/index.tsx

@@ -115,11 +115,14 @@ const IndexSidebarCard = ({ sidebar }) => {
 
   return (
     <>
-      {posts.length > 0 && <Card p="0">
+      <Card p="0">
         <CardHeader>
           <Link href={`${ReserveUrls.Tags}/${sidebar.tagName}`}><Heading size="sm" cursor="pointer">#{sidebar.tagName}</Heading></Link>
         </CardHeader>
-        <Divider />
+      
+        {posts.length > 0 && 
+        <>
+          <Divider />
         <CardBody>
           <VStack alignItems="left" mt="1">
             {
@@ -127,7 +130,9 @@ const IndexSidebarCard = ({ sidebar }) => {
             }
           </VStack>
         </CardBody>
-      </Card>}
+        </>
+        }
+      </Card>
     </>
   )
 }

pages/tags/index.tsx

@@ -12,32 +12,30 @@ import SEO from "components/seo"
 import siteConfig from "configs/site-config"
 import PageContainer1 from "layouts/page-container1"
 import React, { useEffect, useState } from "react"
-import { HomeSidebar } from 'pages/index'
 import Card, { CardBody, CardHeader } from "components/card"
 import { config } from "configs/config"
-import { getSvgIcon } from "components/svg-icon"
 import { Tag } from "src/types/tag"
 import { requestApi } from "utils/axios/request"
 import TagCard from 'src/components/tags/tag-card'
 import useSession from "hooks/use-session"
 import Link from "next/link"
 import { IDType } from "src/types/id"
+import { SearchFilter } from "src/types/search"
 
 const tagsFilter = [{
+  id: SearchFilter.Best,
   name: 'Popular',
   desc: 'Extremely active tags in terms of posts in the last 7 days.'
 },
+// {
+//   id: SearchFilter.Latest,
+//   name: "Recently Added",
+//   desc: "Tags that are recently added, sorted from newest to oldest."
+// },
 {
-  name: "Recently Added",
-  desc: "Tags that are recently added, sorted from newest to oldest."
-},
-{
+  id: SearchFilter.Favorites,
   name: "Most Followers",
   desc: "Tags with the maximum number of followers and posts all time.",
-},
-{
-  name: "New Proposals",
-  desc: "Follow these tags to cast your vote. We periodically approve tags based on community interest."
 }
 ]
 
@@ -48,7 +46,7 @@ const TagsPage = () => {
 
   const session = useSession()
   const getTags = () => {
-    requestApi.get(`/tag/all`).then((res) => setTags(res.data)).catch(_ => setTags([]))
+    requestApi.get(`/tag/all?filter=${filter.id}`).then((res) => setTags(res.data)).catch(_ => setTags([]))
   }
 
   const getUserTags = async () => {
@@ -115,19 +113,19 @@ const TagsPage = () => {
 
               <Divider mt="3" mb="5" />
               <VStack alignItems="left" spacing="3">
-                  {tags.map(t => <TagCard key={t.id} tag={t}/>)}
+                  {tags.map(t => <TagCard key={t.id} tag={t} unit={filter.id === SearchFilter.Best ? 'posts' : "followers"}/>)}
               </VStack>
             </Card>
           </VStack>
-          {userTags.length > 0 && <Card p="0" width="30%" display={{base: "none", md: "block"}}>
+           <Card p="0" width="30%" display={{base: "none", md: "block"}}>
             <CardHeader>
               <Heading size="sm">我关注的Tags</Heading>
             </CardHeader>
             <Divider />
-            <CardBody>
+            {userTags.length > 0 && <CardBody>
                 <VStack alignItems="left"  spacing="4">
                    {
-                     userTags.map(tag => <Link href={`/tags/${tag.name}`}>
+                     userTags.map(tag => <Link key={tag.id} href={`/tags/${tag.name}`}>
                        <HStack cursor="pointer" spacing="4">
                           {tag.icon && <Image src={tag.icon} width="35px"/>}
                           <Text>#{tag.name}</Text>
@@ -135,8 +133,8 @@ const TagsPage = () => {
                      </Link>)
                    }
                 </VStack>
-            </CardBody>
-          </Card>}
+            </CardBody>}
+          </Card>
         </HStack>
       </PageContainer1>
     </>

server/internal/api/tag.go

@@ -2,9 +2,11 @@ package api
 
 import (
 	"net/http"
+	"sort"
 	"strconv"
 
 	"github.com/gin-gonic/gin"
+	"github.com/imdotdev/im.dev/server/internal/interaction"
 	"github.com/imdotdev/im.dev/server/internal/tags"
 	"github.com/imdotdev/im.dev/server/internal/user"
 	"github.com/imdotdev/im.dev/server/pkg/common"
@@ -24,12 +26,23 @@ func GetTag(c *gin.Context) {
 }
 
 func GetTags(c *gin.Context) {
+	filter := c.Query("filter")
 	res, err := models.GetTags()
 	if err != nil {
 		c.JSON(err.Status, common.RespError(err.Message))
 		return
 	}
 
+	if filter == models.FilterFavorites {
+		for _, tag := range res {
+			tag.Follows = interaction.GetFollows(tag.ID)
+		}
+
+		sort.Sort(models.FollowTags(res))
+	} else {
+		sort.Sort(res)
+	}
+
 	c.JSON(http.StatusOK, common.RespSuccess(res))
 }
 

server/internal/storage/init_tags.go

@@ -21,7 +21,7 @@ var tagsList = []*models.Tag{
 	&models.Tag{Title: "Machine Learning", Name: "machine-learning", Icon: "https://cdn.hashnode.com/res/hashnode/image/upload/v1513321644252/Sk43El-fz.png?w=180&h=180&fit=crop&crop=entropy&auto=compress", Md: ""},
 	&models.Tag{Title: "Developer", Name: "developer", Icon: "https://cdn.hashnode.com/res/hashnode/image/upload/v1554321431158/MqVqSHr8Q.jpeg?w=180&h=180&fit=crop&crop=entropy&auto=compress", Md: ""},
 	&models.Tag{Title: "Docker", Name: "docker", Icon: "https://res.cloudinary.com/practicaldev/image/fetch/s--7L1txQC1--/c_limit,f_auto,fl_progressive,q_80,w_180/https://dev-to-uploads.s3.amazonaws.com/uploads/badge/badge_image/87/docker-badge.png", Md: "Docker is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on laptops, data center VMs, or the cloud.\n\n\n\u003cWebsiteLink type=\"official\" url=\"https://reactjs.org/\" /\u003e"},
-	&models.Tag{Title: "Kubernetes", Name: "kubernetes", Icon: "https://res.cloudinary.com/practicaldev/image/fetch/s--XXaJdQCT--/c_limit,f_auto,fl_progressive,q_80,w_180/https://dev-to-uploads.s3.amazonaws.com/uploads/badge/badge_image/88/kubernetes-badge.png", Md: "\n\n\n\u003cWebsiteLink type=\"official\" url=\"https://kubernetes.io/\" /\u003e"},
+	&models.Tag{Title: "Kubernetes", Name: "kubernetes", Icon: "https://res.cloudinary.com/practicaldev/image/fetch/s--XXaJdQCT--/c_limit,f_auto,fl_progressive,q_80,w_180/https://dev-to-uploads.s3.amazonaws.com/uploads/badge/badge_image/88/kubernetes-badge.png", Md: "Kubernetes, also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications.\n\n\n\u003cWebsiteLink type=\"official\" url=\"https://kubernetes.io/\" /\u003e"},
 	&models.Tag{Title: "Rust", Name: "rust", Icon: "https://res.cloudinary.com/practicaldev/image/fetch/s--4RD0-X0v--/c_limit,f_auto,fl_progressive,q_80,w_180/https://dev-to-uploads.s3.amazonaws.com/uploads/badge/badge_image/35/rust-badge.png", Md: "Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.\n\n\n\u003cWebsiteLink type=\"official\" url=\"https://rust-lang.org/\" /\u003e"},
 	&models.Tag{Title: "Web Development", Name: "webdev", Icon: "https://i.postimg.cc/RVP8fWFz/web-dev-logo.png", Md: ""},
 	&models.Tag{Title: "Testing", Name: "testing", Icon: "https://i.postimg.cc/0ygM0fzs/testing-image.png", Md: "Executing a program or application with the intent of finding the software bugs is known as Software Testing. It is normally done to detect the differences between given input and expected output."},

server/pkg/models/tag.go

@@ -38,6 +38,14 @@ func (t Tags) Less(i, j int) bool {
 	return t[i].Posts > t[j].Posts
 }
 
+type FollowTags []*Tag
+
+func (t FollowTags) Len() int      { return len(t) }
+func (t FollowTags) Swap(i, j int) { t[i], t[j] = t[j], t[i] }
+func (t FollowTags) Less(i, j int) bool {
+	return t[i].Follows > t[j].Follows
+}
+
 func GetTargetTags(targetID string) ([]string, []*Tag, error) {
 	ids := make([]string, 0)
 	rows, err := db.Conn.Query("SELECT tag_id FROM tags_using WHERE target_id=?", targetID)

src/components/tags/tag-card.tsx

@@ -11,11 +11,12 @@ type Props = PropsOf<typeof chakra.div> & {
     showActions?: boolean
     onEdit?: any
     onDelete?: any
+    unit?: string
 }
 
 
 export const TagCard= (props:Props) =>{
-    const {tag,showActions=false,onEdit,onDelete} = props
+    const {tag,showActions=false,onEdit,onDelete,unit="posts"} = props
     return (
         <Flex justifyContent="space-between" alignItems="center" className="hover-bg" p="2">
                 <NextLink href={`${ReserveUrls.Tags}/${tag.name}`}>
@@ -32,7 +33,7 @@ export const TagCard= (props:Props) =>{
                 <Button size="sm" colorScheme="teal" variant="outline" onClick={onEdit}>Edit</Button>
                 {/* <Button size="sm" onClick={onDelete} variant="ghost">Delete</Button> */}
             </HStack> : 
-            <ChakraTag py="1" px="3"  colorScheme="cyan"><Count count={tag.posts} />&nbsp;posts</ChakraTag>
+            <ChakraTag py="1" px="3"  colorScheme="cyan"><Count count={unit === 'posts' ? tag.posts : tag.follows} />&nbsp;{unit}</ChakraTag>
             }
         </Flex>  
     )