⚡ Improve data fetching

vercel/swr#93 (comment)

package.json

@@ -47,7 +47,7 @@
     "rehype-katex": "^2.0.0",
     "remark-math": "^2.0.0",
     "styled-components": "^4.4.0",
-    "swr": "^0.1.2"
+    "swr": "^0.1.9"
   },
   "devDependencies": {
     "@types/codemirror": "^0.0.79",

src/pages/admin/task.tsx

@@ -7,7 +7,7 @@ import useSWR from 'swr'
 import { Table, Switch, Icon, Input } from 'antd'
 import { ITask } from '../../@types/task'
 import { ColumnProps } from 'antd/lib/table'
-import { fetchAdminTask } from '../../utils/fetcher'
+import { fetchFromFirebase } from '../../utils/fetcher'
 import { CustomSpin } from '../../components/Spin'
 
 const WarningText = styled.p`
@@ -19,7 +19,7 @@ const ConfirmBox = styled(Input)`
 `
 
 export default () => {
-  const { data } = useSWR('getAdminTask', fetchAdminTask)
+  const { data } = useSWR('getAdminTask', fetchFromFirebase)
   const [state, setState] = useState('')
   const [deleteID, setDeleteID] = useState('')
 

src/pages/admin/user.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
 import firebase from '../../lib/firebase'
 import useSWR from 'swr'
-import { fetchUserList } from '../../utils/fetcher'
+import { fetchFromFirebase } from '../../utils/fetcher'
 import { Table, Switch, Icon } from 'antd'
 import { CustomSpin } from '../../components/Spin'
 import { AdminLayout } from '../../components/admin/AdminLayout'
 
 export default () => {
-  const { data } = useSWR('getAllUser', fetchUserList)
+  const { data } = useSWR('getAllUser', fetchFromFirebase)
   const [state, setState] = useState('')
+
   const columns = [
     {
       title: 'Display Name',

src/pages/submissions/[id].tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { Select, Skeleton } from 'antd'
 
@@ -9,7 +9,7 @@ import { ContainerWrapper } from '../../design/Atomics'
 import { NextPage } from 'next'
 import { PageLayout } from '../../components/Layout'
 import useSWR from 'swr'
-import { fetchSubmissionData } from '../../utils/fetcher'
+import { fetchFromFirebase } from '../../utils/fetcher'
 
 const { Option } = Select
 
@@ -43,7 +43,11 @@ const SubmissionDetail: NextPage = () => {
   const id =
     typeof window !== 'undefined' ? window.location.pathname.split('/')[2] : ''
 
-  const { data } = useSWR(`${id}`, fetchSubmissionData)
+  const param = useMemo(() => ({ submission_id: id }), [id])
+  const { data } = useSWR(
+    ['getDetailedSubmissionData', param],
+    fetchFromFirebase
+  )
 
   useEffect(() => {
     if (data) {

src/utils/fetcher.ts

@@ -1,28 +1,10 @@
 import firebase from '../lib/firebase'
 
-export const fetchAdminTask = async () => {
-  const getAdminTask = firebase
-    .app()
-    .functions('asia-east2')
-    .httpsCallable('getAdminTask')
-
-  return await getAdminTask()
-}
-
-export const fetchSubmissionData = async (id: string) => {
-  const getSubmission = firebase
-    .app()
-    .functions('asia-east2')
-    .httpsCallable('getDetailedSubmissionData')
-
-  return await getSubmission({ submission_id: id })
-}
-
-export const fetchUserList = async (type: string) => {
-  const getAllUser = firebase
+export const fetchFromFirebase = async (type: string, param?: Object) => {
+  const get = firebase
     .app()
     .functions('asia-east2')
     .httpsCallable(type)
 
-  return await getAllUser({})
+  return await get(param)
 }

yarn.lock

@@ -3052,18 +3052,6 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-deep-equal@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.0.tgz#3103cdf8ab6d32cf4a8df7865458f2b8d33f3745"
-  integrity sha512-ZbfWJq/wN1Z273o7mUSjILYqehAktR2NVoSrOukDkU9kg2v/Uv89yU4Cvz8seJeAmtN5oqiefKq8FPuXOboqLw==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -3510,7 +3498,7 @@ extracted-loader@1.0.4:
   resolved "https://registry.yarnpkg.com/extracted-loader/-/extracted-loader-1.0.4.tgz#e1a3f1791813c14091a1959e261e23e95dd90115"
   integrity sha512-G8A0hT/WCWIjesZm7BwbWdST5dQ08GNnCpTrJT/k/FYzuiJwlV1gyWjnuoizOzAR4jpEYXG2J++JyEKN/EB26Q==
 
-fast-deep-equal@^2.0.1:
+fast-deep-equal@2.0.1, fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
@@ -3942,7 +3930,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.1, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -4332,11 +4320,6 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -4373,11 +4356,6 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
-  integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
-
 is-decimal@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.3.tgz#381068759b9dc807d8c0dc0bfbae2b68e1da48b7"
@@ -4514,13 +4492,6 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-regex@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
-  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
-  dependencies:
-    has "^1.0.1"
-
 is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4845,7 +4816,7 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.throttle@4.1.1, lodash.throttle@^4.0.0, lodash.throttle@^4.1.1:
+lodash.throttle@^4.0.0, lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
@@ -4855,7 +4826,7 @@ lodash.uniq@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.16.5, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5:
+lodash@4.17.15, lodash@^4.16.5, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -5622,12 +5593,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-is@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
-  integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
-
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.0.11, object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -7370,13 +7336,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  integrity sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==
-  dependencies:
-    define-properties "^1.1.2"
-
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -8181,13 +8140,13 @@ swap-case@^1.1.0:
     lower-case "^1.1.1"
     upper-case "^1.1.1"
 
-swr@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-0.1.2.tgz#2dba5a42b7e27706b51c22be245424b9c7d30d59"
-  integrity sha512-ZNRT+ILgp8mT+9IEOWmIEa1TfWR4FwVjZOQjhSFyODTtZO0rz7PtHsguV+xcp1ar3OWPRhKj2x82NeyQIxzqOA==
+swr@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.1.9.tgz#cfeecd82f3a781cf9b378cc90b4cca28d5e1bec1"
+  integrity sha512-vGmRqB7fwqJnZMStGeNMpR9vZttlt4oDg+8F2wg88fnOeyvr68CUxoUGQ46jnPcu3wEeuMH6pdoFutmtGE9+HA==
   dependencies:
-    deep-equal "1.1.0"
-    lodash.throttle "4.1.1"
+    fast-deep-equal "2.0.1"
+    lodash "4.17.15"
     ms "2.1.2"
 
 tapable@^1.0.0, tapable@^1.1.3: