store token

frontend/src/PersonDetails.tsx

@@ -1,12 +1,9 @@
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { Person, AddOpinionRequest } from "../items";
+import { apiFetch } from "./api";
 
-interface Props {
-  token: string;
-}
-
-export const PersonDetails = ({ token }: Props) => {
+export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
   const [gameTitle, setGameTitle] = useState("");
@@ -14,9 +11,7 @@ export const PersonDetails = ({ token }: Props) => {
 
   useEffect(() => {
     if (name) {
-      fetch(`/api/${name}`, {
-        headers: { Authorization: `Bearer ${token}` },
-      })
+      apiFetch(`/api/${name}`)
         .then((res) => res.arrayBuffer())
         .then((buffer) => {
           try {
@@ -27,7 +22,7 @@ export const PersonDetails = ({ token }: Props) => {
         })
         .catch(console.error);
     }
-  }, [name, token]);
+  }, [name]);
 
   const handleAddOpinion = async () => {
     if (!person) return;
@@ -40,11 +35,10 @@ export const PersonDetails = ({ token }: Props) => {
     const buffer = AddOpinionRequest.encode(req).finish();
 
     try {
-      const res = await fetch("/api/opinion", {
+      const res = await apiFetch("/api/opinion", {
         method: "POST",
         headers: {
           "Content-Type": "application/octet-stream",
-          Authorization: `Bearer ${token}`,
         },
         body: buffer,
       });