refactor(frontend): some degree of api wrapping

This commit is contained in:
hanabi 2022-11-24 14:44:47 -05:00
parent f4a63fc95e
commit ba24815320
11 changed files with 365 additions and 222 deletions

View file

@ -2,9 +2,6 @@ import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import Loading from "../../components/Loading";
import fetchAPI from "../../lib/fetch";
import { userState } from "../../lib/state";
import { MeUser, Field } from "../../lib/types";
import cloneDeep from "lodash/cloneDeep";
import { ReactSortable } from "react-sortablejs";
@ -21,6 +18,8 @@ import toast from "../../lib/toast";
import ReactCodeMirror from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import ReactMarkdown from "react-markdown";
import { userState } from "../../lib/state";
import { fetchAPI, Field, MeUser } from "../../lib/api-fetch";
export default function Index() {
const [user, setUser] = useRecoilState(userState);

View file

@ -1,15 +1,14 @@
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useRecoilState } from "recoil";
import fetchAPI from "../../lib/fetch";
import { userState } from "../../lib/state";
import { APIError, MeUser, SignupResponse } from "../../lib/types";
import TextInput from "../../components/TextInput";
import Loading from "../../components/Loading";
import Button, { ButtonStyle } from "../../components/Button";
import Notice from "../../components/Notice";
import BlueLink from "../../components/BlueLink";
import toast from "../../lib/toast";
import { fetchAPI, MeUser, SignupResponse } from "../../lib/api-fetch";
interface CallbackResponse {
has_account: boolean;

View file

@ -2,7 +2,7 @@ import { GetServerSideProps } from "next";
import { useRouter } from "next/router";
import { useRecoilValue } from "recoil";
import Head from "next/head";
import fetchAPI from "../../lib/fetch";
import { fetchAPI } from "../../lib/api-fetch";
import { userState } from "../../lib/state";
interface URLsResponse {

View file

@ -1,26 +1,30 @@
import { GetServerSideProps } from "next";
import fetchAPI from "../../../lib/fetch";
import { Member } from "../../../lib/types";
import PersonPage from "../../../components/PersonPage";
import { Member } from "../../../lib/api";
import * as API from "../../../lib/api-fetch";
interface Props {
member: Member;
member: API.Member;
}
export default function MemberPage({ member }: Props) {
return <PersonPage person={member} />;
return <PersonPage person={new Member(member)} />;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
try {
const member = await fetchAPI<Member>(
`/users/${context.params!.user}/members/${context.params!.member}`
);
const userName = context.params!.user;
if (typeof userName !== "string") return { notFound: true };
const memberName = context.params!.member;
if (typeof memberName !== "string") return { notFound: true };
return { props: { member } };
try {
return {
props: {
member: await API.fetchAPI<API.Member>(`/users/${context.params!.user}/members/${context.params!.member}`),
},
};
} catch (e) {
console.log(e);
return { notFound: true };
}
};

View file

@ -1,22 +1,21 @@
import { GetServerSideProps } from "next";
import PersonPage from "../../../components/PersonPage";
import fetchAPI from "../../../lib/fetch";
import { PartialMember, User } from "../../../lib/types";
import { User } from "../../../lib/api";
import * as API from "../../../lib/api-fetch";
interface Props {
user: User;
partialMembers: PartialMember[];
user: API.User;
}
export default function Index({ user }: Props) {
return <PersonPage person={user} />;
return <PersonPage person={new User(user)} />;
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const name = context.params!.user;
const userName = context.params!.user;
if (typeof userName !== "string") return { notFound: true };
try {
const user = await fetchAPI<User>(`/users/${name}`);
return { props: { user } };
return { props: { user: await API.fetchAPI<User>(`/users/${userName}`) } };
} catch (e) {
console.log(e);
return { notFound: true };