Function App

webapp/_webapp/src/devtool/app.tsx:20–120

()

};

const App = () => {
  const { token, refreshToken, setToken, setRefreshToken } = useAuthStore();
  const [projectId, setProjectId] = useState(storage.getItem("pd.projectId") ?? "");
  const [overleafSession, setOverleafSession] = useState(storage.getItem("pd.auth.overleafSession") ?? "");
  const [gclb, setGclb] = useState(storage.getItem("pd.auth.gclb") ?? "");
  const [csrfToken, setCsrfToken] = useState(storage.getItem("pd.auth.csrfToken") ?? "");

  const { showTool } = useDevtoolStore();

  useEffect(() => {
    getCookies(window.location.hostname).then((cookies) => {
      setOverleafSession(cookies.session ?? storage.getItem("pd.auth.overleafSession") ?? "");
      setGclb(cookies.gclb ?? storage.getItem("pd.auth.gclb") ?? "");
    });
  }, []);

  const setProjectId_ = useCallback((projectId: string) => {
    storage.setItem("pd.projectId", projectId);
    setProjectId(projectId);
  }, []);

  const setOverleafSession_ = useCallback((overleafSession: string) => {
    storage.setItem("pd.auth.overleafSession", overleafSession);
    setOverleafSession(overleafSession);
  }, []);

  const setGclb_ = useCallback((gclb: string) => {
    storage.setItem("pd.auth.gclb", gclb);
    setGclb(gclb);
  }, []);

  const setCsrfToken_ = useCallback((csrfToken: string) => {
    storage.setItem("pd.auth.csrfToken", csrfToken);
    setCsrfToken(csrfToken);
    // Update meta tag in DOM
    updateCsrfTokenMeta(csrfToken);
  }, []);

  return (
    <main className="flex flex-row gap-2">
      <div className="flex flex-col gap-2 max-w-xl p-4 bg-slate-50 rounded-lg border-slate-200 border">
        <div className="flex flex-col gap-2">
          <VariableInput
            title="Project ID"
            description="Overleaf → URL → /projectId"
            value={projectId}
            setValue={setProjectId_}
          />
          <VariableInput
            title="Overleaf Session"
            description="Overleaf → Request Headers → Cookie → overleaf_session2"
            value={overleafSession}
            setValue={setOverleafSession_}
          />
          <VariableInput
            title="GCLB"
            description="Overleaf → Request Headers → Cookie → GCLB"
            value={gclb}