feat(ui): add users page

ui/src/common/interface.ts

@@ -501,3 +501,11 @@ export interface MemberActionItem {
   name: string;
   type: string;
 }
+
+export interface User {
+  username: string;
+  rank: number;
+  vote_count: number;
+  display_name: string;
+  avatar: string;
+}

ui/src/components/Header/index.tsx

@@ -131,6 +131,9 @@ const Header: FC = () => {
               <NavLink className="nav-link" to="/tags">
                 {t('header.nav.tag')}
               </NavLink>
+              <NavLink className="nav-link" to="/users">
+                {t('header.nav.user')}
+              </NavLink>
             </Nav>
           </Col>
           <hr className="hr lg-none mt-2" />

ui/src/pages/Users/index.tsx

@@ -0,0 +1,75 @@
+import { Container, Row, Col } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import { usePageTags } from '@/hooks';
+import { useQueryContributeUsers } from '@/services';
+import { Avatar } from '@/components';
+
+const Users = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'users' });
+
+  const { data: users } = useQueryContributeUsers();
+
+  usePageTags({
+    title: t('users', { keyPrefix: 'page_title' }),
+  });
+
+  if (!users) {
+    return null;
+  }
+
+  const keys = Object.keys(users);
+  return (
+    <Container className="py-3 my-3">
+      <Row className="mb-4 d-flex justify-content-center">
+        <Col xxl={10} sm={12}>
+          <h3 className="mb-4">{t('title')}</h3>
+        </Col>
+
+        <Col xxl={10} sm={12}>
+          {keys.map((key, index) => {
+            if (users[key]?.length === 0) {
+              return null;
+            }
+            return (
+              <>
+                <Row className="mb-4">
+                  <Col>
+                    <h6 className="mb-0">{t(key)}</h6>
+                  </Col>
+                </Row>
+                <Row className={index === keys.length - 1 ? '' : 'mb-4'}>
+                  {users[key]?.map((user) => (
+                    <Col
+                      key={user.username}
+                      xs={12}
+                      lg={3}
+                      md={4}
+                      sm={6}
+                      className="mb-4">
+                      <div className="d-flex">
+                        <Avatar size="48px" avatar={user?.avatar} />
+
+                        <div className="ms-2">
+                          <Link to={`/users/${user.username}`}>
+                            {user.display_name}
+                          </Link>
+                          <div className="text-secondary fs-14">
+                            {user.rank} {t('reputation')}
+                          </div>
+                        </div>
+                      </div>
+                    </Col>
+                  ))}
+                </Row>
+              </>
+            );
+          })}
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default Users;

ui/src/router/routes.ts

@@ -92,6 +92,10 @@ const routes: RouteNode[] = [
         },
       },
       // for users
+      {
+        path: 'users',
+        page: 'pages/Users',
+      },
       {
         path: 'users/:username',
         page: 'pages/Users/Personal',

ui/src/services/client/index.ts

@@ -8,3 +8,4 @@ export * from './settings';
 export * from './legal';
 export * from './timeline';
 export * from './revision';
+export * from './user';

ui/src/services/client/user.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+
+import request from '@/utils/request';
+import type * as Type from '@/common/interface';
+
+export const useQueryContributeUsers = () => {
+  const apiUrl = '/answer/api/v1/user/ranking';
+  return useSWR<{
+    users_with_the_most_reputation: Type.User[];
+    users_with_the_most_vote: Type.User[];
+    staffs: Type.User[];
+  }>(apiUrl, request.instance.get);
+};