Refactor fetch and post to use axios

Fix set_label id missing in payload use frontend_message_id

pre-commit

Refactor api fetcher/poster to axios create

lint

Remove string literal for path

Revert oasst_api_client.ts

Fix warning httpStatusCode OasstError optional parameter

Refactor remove api base url for local api

Lint add blank line

website/src/components/FlaggableElement.tsx

@@ -23,8 +23,7 @@ import {
 } from "@chakra-ui/react";
 import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useEffect, useReducer } from "react";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
+import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
 import { colors } from "styles/Theme/colors";
 import useSWR from "swr";
@@ -101,7 +100,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
   const [isEditing, setIsEditing] = useBoolean();
   const backgroundColor = useColorModeValue("gray.200", "gray.700");
 
-  const { data, isLoading } = useSWR("/api/valid_labels", fetcher);
+  const { data, isLoading } = useSWR("/api/valid_labels", get);
   useEffect(() => {
     if (isLoading) {
       return;
@@ -110,7 +109,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
     updateReport({ type: "load_labels", labels: valid_labels });
   }, [data, isLoading]);
 
-  const { trigger } = useSWRMutation("/api/set_label", poster, {
+  const { trigger } = useSWRMutation("/api/set_label", post, {
     onSuccess: () => {
       setIsEditing.off();
     },

website/src/components/Messages/MessageTableEntry.tsx

@@ -12,7 +12,6 @@ interface MessageTableEntryProps {
 export function MessageTableEntry(props: MessageTableEntryProps) {
   const { item } = props;
   const backgroundColor = useColorModeValue("gray.50", "gray.800");
-
   return (
     <div>
       <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>

website/src/components/Messages/MessageWithChildren.tsx

@@ -2,7 +2,7 @@ import { Box, CircularProgress, Stack, StackProps, Text, TextProps, useColorMode
 import { boolean } from "boolean";
 import { useState } from "react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
-import fetcher from "src/lib/fetcher";
+import { get } from "src/lib/api";
 import useSWR from "swr";
 
 const MessageHeaderProps: TextProps = {
@@ -34,7 +34,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
   const [message, setMessage] = useState(null);
   const [children, setChildren] = useState(null);
 
-  const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
+  const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, get, {
     onSuccess: (data) => {
       setMessage(data);
     },
@@ -42,7 +42,7 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
       setMessage(null);
     },
   });
-  const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
+  const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, get, {
     onSuccess: (data) => {
       setChildren(data);
     },

website/src/components/Tasks/Task.tsx

@@ -5,7 +5,7 @@ import { EvaluateTask } from "src/components/Tasks/EvaluateTask";
 import { LabelTask } from "src/components/Tasks/LabelTask";
 import { TaskCategory, TaskInfo, TaskTypes } from "src/components/Tasks/TaskTypes";
 import { UnchangedWarning } from "src/components/Tasks/UnchangedWarning";
-import poster from "src/lib/poster";
+import { post } from "src/lib/api";
 import { TaskContent } from "src/types/Task";
 import { TaskReplyState } from "src/types/TaskReplyState";
 import useSWRMutation from "swr/mutation";
@@ -28,7 +28,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
 
   const taskType = TaskTypes.find((taskType) => taskType.type === task.type);
 
-  const { trigger: sendRejection } = useSWRMutation("/api/reject_task", poster, {
+  const { trigger: sendRejection } = useSWRMutation("/api/reject_task", post, {
     onSuccess: async () => {
       mutate();
     },

website/src/components/UserMessagesCell/UserMessagesCell.tsx

@@ -1,6 +1,6 @@
 import { Box, CircularProgress, useColorModeValue } from "@chakra-ui/react";
 import { MessageTable } from "src/components/Messages/MessageTable";
-import fetcher from "src/lib/fetcher";
+import { get } from "src/lib/api";
 import useSWR from "swr";
 
 interface UserMessagesCellProps {
@@ -16,7 +16,7 @@ interface UserMessagesCellProps {
  */
 const UserMessagesCell = ({ path }: UserMessagesCellProps) => {
   const url = path || "/api/messages/user";
-  const { data: messages, isLoading } = useSWR(url, fetcher, {
+  const { data: messages, isLoading } = useSWR(url, get, {
     refreshInterval: 2000,
   });
   // TODO(#651): This box coloring and styling is used in multiple places.  We

website/src/components/UsersCell.tsx

@@ -14,7 +14,7 @@ import {
 } from "@chakra-ui/react";
 import Link from "next/link";
 import { useState } from "react";
-import fetcher from "src/lib/fetcher";
+import { get } from "src/lib/api";
 import useSWR from "swr";
 
 /**
@@ -27,7 +27,7 @@ const UsersCell = () => {
   // Fetch and save the users.
   // This follows useSWR's recommendation for simple pagination:
   //   https://swr.vercel.app/docs/pagination#when-to-use-useswr
-  useSWR(`/api/admin/users?pageIndex=${pageIndex}`, fetcher, {
+  useSWR(`/api/admin/users?pageIndex=${pageIndex}`, get, {
     onSuccess: setUsers,
   });
 

website/src/hooks/tasks/useGenericTaskAPI.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import fetcher from "src/lib/fetcher";
-import poster from "src/lib/poster";
+import { get, post } from "src/lib/api";
 import { BaseTask, TaskResponse } from "src/types/Task";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
@@ -10,19 +9,15 @@ export const useGenericTaskAPI = <TaskType extends BaseTask>(taskApiEndpoint: st
 
   const [tasks, setTasks] = useState<ConcreteTaskResponse[]>([]);
 
-  const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>(
-    "/api/new_task/" + taskApiEndpoint,
-    fetcher,
-    {
-      onSuccess: (data) => setTasks([data]),
-      revalidateOnMount: true,
-      dedupingInterval: 500,
-    }
-  );
+  const { isLoading, mutate, error } = useSWRImmutable<ConcreteTaskResponse>("/api/new_task/" + taskApiEndpoint, get, {
+    onSuccess: (data) => setTasks([data]),
+    revalidateOnMount: true,
+    dedupingInterval: 500,
+  });
 
-  const { trigger } = useSWRMutation("/api/update_task", poster, {
+  const { trigger } = useSWRMutation("/api/update_task", post, {
     onSuccess: async (response) => {
-      const newTask: ConcreteTaskResponse = await response.json();
+      const newTask: ConcreteTaskResponse = response;
       setTasks((oldTasks) => [...oldTasks, newTask]);
       mutate();
     },

website/src/lib/api.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+import { OasstError } from "./oasst_api_client";
+
+const headers = {
+  "Content-Type": "application/json",
+};
+
+const api = axios.create({
+  headers,
+});
+
+export const get = (url: string) => api.get(url).then((res) => res.data);
+
+export const post = (url: string, { arg: data }) => api.post(url, data).then((res) => res.data);
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    throw new OasstError(error.message ?? error, error.error_code);
+  }
+);
+
+export default api;

website/src/lib/fetcher.ts

@@ -1,8 +0,0 @@
-import axios from "axios";
-
-/**
- * A minimal Axios based fetcher.
- */
-const fetcher = (url) => axios.get(url).then((res) => res.data);
-
-export default fetcher;

website/src/lib/oasst_api_client.ts

@@ -5,7 +5,7 @@ export class OasstError {
   errorCode: number;
   httpStatusCode: number;
 
-  constructor(message: string, errorCode: number, httpStatusCode: number) {
+  constructor(message: string, errorCode: number, httpStatusCode?: number) {
     this.message = message;
     this.errorCode = errorCode;
     this.httpStatusCode = httpStatusCode;

website/src/lib/poster.ts

@@ -1,8 +0,0 @@
-const poster = (url, { arg }) => {
-  return fetch(url, {
-    method: "POST",
-    body: JSON.stringify(arg),
-  });
-};
-
-export default poster;

website/src/pages/admin/manage_user/[id].tsx

@@ -6,7 +6,7 @@ import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 import { getAdminLayout } from "src/components/Layout";
 import { UserMessagesCell } from "src/components/UserMessagesCell";
-import poster from "src/lib/poster";
+import { post } from "src/lib/api";
 import prisma from "src/lib/prismadb";
 import useSWRMutation from "swr/mutation";
 
@@ -31,7 +31,7 @@ const ManageUser = ({ user }) => {
   }, [router, session, status]);
 
   // Trigger to let us update the user's role.  Triggers a toast when complete.
-  const { trigger } = useSWRMutation("/api/admin/update_user", poster, {
+  const { trigger } = useSWRMutation("/api/admin/update_user", post, {
     onSuccess: () => {
       toast({
         title: "User Role Updated",

website/src/pages/api/admin/update_user.ts

@@ -5,7 +5,7 @@ import prisma from "src/lib/prismadb";
  * Update's the user's data in the database.  Accessible only to admins.
  */
 const handler = withRole("admin", async (req, res) => {
-  const { id, role } = JSON.parse(req.body);
+  const { id, role } = req.body;
 
   await prisma.user.update({
     where: {

website/src/pages/api/reject_task.ts

@@ -5,7 +5,7 @@ import prisma from "src/lib/prismadb";
 
 const handler = withoutRole("banned", async (req, res) => {
   // Parse out the local task ID and the interaction contents.
-  const { id: frontendId, reason } = await JSON.parse(req.body);
+  const { id: frontendId, reason } = req.body;
 
   const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });
 

website/src/pages/api/set_label.ts

@@ -6,8 +6,7 @@ import { withoutRole } from "src/lib/auth";
  */
 const handler = withoutRole("banned", async (req, res, token) => {
   // Parse out the local message_id, and the interaction contents.
-  const { message_id, label_map, text } = await JSON.parse(req.body);
-
+  const { message_id, label_map, text } = req.body;
   const interactionRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/text_labels`, {
     method: "POST",
     headers: {

website/src/pages/api/update_task.ts

@@ -15,7 +15,7 @@ import prisma from "src/lib/prismadb";
  */
 const handler = withoutRole("banned", async (req, res, token) => {
   // Parse out the local task ID and the interaction contents.
-  const { id: frontendId, content, update_type } = await JSON.parse(req.body);
+  const { id: frontendId, content, update_type } = req.body;
 
   // Accept the task so that we can complete it, this will probably go away soon.
   const registeredTask = await prisma.registeredTask.findUniqueOrThrow({ where: { id: frontendId } });

website/src/pages/messages/[id]/index.tsx

@@ -5,14 +5,14 @@ import { getDashboardLayout } from "src/components/Layout";
 import { MessageLoading } from "src/components/Loading/MessageLoading";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
-import fetcher from "src/lib/fetcher";
+import { get } from "src/lib/api";
 import useSWR from "swr";
 
 const MessageDetail = ({ id }) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
   const [parent, setParent] = useState(null);
 
-  const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, fetcher, {
+  const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, get, {
     onSuccess: (data) => {
       setParent(data);
     },

website/src/pages/messages/index.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import { useEffect, useState } from "react";
 import { getDashboardLayout } from "src/components/Layout";
 import { MessageTable } from "src/components/Messages/MessageTable";
-import fetcher from "src/lib/fetcher";
+import { get } from "src/lib/api";
 import { Message } from "src/types/Conversation";
 import useSWRImmutable from "swr/immutable";
 
@@ -14,11 +14,11 @@ const MessagesDashboard = () => {
   const [messages, setMessages] = useState<Message[]>(null);
   const [userMessages, setUserMessages] = useState<Message[]>(null);
 
-  const { isLoading: isLoadingAll, mutate: mutateAll } = useSWRImmutable("/api/messages", fetcher, {
+  const { isLoading: isLoadingAll, mutate: mutateAll } = useSWRImmutable("/api/messages", get, {
     onSuccess: setMessages,
   });
 
-  const { isLoading: isLoadingUser, mutate: mutateUser } = useSWRImmutable(`/api/messages/user`, fetcher, {
+  const { isLoading: isLoadingUser, mutate: mutateUser } = useSWRImmutable(`/api/messages/user`, get, {
     onSuccess: setUserMessages,
   });