Merge branch 'refactor/models' into 'master'

Split model files into apis, hooks and models

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!40

package.json

@@ -67,9 +67,8 @@
     "date-fns": "2.18.0",
     "js-cookie": "2.2.1",
     "lodash": "4.17.21",
-    "next": "10.0.7",
+    "next": "10.0.8",
     "normalize.css": "8.0.1",
-    "query-string": "6.14.1",
     "react": "17.0.1",
     "react-beautiful-dnd": "13.0.0",
     "react-csv": "2.0.3",

src/api/eventApi.ts

@@ -0,0 +1,91 @@
+/* eslint-disable no-console */
+import axios from "axios";
+import Event from "@models/Event";
+import { getAuthHeader } from "@utils/auth";
+
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
+
+export interface Options {
+  onlyNonPast?: boolean;
+  limit?: number;
+  auth?: boolean;
+}
+
+class EventApi {
+  static async getEvent(id: number, auth = false): Promise<Event> {
+    try {
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${URL}${id}/`, {
+        headers,
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getEvents(options: Options = {}): Promise<Event[]> {
+    const { onlyNonPast, limit, auth } = options;
+    try {
+      const params = {
+        since: onlyNonPast ? (new Date()).toISOString() : undefined,
+        limit,
+      };
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${URL}`, {
+        headers,
+        params,
+      });
+      return resp.data.results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createEvent(data: Event): Promise<Event> {
+    try {
+      const resp = await axios.post(URL, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updateEvent(data: Event): Promise<Event> {
+    try {
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async deleteEvent(id: number) {
+    try {
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}
+
+export default EventApi;

src/api/feedApi.ts

@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+import axios from "axios";
+import Post from "@models/Feed";
+import { getAuthHeader } from "@utils/auth";
+
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/feed/`;
+
+export interface Options {
+  auth?: boolean;
+}
+
+class FeedApi {
+  static async getFeed(options: Options = {}): Promise<Post[]> {
+    const { auth } = options;
+    const headers = auth ? { Authorization: getAuthHeader() } : null;
+    try {
+      const resp = await axios.get(URL, { headers });
+      return resp.data.results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getPost(id: number, options: Options = {}): Promise<Post> {
+    const { auth } = options;
+    const headers = auth ? { Authorization: getAuthHeader() } : null;
+    try {
+      const resp = await axios.get(`${URL}${id}/`, { headers });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createPost(data: Post): Promise<Post> {
+    try {
+      const resp = await axios.post(URL, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updatePost(data: Post): Promise<Post> {
+    try {
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}
+
+export default FeedApi;

src/api/jobAdApi.ts

@@ -0,0 +1,77 @@
+/* eslint-disable no-console */
+import axios from "axios";
+import JobAd from "@models/JobAd";
+import { getAuthHeader } from "@utils/auth";
+
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/jobads/`;
+
+export interface Options {
+  onlyNonPast?: boolean;
+  limit?: number;
+  auth?: boolean;
+}
+
+class JobAdApi {
+  static async getJobAds(options: Options = {}): Promise<JobAd[]> {
+    const { onlyNonPast, limit, auth } = options;
+    try {
+      const params = {
+        since: onlyNonPast ? (new Date()).toISOString() : undefined,
+        limit,
+      };
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${URL}`, {
+        headers,
+        params,
+      });
+      return resp.data.results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getJobAd(id: number, auth = false): Promise<JobAd> {
+    try {
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${URL}${id}/`, {
+        headers,
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createJobAd(data: JobAd): Promise<JobAd> {
+    try {
+      const resp = await axios.post(URL, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updateJobAd(data: JobAd): Promise<JobAd> {
+    try {
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}
+
+export default JobAdApi;

src/api/signupApi.ts

@@ -0,0 +1,181 @@
+/* eslint-disable no-console */
+import axios from "axios";
+import { Signup, SignupForm } from "@models/Signup";
+import { getAuthHeader } from "@utils/auth";
+
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/signup/`;
+export const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
+
+export interface Options {
+  onlyNonPast?: boolean;
+  limit?: number;
+  auth?: boolean;
+}
+
+class SignupApi {
+  static async getSignup(id: number): Promise<Signup> {
+    try {
+      const resp = await axios.get(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createSignup(data: Signup): Promise<Signup> {
+    try {
+      const resp = await axios.post(URL, data);
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updateSignup(data: Signup, uuid: string): Promise<Signup> {
+    try {
+      const { id } = data;
+      if (!id) throw new Error("SignupId required!");
+      const resp = await axios.put(`${URL}${id}/edit/`, data, {
+        params: { uuid },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getSignupUUID(id: number, uuid: string): Promise<Signup> {
+    try {
+      const resp = await axios.get(`${URL}${id}/edit/`, {
+        params: {
+          uuid,
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async deleteSignup(id: number) {
+    try {
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getForms(auth = false): Promise<SignupForm[]> {
+    try {
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(FORM_URL, {
+        headers,
+      });
+      const { results } = resp.data;
+      return results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getForm(id: number, auth = false): Promise<SignupForm> {
+    try {
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${FORM_URL}${id}/`, {
+        headers,
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createForm(data: SignupForm): Promise<SignupForm> {
+    try {
+      const resp = await axios.post(FORM_URL, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updateForm(data: SignupForm): Promise<SignupForm> {
+    try {
+      const putUrl = `${FORM_URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async deleteForm(id: number) {
+    try {
+      const resp = await axios.delete(`${FORM_URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async signupFormSendEmail(data: any, id: number): Promise<any> {
+    try {
+      const resp = await axios.post(`${FORM_URL}${id}/sendemail/`, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getSignups(id: number): Promise<Signup[]> {
+    try {
+      const resp = await axios.get(`${FORM_URL}${id}/signups/`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}
+
+export default SignupApi;

src/api/tagApi.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-console */
+import axios from "axios";
+import Tag from "@models/Tag";
+
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/tags/`;
+
+export interface Options {
+  onlyNonPast?: boolean;
+  limit?: number;
+  auth?: boolean;
+}
+
+class TagApi {
+  static async getTags(): Promise<Tag[]> {
+    try {
+      const resp = await axios.get(URL);
+      return resp.data.results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+}
+
+export default TagApi;

src/components/Icon.tsx

@@ -12,7 +12,7 @@ export enum IconType {
 interface IconProps {
   name: IconType;
   link?: string;
-  onClick?: (event?: any) => void;
+  onClick?: React.MouseEventHandler<HTMLSpanElement>;
 }
 
 const nameToIcon = (name: IconType): JSX.Element | string => {

src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx

@@ -10,7 +10,7 @@ interface OptionsWidgetProps {
 }
 
 class OptionsWidget extends React.Component<OptionsWidgetProps> {
-  handleListOptionsChange = (questions: Question[], index: number) => (event) => {
+  handleListOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
     const lst = val.split(",").map((p) => p.trimLeft());
@@ -19,15 +19,15 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     onChange(questions);
   };
 
-  handleTextOptionsChange = (questions: Question[], index: number) => (event) => {
+  handleTextOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
     // eslint-disable-next-line no-param-reassign
-    questions[index].options = val;
+    questions[index].options = val as unknown as string[]; // TODO: Check type
     onChange(questions);
   };
 
-  handleIntegerOptionsChange = (questions: Question[], index: number) => (event) => {
+  handleIntegerOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
     if (val !== "") {
@@ -43,7 +43,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     onChange(questions);
   };
 
-  handleRequiredChange = (questions: Question[], index: number) => (event) => {
+  handleRequiredChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val: boolean = event.target.checked;
     console.log(val);

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import styled from "styled-components";
 import { Draggable } from "react-beautiful-dnd";
 import { colors } from "@theme/colors";
@@ -17,8 +17,8 @@ const WidgetRow = styled.div`
 
 interface QuestionListProps {
   questions: Question[];
-  innerRef: any;
-  placeholder: any;
+  innerRef: React.Ref<HTMLDivElement>;
+  placeholder: ReactNode;
   onChange: (value: Question[]) => void;
 }
 

src/hooks/useFetchEvents.ts

@@ -0,0 +1,44 @@
+import useSWR from "swr";
+import axios, { AxiosRequestConfig } from "axios";
+import Event from "@models/Event";
+import { getAuthHeader } from "@utils/auth";
+import { URL, Options } from "@api/eventApi";
+
+const fetcher = (url: string, config: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
+
+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
+}
+
+const useFetchEvents = ({
+  initialData,
+  id = "",
+  options = {},
+}: FetchArguments) => {
+  const { url, config } = generateFetchParams(id, options);
+  const { data, error } = useSWR([url, config], fetcher, { initialData });
+  return {
+    data: data?.results || data,
+    error,
+  };
+};
+
+export default useFetchEvents;

src/hooks/useFetchFeed.ts

@@ -0,0 +1,40 @@
+import useSWR from "swr";
+import axios, { AxiosRequestConfig } from "axios";
+import Post from "@models/Feed";
+import { getAuthHeader } from "@utils/auth";
+import { URL, Options } from "@api/feedApi";
+
+const feedFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
+
+const generateFetchParams = (id = "", options: Options = {}) => {
+  const url = `${URL}${id}`;
+  const { auth } = options;
+
+  return {
+    url,
+    config: {
+      headers: auth ? { Authorization: getAuthHeader() } : null,
+    },
+  };
+};
+
+interface FetchArguments {
+  initialData?: Post | Post[],
+  id?: string;
+  options?: Options
+}
+
+const useFetchFeed = ({
+  initialData,
+  id = "",
+  options = {},
+}: FetchArguments) => {
+  const { url, config } = generateFetchParams(id, options);
+  const { data, error } = useSWR([url, config], feedFetcher, { initialData });
+  return {
+    data: data?.results || data,
+    error,
+  };
+};
+
+export default useFetchFeed;

src/hooks/useFetchJobAds.ts

@@ -0,0 +1,40 @@
+import axios, { AxiosRequestConfig } from "axios";
+import useSWR from "swr";
+import JobAd from "@models/JobAd";
+import { getAuthHeader } from "@utils/auth";
+import { URL, Options } from "@api/jobAdApi";
+
+const jobAdFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
+
+const generateFetchParams = (id = "", options: Options = {}) => {
+  const url = `${URL}${id}`;
+  const { auth } = options;
+
+  return {
+    url,
+    config: {
+      headers: auth ? { Authorization: getAuthHeader() } : null,
+    },
+  };
+};
+
+interface FetchArguments {
+  initialData?: JobAd | JobAd[],
+  id?: string;
+  options?: Options;
+}
+
+const useFetchJobAds = ({
+  initialData,
+  id = "",
+  options = {},
+}: FetchArguments) => {
+  const { url, config } = generateFetchParams(id, options);
+  const { data, error } = useSWR([url, config], jobAdFetcher, { initialData });
+  return {
+    data: data?.results || data,
+    error,
+  };
+};
+
+export default useFetchJobAds;

src/models/Event.ts

@@ -1,13 +1,7 @@
-import axios, { AxiosRequestConfig } from "axios";
-import useSWR from "swr";
-import qs from "query-string";
-import { getAuthHeader } from "@utils/auth";
-import { Tag } from "./Tag";
-import { SignupForm } from "./SignupForm";
+import Tag from "./Tag";
+import { SignupForm } from "./Signup";
 
-const URL = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
-
-export interface Event {
+interface Event {
   id: number;
   title_fi: string;
   title_en: string;
@@ -25,120 +19,4 @@ export interface Event {
   signupForm: SignupForm[];
 }
 
-interface Options {
-  onlyNonPast?: boolean;
-  limit?: number;
-  auth?: boolean;
-}
-
-export async function getEvents(options: Options = {}): Promise<Event[]> {
-  const { onlyNonPast, limit, auth } = options;
-  try {
-    const params = {
-      since: onlyNonPast ? (new Date()).toISOString() : undefined,
-      limit,
-    };
-    const search = qs.stringify(params);
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(`${URL}?${search}`, {
-      headers,
-    });
-    return resp.data.results;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function getEvent(id: number, auth = false): Promise<Event> {
-  try {
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(`${URL}${id}/`, {
-      headers,
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function createEvent(data): Promise<Event> {
-  try {
-    const resp = await axios.post(URL, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function updateEvent(data): Promise<Event> {
-  try {
-    const putUrl = `${URL}${data.id}/`;
-    const resp = await axios.put(putUrl, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function deleteEvent(id: number) {
-  try {
-    const resp = await axios.delete(`${URL}${id}`, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export const eventFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-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 || data,
-    error,
-  };
-};
+export default Event;

src/models/Feed.ts

@@ -1,11 +1,6 @@
-import axios, { AxiosRequestConfig } from "axios";
-import useSWR from "swr";
-import { getAuthHeader } from "@utils/auth";
-import { Tag } from "./Tag";
+import Tag from "./Tag";
 
-const URL = `${process.env.NEXT_PUBLIC_API_URL}/feed/`;
-
-export interface Post {
+interface Post {
   id: number;
   tags: Tag[];
   visible: boolean;
@@ -21,92 +16,4 @@ export interface Post {
   autohide_enabled: boolean;
 }
 
-interface Options {
-  auth?: boolean;
-}
-
-export async function getFeed(options: Options = {}): Promise<Post[]> {
-  const { auth } = options;
-  const headers = auth ? { Authorization: getAuthHeader() } : null;
-  try {
-    const resp = await axios.get(URL, { headers });
-    return resp.data.results;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function getPost(id: number, options: Options = {}): Promise<Post> {
-  const { auth } = options;
-  const headers = auth ? { Authorization: getAuthHeader() } : null;
-  try {
-    const resp = await axios.get(`${URL}${id}/`, { headers });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function createPost(data): Promise<Post> {
-  try {
-    const resp = await axios.post(URL, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function updatePost(data): Promise<Post> {
-  try {
-    const putUrl = `${URL}${data.id}/`;
-    const resp = await axios.put(putUrl, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export const feedFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-export const generateFetchParams = (id = "", options: Options = {}) => {
-  const url = `${URL}${id}`;
-  const { auth } = options;
-
-  return {
-    url,
-    config: {
-      headers: auth ? { Authorization: getAuthHeader() } : null,
-    },
-  };
-};
-
-interface FetchArguments {
-  initialData?: Post | Post[],
-  id?: string;
-  options?: Options
-}
-
-export const useFetchFeed = ({
-  initialData,
-  id = "",
-  options = {},
-}: FetchArguments) => {
-  const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], feedFetcher, { initialData });
-  return {
-    data: data?.results || data,
-    error,
-  };
-};
+export default Post;

src/models/JobAd.ts

@@ -1,11 +1,4 @@
-import axios, { AxiosRequestConfig } from "axios";
-import useSWR from "swr";
-import qs from "query-string";
-import { getAuthHeader } from "@utils/auth";
-
-const URL = `${process.env.NEXT_PUBLIC_API_URL}/jobads/`;
-
-export interface JobAd {
+interface JobAd {
   id: number;
   title_fi: string;
   title_en: string;
@@ -17,106 +10,4 @@ export interface JobAd {
   autohide_enabled: boolean;
 }
 
-export interface GetJobAdsOptions {
-  onlyNonPast?: boolean;
-  limit?: number;
-  auth?: boolean;
-}
-
-export const getJobAds = async (options: GetJobAdsOptions = {}): Promise<JobAd[]> => {
-  const { onlyNonPast, limit, auth } = options;
-  try {
-    const params = {
-      since: onlyNonPast ? (new Date()).toISOString() : undefined,
-      limit,
-    };
-    const search = qs.stringify(params);
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(`${URL}?${search}`, {
-      headers,
-    });
-    return resp.data.results;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const getJobAd = async (id: number, auth = false): Promise<JobAd> => {
-  try {
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(`${URL}${id}/`, {
-      headers,
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const createJobAd = async (data: any): Promise<JobAd> => {
-  try {
-    const resp = await axios.post(URL, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const updateJobAd = async (data: any): Promise<JobAd> => {
-  try {
-    const putUrl = `${URL}${data.id}/`;
-    const resp = await axios.put(putUrl, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const jobAdFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-export const generateFetchParams = (id = "", options: Options = {}) => {
-  const url = `${URL}${id}`;
-  const { auth } = options;
-
-  return {
-    url,
-    config: {
-      headers: auth ? { Authorization: getAuthHeader() } : null,
-    },
-  };
-};
-
-interface Options {
-  auth?: boolean;
-}
-
-interface FetchArguments {
-  initialData?: JobAd | JobAd[],
-  id?: string;
-  options?: Options;
-}
-
-export const useFetchJobAds = ({
-  initialData,
-  id = "",
-  options = {},
-}: FetchArguments) => {
-  const { url, config } = generateFetchParams(id, options);
-  const { data, error } = useSWR([url, config], jobAdFetcher, { initialData });
-  return {
-    data: data?.results || data,
-    error,
-  };
-};
+export default JobAd;

src/models/Signup.ts

@@ -1,7 +1,4 @@
-import axios from "axios";
-import { getAuthHeader } from "@utils/auth";
-
-const url = `${process.env.NEXT_PUBLIC_API_URL}/signup/`;
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
   id?: number;
@@ -9,68 +6,21 @@ export interface Signup {
   answer: string;
 }
 
-export const getSignup = async (id: number): Promise<Signup> => {
-  try {
-    const resp = await axios.get(`${url}${id}`, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const createSignup = async (data: Signup): Promise<Signup> => {
-  try {
-    const resp = await axios.post(url, data);
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const updateSignup = async (data: Signup, uuid: string): Promise<Signup> => {
-  try {
-    const { id } = data;
-    if (!id) throw new Error("SignupId required!");
-    const resp = await axios.put(`${url}${id}/edit/`, data, {
-      params: { uuid },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const getSignupUUID = async (id: number, uuid: string): Promise<Signup> => {
-  try {
-    const resp = await axios.get(`${url}${id}/edit/`, {
-      params: {
-        uuid,
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const deleteSignup = async (id: number) => {
-  try {
-    const resp = await axios.delete(`${url}${id}`, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
+export interface SignupForm {
+  id?: number;
+  title_fi: string;
+  title_en: string;
+  visible: boolean;
+  start_time: string;
+  end_time: string;
+  questions: Question[];
+  signups: string[];
+  quota: number;
+  schema: {
+    title?: string;
+    type: string;
+    required: string[];
+    properties: any;
+    minProperties?: number;
+  };
+}

src/models/SignupForm.ts

@@ -1,123 +0,0 @@
-import axios from "axios";
-import { getAuthHeader } from "@utils/auth";
-import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
-import { Signup } from "./Signup";
-
-const URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
-
-export interface SignupForm {
-  id?: number;
-  title_fi: string;
-  title_en: string;
-  visible: boolean;
-  start_time: string;
-  end_time: string;
-  questions: Question[];
-  signups: string[];
-  quota: number;
-  schema: {
-    title?: string;
-    type: string;
-    required: string[];
-    properties: any;
-    minProperties?: number;
-  };
-}
-
-export async function getForms(auth = false): Promise<SignupForm[]> {
-  try {
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(URL, {
-      headers,
-    });
-    const { results } = resp.data;
-    return results;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function getForm(id: number, auth = false): Promise<SignupForm> {
-  try {
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    const resp = await axios.get(`${URL}${id}/`, {
-      headers,
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function createForm(data): Promise<SignupForm> {
-  try {
-    const resp = await axios.post(URL, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function updateForm(data): Promise<SignupForm> {
-  try {
-    const putUrl = `${URL}${data.id}/`;
-    const resp = await axios.put(putUrl, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function deleteForm(id: number) {
-  try {
-    const resp = await axios.delete(`${URL}${id}`, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export const signupFormSendEmail = async (data, id): Promise<any> => {
-  try {
-    const resp = await axios.post(`${URL}${id}/sendemail/`, data, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-export const getSignups = async (id): Promise<Signup[]> => {
-  try {
-    const resp = await axios.get(`${URL}${id}/signups/`, {
-      headers: {
-        Authorization: getAuthHeader(),
-      },
-    });
-    return resp.data;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};

src/models/Tag.ts

@@ -1,8 +1,4 @@
-import axios from "axios";
-
-const url = `${process.env.NEXT_PUBLIC_API_URL}/tags/`;
-
-export interface Tag {
+interface Tag {
   id: number;
   name_fi: string;
   name_en: string;
@@ -10,12 +6,4 @@ export interface Tag {
   icon: string;
 }
 
-export async function getTags(): Promise<Tag[]> {
-  try {
-    const resp = await axios.get(url);
-    return resp.data.results;
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
+export default Tag;

src/pages/admin/events/[id].tsx

@@ -3,11 +3,12 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import { Tag, getTags } from "@models/Tag";
-import { SignupForm, getForms } from "@models/SignupForm";
-import {
-  Event, createEvent, getEvent, updateEvent,
-} from "@models/Event";
+import Tag from "@models/Tag";
+import TagApi from "@api/tagApi";
+import { SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SectionDividerWidget from "@components/Widgets/SectionDividerWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
@@ -177,17 +178,17 @@ const EventCreatePage: NextPage = () => {
   }
 
   useEffect(() => {
-    getTags()
+    TagApi.getTags()
       .then((res) => setTags(res))
       .catch((err) => setError(err));
 
-    getForms(true)
+    SignupApi.getForms(true)
       .then((res) => setSignupForms(res))
       .catch((err) => setError(err));
 
     const eventId = id && Number(id);
     if (eventId !== undefined) {
-      getEvent(eventId, true)
+      EventApi.getEvent(eventId, true)
         .then((res) => setFormData({
           ...res,
           tags: (res.tags).map((inst) => inst.id) as any,
@@ -197,7 +198,7 @@ const EventCreatePage: NextPage = () => {
     }
   }, [id]);
 
-  const onSubmit = async (data) => {
+  const onSubmit = async (data: any) => {
     try {
       const payload = data.formData;
       payload.signup_id = payload.signupForm;
@@ -205,7 +206,7 @@ const EventCreatePage: NextPage = () => {
       if (typeof payload.image === "string" && payload.image.startsWith("http")) payload.image = undefined;
 
       if (payload.id === undefined) {
-        const resp = await createEvent(payload);
+        const resp = await EventApi.createEvent(payload);
         // TODO: Backend return old data because of Prefetch (used for filtering invisble signupForms from GET)
         // Copy from old state instead...
         // resp.tags = (resp.tags as any).map(inst => inst.id);
@@ -215,7 +216,7 @@ const EventCreatePage: NextPage = () => {
         setStatusMessage("Event created successfully");
         setFormData(resp);
       } else {
-        const resp = await updateEvent(payload);
+        const resp = await EventApi.updateEvent(payload);
         // TODO: Backend return old data because of Prefetch (used for filtering invisble signupForms from GET)
         // Copy from old state instead...
         // resp.tags = (resp.tags as any).map(inst => inst.id);
@@ -230,7 +231,7 @@ const EventCreatePage: NextPage = () => {
     }
   };
 
-  const onChange = (data) => setFormData(data.formData);
+  const onChange = (data: any) => setFormData(data.formData);
   const onFocus = () => setStatusMessage(null);
   const title = formData?.id
     ? `Edit Event "${formData.title_fi}"`

src/pages/admin/events/index.tsx

@@ -5,7 +5,8 @@ import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
-import { Event, getEvents } from "@models/Event";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
 
 const URL = "/admin/events";
 
@@ -39,7 +40,7 @@ const AdminEventPage: NextPage = () => {
   const [events, setEvents] = useState<Event[]>(null);
 
   useEffect(() => {
-    getEvents({ auth: true })
+    EventApi.getEvents({ auth: true })
       .then((res) => setEvents(res));
   }, []);
 

src/pages/admin/feed/[id].tsx

@@ -3,10 +3,10 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import { Tag, getTags } from "@models/Tag";
-import {
-  Post, createPost, getPost, updatePost,
-} from "@models/Feed";
+import Tag from "@models/Tag";
+import TagApi from "@api/tagApi";
+import Post from "@models/Feed";
+import FeedApi from "@api/feedApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SectionDividerWidget from "@components/Widgets/SectionDividerWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
@@ -145,13 +145,13 @@ const FeedCreatePage: NextPage = () => {
   }
 
   useEffect(() => {
-    getTags()
+    TagApi.getTags()
       .then((res) => setTags(res))
       .catch((err) => setError(err));
 
     const feedId = id && Number(id);
     if (feedId !== undefined) {
-      getPost(feedId, { auth: true })
+      FeedApi.getPost(feedId, { auth: true })
         .then((res) => setFormData({
           ...res,
           tags: (res.tags).map((inst) => inst.id) as any,
@@ -166,12 +166,12 @@ const FeedCreatePage: NextPage = () => {
       payload.tag_id = payload.tags;
       payload.autohide = payload.autohide || new Date();
       if (payload.id === undefined) {
-        const resp = await createPost(payload);
+        const resp = await FeedApi.createPost(payload);
         // resp.tags = resp.tags;
         setStatusMessage("Post created successfully");
         setFormData(resp);
       } else {
-        const resp = await updatePost(payload);
+        const resp = await FeedApi.updatePost(payload);
         // resp.tags = resp.tag_id;
         setStatusMessage("Post updated successfully");
         setFormData(resp);

src/pages/admin/feed/index.tsx

@@ -5,7 +5,8 @@ import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
-import { Post, getFeed } from "@models/Feed";
+import Post from "@models/Feed";
+import FeedApi from "@api/feedApi";
 
 const URL = "/admin/feed";
 
@@ -40,7 +41,7 @@ const AdminFeedPage: NextPage = () => {
   const [forms, setForms] = useState<Post[]>(null);
 
   useEffect(() => {
-    getFeed({ auth: true })
+    FeedApi.getFeed({ auth: true })
       .then((res) => setForms(res));
   }, []);
 

src/pages/admin/jobads/[id].tsx

@@ -3,9 +3,8 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import {
-  JobAd, getJobAd, createJobAd, updateJobAd,
-} from "@models/JobAd";
+import JobAd from "@models/JobAd";
+import JobAdApi from "@api/jobAdApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SectionDividerWidget from "@components/Widgets/SectionDividerWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
@@ -123,7 +122,7 @@ const JobAdCreatePage: NextPage = () => {
   useEffect(() => {
     const jobId = id && Number(id);
     if (jobId !== undefined) {
-      getJobAd(jobId, true)
+      JobAdApi.getJobAd(jobId, true)
         .then((res) => setFormData(res))
         .catch((err) => setError(err));
     }
@@ -133,11 +132,11 @@ const JobAdCreatePage: NextPage = () => {
     try {
       const payload = data.formData;
       if (payload.id === undefined) {
-        const resp = await createJobAd(payload);
+        const resp = await JobAdApi.createJobAd(payload);
         setStatusMessage("Post created successfully");
         setFormData(resp);
       } else {
-        const resp = await updateJobAd(payload);
+        const resp = await JobAdApi.updateJobAd(payload);
         setStatusMessage("Post updated successfully");
         setFormData(resp);
       }

src/pages/admin/jobads/index.tsx

@@ -5,7 +5,8 @@ import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
-import { JobAd, getJobAds } from "@models/JobAd";
+import JobAd from "@models/JobAd";
+import JobAdApi from "@api/jobAdApi";
 
 const URL = "/admin/jobads";
 
@@ -44,7 +45,7 @@ const AdminJobAdPage: NextPage = () => {
   const [jobAds, setAds] = useState<JobAd[]>(null);
 
   useEffect(() => {
-    getJobAds({ auth: true })
+    JobAdApi.getJobAds({ auth: true })
       .then((res) => setAds(res));
   }, []);
 

src/pages/admin/signups/[id].tsx

@@ -3,9 +3,8 @@ import { NextPage } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import {
-  SignupForm, createForm, getForm, updateForm,
-} from "@models/SignupForm";
+import { SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
@@ -113,7 +112,7 @@ const SignupCreatePage: NextPage = () => {
   useEffect(() => {
     const suId = id && Number(id);
     if (suId !== undefined) {
-      getForm(suId, true)
+      SignupApi.getForm(suId, true)
         .then((res) => {
           setFormData({
             ...res,
@@ -134,14 +133,14 @@ const SignupCreatePage: NextPage = () => {
       };
 
       if (payload.id === undefined) {
-        const resp = await createForm(payload);
+        const resp = await SignupApi.createForm(payload);
         setStatusMessage("Sign-up created successfully");
         setFormData({
           ...resp,
           questions: JSON.stringify(resp.questions) as any,
         });
       } else {
-        const resp = await updateForm(payload);
+        const resp = await SignupApi.updateForm(payload);
         setStatusMessage("Sign-up updated successfully");
         setFormData({
           ...resp,

src/pages/admin/signups/[id]/email.tsx

@@ -3,7 +3,8 @@ import { NextPage } from "next";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
-import { SignupForm, getForm, signupFormSendEmail } from "@models/SignupForm";
+import { SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 
 const widgets = {
   markdownEditor: MarkdownEditorWidget,
@@ -52,7 +53,7 @@ const SignupEmailPage: NextPage = () => {
   useEffect(() => {
     const formId = Number(id);
     if (formId !== undefined) {
-      getForm(formId, true)
+      SignupApi.getForm(formId, true)
         .then((res) => setSignupForm(res));
     }
   }, [id]);
@@ -63,7 +64,7 @@ const SignupEmailPage: NextPage = () => {
   const onSubmit = async (data) => {
     try {
       const payload = data.formData;
-      await signupFormSendEmail(payload, id);
+      await SignupApi.signupFormSendEmail(payload, Number(id));
       setStatusMessage("Email sent successfully");
     } catch (err) {
       setError(err);

src/pages/admin/signups/[id]/list.tsx

@@ -4,13 +4,13 @@ import { useRouter } from "next/router";
 import styled from "styled-components";
 import { CSVLink } from "react-csv";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import { SignupForm, getForm, getSignups } from "@models/SignupForm";
-import { Signup, deleteSignup } from "@models/Signup";
+import { Signup, SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 import { Button } from "@components/index";
 import noop from "@utils/noop";
 
-const StyledButton = styled(Button) <{ colorOverride: "red" | "green" }>`
-  background-color: ${(p: any) => p.colorOverride};
+const StyledButton = styled(Button) <{ $colorOverride: "red" | "green" }>`
+  background-color: ${(p) => p.$colorOverride};
 `;
 
 const SignupEmailPage: NextPage = () => {
@@ -22,16 +22,16 @@ const SignupEmailPage: NextPage = () => {
 
   useEffect(() => {
     const formId = Number(id);
-    getForm(formId, true)
+    SignupApi.getForm(formId, true)
       .then((res) => setSignupForm(res));
 
-    getSignups(formId).then((res) => setSignups(res));
+    SignupApi.getSignups(formId).then((res) => setSignups(res));
   }, [id]);
 
   const confirmDelete = async (signup: Signup, question: any) => {
     if (window.confirm(`Delete: ${signup.id}: ${signup.answer[question.id]}; Are you sure?`) === true) {
       try {
-        await deleteSignup(signup.id);
+        await SignupApi.deleteSignup(signup.id);
         setSignups(signups.filter((s) => s.id !== signup.id));
       } catch (err) {
         window.alert("Delete failed!");
@@ -64,7 +64,7 @@ const SignupEmailPage: NextPage = () => {
             ))}
             <th>
               <CSVLink data={CSVData} headers={questions.map((q) => q.title)} separator=";">
-                <StyledButton colorOverride="green" buttonStyle="filled" onClick={noop}>
+                <StyledButton $colorOverride="green" buttonStyle="filled" onClick={noop}>
                   Download CSV
                 </StyledButton>
               </CSVLink>
@@ -81,7 +81,7 @@ const SignupEmailPage: NextPage = () => {
                 </td>
               ))}
               <td>
-                <StyledButton colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(s, questions[0])}>
+                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(s, questions[0])}>
                   Delete
                 </StyledButton>
               </td>

src/pages/admin/signups/index.tsx

@@ -5,7 +5,8 @@ import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
 import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
-import { SignupForm, getForms } from "@models/SignupForm";
+import { SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 
 const URL = "/admin/signups";
 
@@ -44,7 +45,7 @@ const AdminSignupPage: NextPage = () => {
   const [forms, setForms] = useState<SignupForm[]>(null);
 
   useEffect(() => {
-    getForms(true)
+    SignupApi.getForms(true)
       .then((res) => setForms(res));
   }, []);
 

src/pages/events/[id].tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { NextPage, GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import {
-  Event, useFetchEvents, eventFetcher, generateFetchParams,
-} from "@models/Event";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
+import useFetchEvents from "@hooks/useFetchEvents";
 import EventPageView from "@views/EventPage/EventPageView";
 import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
@@ -35,9 +35,8 @@ const EventPage: NextPage<InitialProps> = ({ initialEvent }) => {
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const { url, config } = generateFetchParams();
-  const allEvents = await eventFetcher(url, config);
-  const paths = allEvents.results.map((e: Event) => ({
+  const allEvents = await EventApi.getEvents();
+  const paths = allEvents.map((e: Event) => ({
     params: {
       id: String(e.id),
     },
@@ -51,8 +50,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
   const { id } = params;
-  const { url, config } = generateFetchParams(id as string);
-  const initialEvent = await eventFetcher(url, config);
+  const initialEvent = await EventApi.getEvent(Number(id));
   return {
     props: {
       initialEvent,

src/pages/in_english.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
-import {
-  Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
-} from "@models/Event";
-import {
-  Post, useFetchFeed, feedFetcher, generateFetchParams as feedParams,
-} from "@models/Feed";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
+import useFetchEvents from "@hooks/useFetchEvents";
+import Post from "@models/Feed";
+import FeedApi from "@api/feedApi";
+import useFetchFeed from "@hooks/useFetchFeed";
 import InEnglishPageView from "@views/InEnglishPage/InEnglishPageView";
 import PageWrapper from "@views/common/PageWrapper";
 
@@ -37,12 +37,8 @@ const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) =
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  let url: string;
-  let config: any;
-  ({ url, config } = eventParams("", eventOptions));
-  const initialEvents = await eventFetcher(url, config);
-  ({ url, config } = feedParams(""));
-  const initialFeed = await feedFetcher(url, config);
+  const initialEvents = await EventApi.getEvents(eventOptions);
+  const initialFeed = await FeedApi.getFeed();
   return {
     props: {
       initialEvents,

src/pages/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
-import {
-  Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
-} from "@models/Event";
-import {
-  Post, useFetchFeed, feedFetcher, generateFetchParams as feedParams,
-} from "@models/Feed";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
+import useFetchEvents from "@hooks/useFetchEvents";
+import Post from "@models/Feed";
+import FeedApi from "@api/feedApi";
+import useFetchFeed from "@hooks/useFetchFeed";
 import FrontPageView from "@views/FrontPage/FrontPageView";
 import PageWrapper from "@views/common/PageWrapper";
 
@@ -37,12 +37,8 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  let url: string;
-  let config: any;
-  ({ url, config } = eventParams("", eventOptions));
-  const initialEvents = await eventFetcher(url, config);
-  ({ url, config } = feedParams(""));
-  const initialFeed = await feedFetcher(url, config);
+  const initialEvents = await EventApi.getEvents(eventOptions);
+  const initialFeed = await FeedApi.getFeed();
   return {
     props: {
       initialEvents,

src/pages/kilta/toiminta.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
-import {
-  Event, useFetchEvents, eventFetcher, generateFetchParams as eventParams,
-} from "@models/Event";
-import {
-  Post, useFetchFeed, feedFetcher, generateFetchParams as feedParams,
-} from "@models/Feed";
+import Event from "@models/Event";
+import EventApi from "@api/eventApi";
+import useFetchEvents from "@hooks/useFetchEvents";
+import Post from "@models/Feed";
+import FeedApi from "@api/feedApi";
+import useFetchFeed from "@hooks/useFetchFeed";
 import ActualPageView from "@views/ActualPage/ActualPageView";
 import PageWrapper from "@views/common/PageWrapper";
 
@@ -36,12 +36,8 @@ const ActualPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  let url: string;
-  let config: any;
-  ({ url, config } = eventParams("", eventOptions));
-  const initialEvents = await eventFetcher(url, config);
-  ({ url, config } = feedParams(""));
-  const initialFeed = await feedFetcher(url, config);
+  const initialEvents = await EventApi.getEvents(eventOptions);
+  const initialFeed = await FeedApi.getFeed();
   return {
     props: {
       initialEvents,

src/pages/signup/[id].tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { NextPage, GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { getForm, SignupForm, getForms } from "@models/SignupForm";
-import { createSignup, Signup } from "@models/Signup";
+import { Signup, SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 import SignUpPageView from "@views/SignUpPage/SignUpPageView";
 import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
@@ -28,7 +28,7 @@ const SignUpPage: NextPage<InitialProps> = ({ form }) => {
     };
 
     try {
-      await createSignup(payload);
+      await SignupApi.createSignup(payload);
       // TODO: Fetch/update signup list, so user sees the signup in the list
       setStatus("Sign-up submitted successfully");
     } catch (error) {
@@ -56,7 +56,7 @@ const SignUpPage: NextPage<InitialProps> = ({ form }) => {
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const allForms = await getForms();
+  const allForms = await SignupApi.getForms();
   const paths = allForms.map((e: SignupForm) => ({
     params: {
       id: String(e.id),
@@ -71,7 +71,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
   const { id } = params;
-  const form = await getForm(Number(id));
+  const form = await SignupApi.getForm(Number(id));
   return {
     props: {
       form,

src/pages/signup/edit/[id]/[uuid].tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { getForm, SignupForm } from "@models/SignupForm";
-import { updateSignup, getSignupUUID, Signup } from "@models/Signup";
+import { Signup, SignupForm } from "@models/Signup";
+import SignupApi from "@api/signupApi";
 import SignUpPageView from "@views/SignUpPage/SignUpPageView";
 import PageWrapper from "@views/common/PageWrapper";
 import noop from "@utils/noop";
@@ -30,7 +30,7 @@ const EditSignUpPage: NextPage = () => {
 
   useEffect(() => {
     const fetchSignUpForm = async (id: number): Promise<SignupForm> => {
-      const formPromise = getForm(id);
+      const formPromise = SignupApi.getForm(id);
       formPromise.then((form) => {
         setForm(form);
       });
@@ -38,7 +38,7 @@ const EditSignUpPage: NextPage = () => {
     };
 
     const fetchSignUp = async (id: number, uniqueId: string): Promise<Signup> => {
-      const signupPromise = getSignupUUID(id, uniqueId);
+      const signupPromise = SignupApi.getSignupUUID(id, uniqueId);
       signupPromise.then((signup) => setFormData(signup.answer));
       return signupPromise;
     };
@@ -56,7 +56,7 @@ const EditSignUpPage: NextPage = () => {
     };
 
     try {
-      await updateSignup(payload, uuid);
+      await SignupApi.updateSignup(payload, uuid);
       // TODO: Update signup list, so user sees possible changes in the list
       setStatus("Sign-up submission updated successfully");
     } catch (error) {

src/pages/yritysyhteistyo.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
-import {
-  JobAd, useFetchJobAds, jobAdFetcher, generateFetchParams,
-} from "@models/JobAd";
+import JobAd from "@models/JobAd";
+import JobAdApi from "@api/jobAdApi";
+import useFetchJobAds from "@hooks/useFetchJobAds";
 import CorporatePageView from "@views/CorporatePage/CorporatePageView";
 import PageWrapper from "@views/common/PageWrapper";
 
@@ -27,8 +27,7 @@ const CorporatePage: NextPage<InitialProps> = ({ initialJobAds }) => {
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  const { url } = generateFetchParams();
-  const initialJobAds = await jobAdFetcher(url);
+  const initialJobAds = await JobAdApi.getJobAds();
   return {
     props: {
       initialJobAds,

src/views/ActualPage/ActualPageView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import breakpoints from "@theme/breakpoints";
-import { Event } from "@models/Event";
-import { Post } from "@models/Feed";
+import Event from "@models/Event";
+import Post from "@models/Feed";
 
 import {
   Divider, CTASection, TextSection, Link, CrossFadeImages,

src/views/ActualPage/EventCalendar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Event } from "@models/Event";
+import Event from "@models/Event";
 import Button from "@components/Button";
 
 import { CardSection, Card, FullWidthSection } from "@components/index";

src/views/ActualPage/News.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Post } from "@models/Feed";
+import Post from "@models/Feed";
 import Button from "@components/Button";
 
 import { CardSection, Card, FullWidthSection } from "@components/index";

src/views/CorporatePage/CorporatePageView.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
   CTASection, TextSection, PageLink, Link,
 } from "@components/index";
-import { JobAd } from "@models/JobAd";
+import JobAd from "@models/JobAd";
 import CorporatePageHero from "./CorporatePageHero";
 import JobAdList from "./JobAdList";
 

src/views/CorporatePage/JobAdList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { JobAd } from "@models/JobAd";
+import JobAd from "@models/JobAd";
 import { Accordion } from "@components/index";
 import ReactMarkdown from "react-markdown";
 

src/views/EventPage/EventPageView.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
 import colors from "@theme/colors";
-import { Event } from "@models/Event";
+import Event from "@models/Event";
 import Button from "@components/Button";
 import { Link, TextSection } from "@components/index";
 import noop from "@utils/noop";

src/views/FrontPage/FrontPageView.tsx

@@ -9,8 +9,8 @@ import {
   CTASection,
   Link,
 } from "@components/index";
-import { Event } from "@models/Event";
-import { Post } from "@models/Feed";
+import Event from "@models/Event";
+import Post from "@models/Feed";
 import { colors } from "@theme/colors";
 
 import FullWidthSection from "@components/Sections/FullWidthSection";

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -11,8 +11,8 @@ import {
   PageLink,
   TextSection,
 } from "@components/index";
-import { Event } from "@models/Event";
-import { Post } from "@models/Feed";
+import Event from "@models/Event";
+import Post from "@models/Feed";
 import noop from "@utils/noop";
 import InEnglishPageHero from "./InEnglishPageHero";
 

src/views/SignUpPage/FormUtils.tsx

@@ -1,5 +1,5 @@
 import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
-import { SignupForm } from "@models/SignupForm";
+import { SignupForm } from "@models/Signup";
 import { EMAIL_REGEX } from "@utils/regexes";
 import escapeRegExp from "lodash/escapeRegExp";
 

src/views/SignUpPage/SignUpPageView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
-import { SignupForm } from "@models/SignupForm";
+import { SignupForm } from "@models/Signup";
 import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
 import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
 import { TextSection } from "@components/index";

src/views/admin/AdminCreateCommon.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import styled from "styled-components";
 import { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
 import { colors } from "@theme/colors";
-import { Event } from "@models/Event";
-import { Post } from "@models/Feed";
-import { SignupForm } from "@models/SignupForm";
-import { JobAd } from "@models/JobAd";
+import Event from "@models/Event";
+import Post from "@models/Feed";
+import { SignupForm } from "@models/Signup";
+import JobAd from "@models/JobAd";
 import FormWrapper from "@views/common/FormWrapper";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 

tests/testcafe/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { Selector, ClientFunction, RequestLogger } from "testcafe";
 import axios from "axios";
 

tsconfig.json

@@ -11,6 +11,7 @@
     "moduleResolution": "node",
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false, // TODO: switch true
     "noUnusedLocals": false, // TODO: switch true
     "noUnusedParameters": false, // TODO: switch true
     "resolveJsonModule": true,
@@ -21,6 +22,9 @@
     "typeRoots": ["types", "node_modules/@types"],
     "baseUrl": "./",
     "paths": {
+      "@api/*": [
+        "src/api/*"
+      ],
       "@components/*": [
         "src/components/*"
       ],

types/index.d.ts

@@ -1,14 +1,4 @@
-declare module "*.png" {
-  const value: any;
-  export = value;
-}
-declare module "*.jpg" {
-  const value: any;
-  export = value;
-}
-declare module "*.jpeg" {
-  const value: any;
-  export = value;
-}
+declare module "*.png";
+declare module "*.jpg";
 declare module "*.gif";
 declare module "*.svg";