Few SWR routes

2020-12-30 21:38:06 +02:00
parent e1b4e7a57f
commit d1e58bb05b
8 changed files with 198 additions and 184 deletions
@@ -1,9 +1,11 @@
 import axios from "axios";
+import useSWR from "swr";
 import { getAuthHeader } from "@utils/auth";
 import { Tag } from "./Tag";
 import qs from "query-string";
 import { SignupForm } from "./SignupForm";
-const url = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
+
+const URL = `${process.env.NEXT_PUBLIC_API_URL}/events/`;

 export interface Event {
  id: number;
@@ -38,7 +40,7 @@ export async function getEvents(options: Options = {}): Promise<Event[]> {
    };
    const search = qs.stringify(params);
    const headers = auth ? { "Authorization": getAuthHeader() } : null;
-    const resp = await axios.get(`${url}?${search}`, {
+    const resp = await axios.get(`${URL}?${search}`, {
      headers
    });
    return resp.data["results"];
@@ -51,7 +53,7 @@ export async function getEvents(options: Options = {}): Promise<Event[]> {
 export async function getEvent(id: number, auth = false): Promise<Event> {
  try {
    const headers = auth ? { "Authorization": getAuthHeader() } : null;
-    const resp = await axios.get(`${url}${id}/`, {
+    const resp = await axios.get(`${URL}${id}/`, {
      headers
    });
    return resp.data;
@@ -63,7 +65,7 @@ export async function getEvent(id: number, auth = false): Promise<Event> {

 export async function createEvent(data): Promise<Event> {
  try {
-    const resp = await axios.post(url, data, {
+    const resp = await axios.post(URL, data, {
      headers: {
        "Authorization": getAuthHeader(),
      },
@@ -77,7 +79,7 @@ export async function createEvent(data): Promise<Event> {

 export async function updateEvent(data): Promise<Event> {
  try {
-    const putUrl = `${url}${data.id}/`;
+    const putUrl = `${URL}${data.id}/`;
    const resp = await axios.put(putUrl, data, {
      headers: {
        "Authorization": getAuthHeader(),
@@ -89,3 +91,40 @@ export async function updateEvent(data): Promise<Event> {
    throw err;
  }
 }
+
+export const eventFetcher = axios.get;
+
+export const generateFetchParams = (id = "", options: Options = {}) => {
+  const url = `${URL}${id}`;
+  const { auth, onlyNonPast, limit } = options;
+
+  return {
+    url,
+    config: {
+      params: {
+        since: onlyNonPast ? (new Date()).toISOString() : undefined,
+        limit
+      },
+      headers: auth ? { "Authorization": getAuthHeader() } : null
+    }
+  }
+}
+
+interface FetchArguments {
+  initialData?: Event | Event[],
+  id?: string;
+  options?: Options
+}
+
+export const useFetchEvents = ({
+  initialData,
+  id = "",
+  options = {}
+}: FetchArguments) => {
+  const { url, config } = generateFetchParams(id, options);
+  const { data, error } = useSWR([url, config], eventFetcher, { initialData });
+  return {
+    data: data["results"] as Event[] || data as Event,
+    error
+  }
+}
@@ -1,9 +1,11 @@
 import axios from "axios";
+import useSWR from "swr";
 import { getAuthHeader } from "@utils/auth";
-const url = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 import { Question } from "@components/Widgets/SignupQuestionsWidget";
 import { Signup } from "./Signup";

+const URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
+
 export interface SignupForm {
  id?: number;
  title_fi: string;
@@ -26,7 +28,7 @@ export interface SignupForm {
 export async function getForms(auth = false): Promise<SignupForm[]> {
  try {
    const headers = auth ? { "Authorization": getAuthHeader() } : null;
-    const resp = await axios.get(url, {
+    const resp = await axios.get(URL, {
      headers
    });
    const { results } = resp.data;
@@ -40,7 +42,7 @@ export async function getForms(auth = false): Promise<SignupForm[]> {
 export async function getForm(id: number, auth = false): Promise<SignupForm> {
  try {
    const headers = auth ? { "Authorization": getAuthHeader() } : null;
-    const resp = await axios.get(`${url}${id}/`, {
+    const resp = await axios.get(`${URL}${id}/`, {
      headers
    });
    return resp.data;
@@ -52,7 +54,7 @@ export async function getForm(id: number, auth = false): Promise<SignupForm> {

 export async function createForm(data): Promise<SignupForm> {
  try {
-    const resp = await axios.post(url, data, {
+    const resp = await axios.post(URL, data, {
      headers: {
        "Authorization": getAuthHeader(),
      },
@@ -66,7 +68,7 @@ export async function createForm(data): Promise<SignupForm> {

 export async function updateForm(data): Promise<SignupForm> {
  try {
-    const putUrl = `${url}${data.id}/`;
+    const putUrl = `${URL}${data.id}/`;
    const resp = await axios.put(putUrl, data, {
      headers: {
        "Authorization": getAuthHeader(),
@@ -1,53 +1,42 @@
 import React from "react";
-import { Helmet } from "react-helmet";
-import { RouteComponentProps } from "react-router-dom";
-import { Event, getEvent } from "@models/Event";
+import { NextPage, GetServerSideProps } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { Event, useFetchEvents, eventFetcher, generateFetchParams } from "@models/Event";
 import EventPageView from "@views/EventPage/EventPageView";
+import PageWrapper from "@views/common/PageWrapper";

-interface MatchParams {
-  id: string;
+interface InitialProps {
+  initialEvent: Event;
 }

-interface EventPageState {
-  event?: Event;
+const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
+  const router = useRouter();
+  const { id } = router.query;
+  const { data, error } = useFetchEvents({ initialData: initialEvent, id: id as string });
+  if (!data) return <div>Loading</div>
+
+  return (
+    <>
+      <Head>
+        <link rel="canonical" href={`https://sik.ayy.fi/events/${id}`} />
+      </Head>
+      <PageWrapper>
+        <EventPageView event={data as Event} />
+      </PageWrapper>
+    </>
+  );
 }

-type EventPageProps = RouteComponentProps<MatchParams>
-
-class EventPage extends React.Component<EventPageProps, EventPageState> {
-  constructor(props: EventPageProps) {
-    super(props);
-    const { id } = this.props.match.params;
-    this.state = {
-      event: null
-    }
-    this.fetchEvent(Number(id));
-  }
-
-
-  fetchEvent(id: number) {
-    const eventPromise = getEvent(id);
-    eventPromise.then(event => {
-      this.setState({
-        event,
-      });
-    });
-    return eventPromise;
-  }
-
-  render() {
-    const { event } = this.state;
-    if (!event) return <div>Loading</div>
-
-    return (
-      <>
-        <Helmet>
-          <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
-        </Helmet>
-        <EventPageView event={event} />
-      </>
-    );
-  }
-}
+export const getServerSideProps: GetServerSideProps<InitialProps> = async (context) => {
+  const { id } = context.query
+  const { url, config } = generateFetchParams(id as string);
+  const res = await eventFetcher(url, config);
+  return {
+    props: {
+      initialEvent: res.data,
+    },
+  };
+};

 export default EventPage;
@@ -2,15 +2,15 @@ import React from "react";
 import { NextPage, GetServerSideProps } from "next";
 import Head from "next/head";
 import useSWR from "swr";
-import { Event, getEvents } from "@models/Event";
+import { Event, useFetchEvents, eventFetcher, generateFetchParams } from "@models/Event";
 import { Post, getFeed } from "@models/Feed";
 import FrontPageView from "@views/FrontPage/FrontPageView";
 import PageWrapper from "@views/common/PageWrapper";

-const eventFetcher = () => getEvents({
+const eventOptions = {
  onlyNonPast: true,
  limit: 4,
-});
+}

 const feedFetcher = () => getFeed();

@@ -20,7 +20,7 @@ interface InitialProps {
 }

 const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useSWR("frontPageEvents", eventFetcher, { initialData: initialEvents });
+  const eventResult = useFetchEvents({ initialData: initialEvents, options: eventOptions });
  const feedResult = useSWR("feed", feedFetcher, { initialData: initialFeed });

  return (
@@ -29,17 +29,18 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
        <link rel="canonical" href="https://sik.ayy.fi/" />
      </Head>
      <PageWrapper>
-        <FrontPageView events={eventResult.data} feed={feedResult.data} />
+        <FrontPageView events={eventResult.data as Event[]} feed={feedResult.data} />
      </PageWrapper>
    </>
  )};

 export const getServerSideProps: GetServerSideProps<InitialProps> = async () => {
-  const initialEvents = await eventFetcher();
+  const { url, config } = generateFetchParams("", eventOptions);
+  const { data } = await eventFetcher(url, config);
  const initialFeed = await getFeed();
  return {
    props: {
-      initialEvents,
+      initialEvents: data,
      initialFeed,
    },
  };
@@ -1,6 +1,7 @@
 import React from "react";
 import { NextPage, GetServerSideProps } from "next";
 import Head from "next/head";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Event, getEvents } from "@models/Event";
 import { Post, getFeed } from "@models/Feed";
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import { NextPage } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { getForm, SignupForm } from "@models/SignupForm";
+import { createSignup, updateSignup, getSignupUUID, Signup } from "@models/Signup";
+import SignUpPageView from "@views/SignUpPage/SignUpPageView";
+import PageWrapper from "@views/common/PageWrapper";
+import noop from "@utils/noop";
+
+const parseQueryParams = (params: any) => {
+  let formId;
+  let signupId;
+  const uuid = params?.[2];
+
+  if (params?.[0] === "edit") {
+    signupId = params?.[1];
+  } else {
+    formId = params?.[0];
+  }
+
+
+  return {
+    formId,
+    signupId,
+    uuid
+  }
+}
+
+const SignUpPage: NextPage = () => {
+
+  const router = useRouter();
+  const { formId, signupId, uuid } = parseQueryParams(router.query.params);
+
+  const [signUpForm, setForm] = useState(null);
+  const [formData, setFormData] = useState({});
+  const [statusMessage, setStatus] = useState(null);
+
+  useEffect(() => {
+    const fetchSignUpForm = async (id: number): Promise<SignupForm> => {
+      const formPromise = getForm(id);
+      formPromise.then(form => {
+        setForm(form);
+      });
+      return formPromise;
+    }
+
+    const fetchSignUp = async (id: number, uuid: string): Promise<Signup> => {
+      const signupPromise = getSignupUUID(id, uuid);
+      signupPromise.then(signup => setFormData(signup.answer));
+      return signupPromise;
+    }
+
+    if (signupId) {
+      fetchSignUp(signupId, uuid).then(s => fetchSignUpForm(s.signupForm_id));
+    } else if (formId) {
+      fetchSignUpForm(formId)
+    }
+  }, [formId, signupId, uuid])
+
+  const onSubmit = async (data) => {
+    const payload: Signup = {
+      id: signupId ? Number(signupId): undefined,
+      signupForm_id: signUpForm.id,
+      answer: data.formData,
+    };
+
+    try {
+      if (uuid) {
+        const resp = await updateSignup(payload, uuid);
+        // fetchSignUpForm(signUpForm.id);
+        setFormData(resp);
+        setStatus("Sign-up submission updated successfully");
+      }
+      else {
+        const resp = await createSignup(payload);
+        // fetchSignUpForm(signUpForm.id);
+        setStatus("Sign-up submitted successfully");
+      }
+    } catch (error) {
+      console.error(error);
+      setStatus("Bad request");
+    }
+  }
+
+  return (
+    <>
+      <Head>
+        <link rel="canonical" href={`https://sik.ayy.fi/signup/${formId}`} />
+      </Head>
+      <PageWrapper>
+        <SignUpPageView
+          signUpForm={signUpForm}
+          formData={formData}
+          statusMessage={statusMessage}
+          onChange={noop}
+          onSubmit={onSubmit}
+        />
+      </PageWrapper>
+    </>
+  );
+}
+
+export default SignUpPage;
@@ -1,122 +0,0 @@
-import React from "react";
-import { Helmet } from "react-helmet";
-import { getForm, SignupForm } from "@models/SignupForm";
-import { createSignup, updateSignup, getSignupUUID, Signup } from "@models/Signup";
-import SignUpPageView from "@views/SignUpPage/SignUpPageView";
-import { RouteComponentProps } from "react-router-dom";
-
-interface MatchParams {
-  formId?: string;
-  signupId?: string;
-  uuid?: string;
-}
-
-type SignUpPageProps = RouteComponentProps<MatchParams>;
-
-interface SignUpPageState {
-  signUpForm?: SignupForm;
-  formData: any;
-  statusMessage?: string;
-  error?: string;
-}
-
-class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
-  constructor(props: SignUpPageProps) {
-    super(props);
-    this.state = {
-      signUpForm: null,
-      formData: {},
-      statusMessage: null,
-      error: null,
-    };
-    const { match } = this.props;
-    const { formId, signupId } = match.params;
-    if (signupId) {
-      this.fetchSignUp().then(s => this.fetchSignUpForm(s.signupForm_id))
-    } else {
-      this.fetchSignUpForm(Number(formId));
-    }
-  }
-
-  fetchSignUpForm = (formId: number): Promise<SignupForm> => {
-    const formPromise = getForm(formId);
-    formPromise.then(signUpForm => {
-      this.setState({
-        signUpForm,
-      });
-    });
-    return formPromise;
-  }
-
-  fetchSignUp = (): Promise<Signup> => {
-    const { match } = this.props;
-    const { signupId, uuid } = match.params;
-    const signupPromise = getSignupUUID(Number(signupId), uuid);
-    signupPromise.then(signup => this.setState({
-      formData: signup.answer
-    }))
-    return signupPromise;
-  }
-
-  onSubmit = async (data) => {
-    const { signUpForm } = this.state;
-    const { signupId, uuid } = this.props.match.params;
-    const payload: Signup = {
-      id: signupId ? Number(signupId): undefined,
-      signupForm_id: signUpForm.id,
-      answer: data.formData,
-    };
-
-    try {
-      if (uuid) {
-        const resp = await updateSignup(payload, uuid);
-        this.fetchSignUpForm(signUpForm.id);
-        this.setState({
-          formData: resp,
-          statusMessage: "Sign-up submission updated successfully.",
-        });
-      }
-      else {
-        const resp = await createSignup(payload);
-        this.fetchSignUpForm(signUpForm.id);
-        this.setState({
-          error: null,
-          statusMessage: "Sign-up submitted successfully",
-        });
-      }
-    } catch (error) {
-      console.error(error);
-      this.setState({
-        error,
-        statusMessage: "Bad request"
-      });
-    }
-  }
-
-  onChange = (data) => {
-    console.log(data);
-  }
-
-  render() {
-    const { match } = this.props;
-    const { formId } = match.params;
-    const { signUpForm, formData, statusMessage } = this.state;
-
-    return (
-      <>
-        <Helmet>
-          <link rel="canonical" href={`https://sik.ayy.fi/signup/${formId}`} />
-        </Helmet>
-        <SignUpPageView
-          signUpForm={signUpForm}
-          formData={formData}
-          statusMessage={statusMessage}
-          onChange={this.onChange}
-          onSubmit={this.onSubmit}
-        />
-      </>
-    );
-  }
-}
-
-export default SignUpPage;
@@ -19,7 +19,7 @@ import ContactsPage from "./pages/yhteystiedot";
 import SignupCreatePage from "./pages/admin/signups/create";
 import SignupEmailPage from "./pages/admin/signups/[id]/email";
 import SignupListPage from "./pages/admin/signups/[id]/list";
-import SignUpPage from "./pages/signup/[id]";
+import SignUpPage from "./pages/signup/[...params]";
 import ActualPage from "./pages/kilta/toiminta";
 import FreshmenPage from "./pages/kilta/fuksi";
 import HonoraryPage from "./pages/kilta/kunnia";