Show current user rank in leaderboard (#1263)

close #1000 maybe #1178 too

*  Show current user rank in the leaderboard with +-1 user (only on leaderboard 
*  Extend auto_main script to use random user.
*  Support colSpan in the DataTable component (I haven't verified colSpan in header yet, leave that until we need it)
*  Refactor OasstError to include the path and request method.

website/src/lib/api.ts

@@ -25,7 +25,13 @@ api.interceptors.response.use(
   (response) => response,
   (error) => {
     const err = error?.response?.data;
-    throw new OasstError(err?.message ?? error, err?.errorCode, error?.response?.httpStatusCode || -1);
+    throw new OasstError({
+      message: err?.message ?? error,
+      errorCode: err?.errorCode,
+      httpStatusCode: error?.response?.httpStatusCode || -1,
+      method: err?.config?.method,
+      path: err?.config?.url,
+    });
   }
 );
 

website/src/lib/oasst_api_client.ts

@@ -7,11 +7,27 @@ export class OasstError {
   message: string;
   errorCode: number;
   httpStatusCode: number;
+  path: string;
+  method: string;
 
-  constructor(message: string, errorCode: number, httpStatusCode: number) {
+  constructor({
+    errorCode,
+    httpStatusCode,
+    message,
+    path,
+    method,
+  }: {
+    message: string;
+    errorCode: number;
+    httpStatusCode: number;
+    path: string;
+    method: string;
+  }) {
     this.message = message;
     this.errorCode = errorCode;
     this.httpStatusCode = httpStatusCode;
+    this.path = path;
+    this.method = method;
   }
 
   toString() {
@@ -60,9 +76,21 @@ export class OasstApiClient {
       try {
         error = JSON.parse(errorText);
       } catch (e) {
-        throw new OasstError(errorText, 0, resp.status);
+        throw new OasstError({
+          message: errorText,
+          errorCode: 0,
+          httpStatusCode: resp.status,
+          path,
+          method,
+        });
       }
-      throw new OasstError(error.message ?? error, error.error_code, resp.status);
+      throw new OasstError({
+        message: error.message ?? error,
+        errorCode: error.error_code,
+        httpStatusCode: resp.status,
+        path,
+        method,
+      });
     }
 
     return resp.json();
@@ -297,9 +325,9 @@ export class OasstApiClient {
     return this.get(`/api/v1/messages/${messageId}/conversation`);
   }
 
-  async fetch_tos_acceptance(user: BackendUserCore): Promise<BackendUser["tos_acceptance_date"]> {
-    const backendUser = await this.get<BackendUser>(`/api/v1/frontend_users/${user.auth_method}/${user.id}`);
-    return backendUser.tos_acceptance_date;
+  async fetch_tos_acceptance(backendUserCore: BackendUserCore): Promise<BackendUser["tos_acceptance_date"]> {
+    const user = await this.fetch_frontend_user(backendUserCore);
+    return user.tos_acceptance_date;
   }
 
   async set_tos_acceptance(user: BackendUserCore) {
@@ -312,4 +340,14 @@ export class OasstApiClient {
     const backendUser = await this.get<BackendUser>(`/api/v1/frontend_users/${user.auth_method}/${user.id}`);
     return this.get(`/api/v1/users/${backendUser.user_id}/stats`);
   }
+
+  fetch_user_stats_window(user_id: string, time_frame: LeaderboardTimeFrame, window_size?: number) {
+    return this.get<LeaderboardReply>(`/api/v1/users/${user_id}/stats/${time_frame}/window`, {
+      window_size,
+    });
+  }
+
+  fetch_frontend_user(user: BackendUserCore) {
+    return this.get<BackendUser>(`/api/v1/frontend_users/${user.auth_method}/${user.id}`);
+  }
 }