feat:关于我们

package.json

@@ -16,6 +16,7 @@
     "@heroicons/react": "^1.0.6",
     "@loadable/component": "^5.15.2",
     "ahooks": "^3.4.1",
+    "axios": "^0.27.2",
     "gsap": "^3.10.4",
     "pixi-filters": "^4.1.6",
     "pixi.js": "^6.4.2",

src/common/hooks.tsx

-import { useState } from "react";
+import { useState,useEffect } from "react";
 
 export const useAsyncState =(initialValue:any) =>{
     const [value, setValue] = useState(initialValue);
@@ -10,3 +10,21 @@ export const useAsyncState =(initialValue:any) =>{
     return [value, setter];
 }
 
+
+export function useMediaQuery(query:string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addListener(listener);
+    return () => media.removeListener(listener);
+  }, [matches, query]);
+
+  return matches;
+}
\ No newline at end of file

src/service/api.ts

+import service from ".";
+import { Job } from "./types";
+
+export const getJobsByDept = async (department: string) => {
+  return service.get<unknown, Job[]>(
+    '/jobs',
+    {
+      params: {
+        department: department
+      }
+    }
+  )
+}
+
+export const getJobsById = async (id: string) => {
+  return service.get<unknown, Job>(
+    `/jobs/${id}`,
+  )
+}
\ No newline at end of file

src/service/index.ts

+import Axios, { AxiosResponse } from 'axios'
+const service = Axios.create(
+  {
+    baseURL: 'http://192.168.21.133:3000/'
+  }
+)
+
+const response_interceptor = (res: AxiosResponse<any>) => {
+  if (res.status === 200 || res.status === 201) {
+    return res.data
+  }
+  else throw new Error(res.statusText)
+}
+
+service.interceptors.response.use(
+  (response) => {
+    let res = response_interceptor(response);
+    return res;
+  },
+  (err) => {
+    return Promise.reject(err);
+  }
+);
+
+export default service
\ No newline at end of file

src/service/types.ts

+export interface Job {
+  "id"?:string
+  "title": string,
+  "requirments": string,
+  "demands": string,
+  "salary": string,
+  "diploma": string,
+  "department": string,
+  "location": string
+}

src/views/About/Contact/index.tsx

+import { IProps } from "@/common/Iprops.interface";
+import { AppContianer } from "@/layouts/AppContianer";
+
+
+interface ContactType extends IProps {
+
+}
+
+const Tels = () => {
+  const telInfo = [
+    {
+      location: '成都总部',
+      tel: '0571-8167-1366'
+    },
+    {
+      location: '成都总部',
+      tel: '0571-8167-1366'
+    },
+    {
+      location: '成都总部',
+      tel: '0571-8167-1366'
+    }
+  ]
+  return (
+    <div className=" grid grid-cols-2">
+      {telInfo.map((tel, index) => {
+        return (
+          <div key={index}>
+            <div>{tel.location}</div>
+            <div>{tel.tel}</div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+
+export const Contact = () => {
+  return (
+    <AppContianer>
+      <div className=" w-10/12 mx-auto mt-16">
+        <div>Contact us</div>
+        <div>联系我们</div>
+        <Tels />
+        <div className="grid grid-cols-2">
+          <div>
+            <div>西湖区办公室</div>
+            <div>地点</div>
+          </div>
+          <div>
+            <div>西湖区办公室</div>
+            <div>地点</div>
+          </div>
+        </div>
+      </div>
+    </AppContianer>
+  )
+}
\ No newline at end of file

src/views/About/JoinUs/HireBoard.tsx

+import { IProps } from "@/common/Iprops.interface"
+import { Job } from "@/service/types"
+
+interface HireScrollBoardType extends IProps {
+  list: Job[],
+  onJobIdChange: (id: string) => void
+}
+export const HireBoard = (props: HireScrollBoardType) => {
+  const handleHireClick = (jobId: string) => {
+    props.onJobIdChange(jobId)
+  }
+  return (
+    <div className=" grid grid-cols-2 gap-y-6 gap-x-6">
+      {
+        props.list.map((item, index) => {
+          return (
+            <div key={index}
+              onClick={() => handleHireClick(item.id!)}
+              className=" pl-2 pr-5 hover:bg-white/30 hover:backdrop-blur-md cursor-pointer border-2 border-transparent hover:border-yellow-100">
+              <div>{item.title}</div>
+              <div>{item.diploma}</div>
+              <div>{item.location}</div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
\ No newline at end of file

src/views/About/JoinUs/HireDetail.tsx

+import { useAsyncState } from "@/common/hooks"
+import { IProps } from "@/common/Iprops.interface"
+import { getJobsById } from "@/service/api"
+import { Job } from "@/service/types"
+import { useEffect, useState } from "react"
+
+interface HireDetailType extends IProps {
+  jobId: string
+}
+export const HireDetail = (props: HireDetailType) => {
+  /* get detail */
+  const [jobDetail,setJobDetail] = useAsyncState({} as Job)
+  useEffect(()=>{
+    const getDetail = async ()=>{
+      const detail = await getJobsById(props.jobId)
+      setJobDetail(detail)
+    }
+    getDetail()
+  },[])
+  const goToHire = (id: string) => {
+    console.log(id);
+  }
+  return (
+    <div>
+      {jobDetail &&
+        <div>
+          <div >
+            {jobDetail.title}
+            <button type="button" className=" ml-10 px-5 py-2 bg-black text-white" onClick={() => goToHire(jobDetail.id!)}>我要应聘</button>
+          </div>
+          <div>{jobDetail.diploma}</div>
+          <div>{jobDetail.location}</div>
+          <div>
+            <div>岗位描述</div>
+            <div>{jobDetail.requirments}</div>
+          </div>
+          <div>
+            <div>岗位要求</div>
+            <div>
+              {jobDetail.demands}
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
\ No newline at end of file

src/views/About/JoinUs/context.ts

+
+export const hireNav = [
+    {
+        text:'技术部门',
+        component:'tech',
+    },
+    {
+        text:'设计部门',
+        component:'design',
+    },
+    {
+        text:'运营部门',
+        component:'operate',
+    },
+    {
+        text:'商务部门',
+        component:'business',
+    },
+    {
+        text:'财务部门',
+        component:'finance',
+    },
+    {
+        text:'人事部门',
+        component:'resources',
+    }
+]
\ No newline at end of file

src/views/About/JoinUs/index.tsx

+import { IProps } from "@/common/Iprops.interface"
+import { AppContianer } from "@/layouts/AppContianer"
+import { useEffect, useMemo, useState } from "react"
+import { hireNav } from './context'
+import { HireDetail } from "./HireDetail"
+import { HireBoard } from "./HireBoard"
+import { getJobsByDept } from "@/service/api"
+import { useAsyncState } from "@/common/hooks"
+import { Job } from "@/service/types"
+interface JoinUsType extends IProps {
+
+}
+
+interface HireNavType extends IProps {
+  onCurrentItemChanges: (curr: string) => void,
+  hireList: typeof hireNav
+}
+
+const HireNav = (props: HireNavType) => {
+  const [currentNav, setCurrentNav] = useState<string>('技术部门')
+  const handleItemClick = (text: string) => {
+    setCurrentNav(text)
+    props.onCurrentItemChanges(text)
+  }
+  return (
+    <div>
+      {
+        props.hireList.map((item, index) => {
+          return (
+            <div key={index}
+              onClick={() => handleItemClick(item.text)}
+              className={`py-5 my-5 cursor-pointer ${currentNav === item.text ? ' text-gray-800 font-semibold' : ' text-gray-500'}`} >{item.text}</div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export const JoinUs = () => {
+  /* handle nav switch */
+  const [current, setCurrent] = useState(hireNav[0].text)
+  const handleNavChanges = async(curr: string) => {
+    setCurrent(curr)
+    await setJobList(getJobsByDept(curr))
+    setJobId(undefined)
+  }
+  /* handle click to see detail */
+  const [jobId, setJobId] = useState<string>()
+  const handleHireClick = (id: string) => {
+    setJobId(id)
+  }
+  /* handle go back */
+  const goBack = () => {
+    setJobId(undefined)
+  }
+  /* fetch jobs */
+  const [jobList, setJobList] = useAsyncState([])
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await getJobsByDept('技术部门');
+      await setJobList(res);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <AppContianer>
+      <div className=" pt-16 flex justify-between">
+        <div className="left">
+          <HireNav hireList={hireNav} onCurrentItemChanges={(curr) => { handleNavChanges(curr) }} />
+        </div>
+        <div className="right w-9/12">
+          <div className="header">
+            <div className=" text-6xl font-bold">Join Us</div>
+            <div className=" text-4xl font-bold">加入我们</div>
+          </div>
+
+          <div>
+            {
+              jobId ?
+                <div>
+                  <button type="button" onClick={goBack} >返回</button>
+                  <HireDetail jobId={jobId} />
+                </div>
+                : <HireBoard list={jobList} onJobIdChange={(jobId) => { handleHireClick(jobId) }} />
+            }
+          </div>
+        </div>
+
+      </div>
+    </AppContianer>
+  )
+}
\ No newline at end of file

src/views/About/Memorabilia/index.tsx

+import { IProps } from "@/common/Iprops.interface"
+import { AppContianer } from "@/layouts/AppContianer"
+import BScroll from '@better-scroll/core'
+import Slide from '@better-scroll/slide'
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react'
+import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
+import { useMediaQuery } from "@/common/hooks"
+
+
+interface MemorabiliaType extends IProps {
+
+}
+
+interface MemoCardType extends IProps {
+  year: string,
+  month: string,
+  event: string
+}
+
+const memorabilias = [
+  {
+    year: '2022',
+    month: '07',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '06',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '05',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '04',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '03',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '02',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '01',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '04',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '04',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '04',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '07',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '06',
+    event: 'any'
+  },
+  {
+    year: '2022',
+    month: '05',
+    event: 'any'
+  },
+]
+
+const MemoCard = (props: MemoCardType) => {
+  return (
+    <div className=" h-60  bg-black text-white">
+      <div>{props.year}</div>
+      <div>{props.month}</div>
+      <div>{props.event}</div>
+    </div>
+  )
+}
+
+const initBScroll = (el: HTMLElement) => {
+  const res = new BScroll(el, {
+    scrollX: true,
+    scrollY: false,
+    slide: {
+      threshold: 100,
+      autoplay: false,
+    },
+    momentum: false,
+    bounce: false,
+    probeType: 3,
+  })
+  return res
+};
+
+export const Memorabilia = () => {
+  //init scroll
+  BScroll.use(Slide)
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
+  const [currentPageIndex, setCurrentPageIndex] = useState(0)
+  useEffect(() => {
+    const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
+    setScrollObj(scrollEl)
+    return () => {
+      scrollObj?.destroy();
+    };
+  }, [wrapRef])
+
+  //handle slide will change
+  useEffect(() => {
+    const page = scrollObj?.plugins['slide'].pages.currentPage
+    page &&
+      setCurrentPageIndex((prevState: number) => {
+        if (prevState !== page.pageY) {
+          return page.pageX
+        }
+        return prevState
+      })
+    scrollObj?.on('slideWillChange', (page: any) => {
+      setCurrentPageIndex((prevState: number) => {
+        if (prevState !== page.pageX) {
+          return page.pageX
+        }
+        return prevState
+      })
+    })
+  }, [scrollObj])
+
+  //handle button to change slide
+  const [isMobile, setIsMobile] = useState({ matches: window.innerWidth > 640 ? true : false })
+  const [isTable, setIsTable] = useState({ matches: window.innerWidth > 961 ? true : false })
+  const [isLaptop, setIsLaptop] = useState({ matches: window.innerWidth > 1921 ? true : false })
+  useEffect(() => {
+    const queryMobile = window.matchMedia('(min-width:640px)')
+    queryMobile.addListener((e)=>setIsMobile({matches:e.matches}))
+    const queryTable = window.matchMedia('(min-width:961px)')
+    queryTable.addListener((e)=>setIsTable({matches:e.matches}))
+    const queryLaptop = window.matchMedia('(min-width:1921px)')
+    queryLaptop.addListener((e)=>setIsLaptop({matches:e.matches}))
+    return () => {
+      queryMobile.removeListener(setIsMobile)
+      queryTable.removeListener(setIsTable)
+      queryLaptop.removeListener(setIsLaptop)
+    }
+  },[])
+
+  const ITEMS_PER_PAGE = useMemo(() => {
+    if (isLaptop && isLaptop.matches) return 10
+    else if (isTable && isTable.matches) return 6
+    else if (isMobile && isMobile.matches) return 4
+    else return 2
+  }, [isLaptop,isTable,isMobile])
+  const ITEMS_PER_ROW = 2
+  const COLS_TOTAL = Math.ceil(ITEMS_PER_PAGE / ITEMS_PER_ROW)
+  const PAGE_TOTAL = memorabilias.length % ITEMS_PER_PAGE ? Math.floor(memorabilias.length / ITEMS_PER_PAGE) + 1 : memorabilias.length / ITEMS_PER_PAGE
+  const currentList = useMemo(() => {
+    const start = currentPageIndex * ITEMS_PER_PAGE
+    return memorabilias.slice(start, start + ITEMS_PER_PAGE)
+  }, [currentPageIndex])
+  const handlePageMove = (type: string) => {
+    if (type == 'pre') {
+      scrollObj!.prev()
+    }
+    else if (type == 'next') {
+      scrollObj!.next()
+    }
+  }
+
+  //memorabilias list
+  const listStyle = ((index: number) => {
+    const distance = 500 - 347
+    return {
+      marginTop: `${(distance / (COLS_TOTAL - 1) * index) / 16}rem`
+    }
+  })
+
+  const gridStyle = {
+    gridTemplateColumns: `repeat(${COLS_TOTAL}, minmax(0, 1fr))`
+  }
+
+  const list = (memorabilias: MemoCardType[]) => {
+    let arr = [] as Array<any>
+    for (var i = 0; i < memorabilias.length; i = i + 2) {
+      if (i !== memorabilias.length - 1) {
+        arr.push(
+          <div key={i} style={listStyle(i)} className="">
+            <MemoCard month={memorabilias[i].month} year={memorabilias[i].year} event={memorabilias[i].event} />
+            <div className=" mt-5">
+              <MemoCard month={memorabilias[i + 1].month} year={memorabilias[i + 1].year} event={memorabilias[i + 1].event} />
+            </div>
+          </div>
+        )
+      } else {
+        arr.push(
+          <div key={i} style={listStyle(i)}>
+            <MemoCard month={memorabilias[i].month} year={memorabilias[i].year} event={memorabilias[i].event} />
+          </div>
+        )
+      }
+    }
+    return (
+      <div className={`grid gap-x-4 mx-4`} style={gridStyle}>{arr}</div>
+    )
+  }
+
+  return (
+    <AppContianer>
+      <div className=" mt-16">
+        <div className=" float-right">
+          <div>Memorabilias</div>
+          <div>——大事记</div>
+        </div>
+        <div className="flex">
+          <button type="button" className=" h-10 px-5 ml-20 bg-gray-50" onClick={() => handlePageMove('pre')}>pre</button>
+          <div className="slide-banner-wrapper w-9/12 table:w-11/12 overflow-hidden" ref={wrapRef}>
+            <div className="slide-banner-content whitespace-nowrap w-full">
+              {
+                Array(PAGE_TOTAL).fill('').map((page, index) => {
+                  return (
+                    <div key={index} className=" inline-block w-full h-full">{list(currentList)}</div>
+                  )
+                })
+              }
+            </div>
+          </div>
+          <button type="button" className=" h-10 px-5 bg-gray-100 " onClick={() => handlePageMove('next')}>next</button>
+        </div>
+      </div>
+    </AppContianer >
+  )
+}
\ No newline at end of file

src/views/About/Partners/index.tsx

+import { AppContianer } from "@/layouts/AppContianer"
+
+const imgList = [
+  { url: 'hhh' },
+  { url: 'hhh' },
+  { url: 'hhh' },
+  { url: 'hhh' },
+  { url: 'hhh' },
+  { url: 'hhh' },
+]
+
+
+export const Partners = () => {
+  return (
+    <AppContianer>
+      <div className="flex mt-16 ">
+        <div className=" grid grid-cols-4 w-3/4">
+          {imgList.map((img, index) => {
+            return (
+              <img src={img.url} key={index} />
+            )
+          })}
+        </div>
+        <div className="flex w-1/4 justify-end relative z-[1002]">
+          <div className=" mx-0 mt-4 w-16 text-5xl">合作伙伴</div>
+          <div className=" mx-0 mt-0 break-words w-1 px-6 text-7xl items-start">Partners</div>
+        </div>
+      </div>
+    </AppContianer>
+  )
+}
\ No newline at end of file

src/views/About/index.tsx

@@ -4,6 +4,10 @@ import { BallAnime } from "@/layouts/BallAnime";
 import { PageLayout } from "@/layouts/PageLayout";
 import AboutImg from "@/assets/img/about.png";
 import * as React from "react";
+import { Contact } from "./Contact";
+import { Partners } from "./Partners";
+import { Memorabilia } from "./Memorabilia";
+import { JoinUs } from "./JoinUs";
 
 const Description = () => {
   return (
@@ -64,7 +68,7 @@ export default function About(props: any) {
         color: "white",
       },
     ],
-    config2:[
+    config2: [
       {
         size: "15rem",
         position: ["-5rem", "50%"],
@@ -102,9 +106,7 @@ export default function About(props: any) {
 
         <PageLayout>
           <BallAnime config={demo.config2}>
-            <AppContianer>
-              <div>memorabilia</div>
-            </AppContianer>
+            <Memorabilia />
           </BallAnime>
         </PageLayout>
 
@@ -129,25 +131,21 @@ export default function About(props: any) {
         <PageLayout>
           <BallAnime config={demo.config2}>
             <AppContianer>
-              <div>Join us</div>
+              <JoinUs/>
             </AppContianer>
           </BallAnime>
         </PageLayout>
 
         <PageLayout>
           <BallAnime config={demo.config2}>
-            <AppContianer>
-              <div>contract us</div>
-            </AppContianer>
+            <Contact />
           </BallAnime>
         </PageLayout>
 
 
         <PageLayout>
           <BallAnime config={demo.config2}>
-            <AppContianer>
-              <div>Partners</div>
-            </AppContianer>
+            <Partners />
           </BallAnime>
         </PageLayout>
       </div>

yarn.lock

@@ -278,7 +278,7 @@
 
 "@better-scroll/slide@^2.4.2":
   version "2.4.2"
-  resolved "https://registry.yarnpkg.com/@better-scroll/slide/-/slide-2.4.2.tgz#024528ae57516a2ee99bea346381589e4e6a039c"
+  resolved "https://registry.npmjs.org/@better-scroll/slide/-/slide-2.4.2.tgz#024528ae57516a2ee99bea346381589e4e6a039c"
   integrity sha512-VfdFHm/meo4nEyfx0JLn8rUHfQdQCnoBHs/BsV+vmjVivKg+cVgfS+QaytrIulWKqNAWNlfXbAaNtZMv8gNKZg==
   dependencies:
     "@better-scroll/core" "^2.4.2"
@@ -838,6 +838,11 @@ arg@^5.0.1:
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
   integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 autoprefixer@^10.4.7:
   version "10.4.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.7.tgz#1db8d195f41a52ca5069b7593be167618edbbedf"
@@ -850,6 +855,14 @@ autoprefixer@^10.4.7:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -924,6 +937,13 @@ color-name@^1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -963,6 +983,11 @@ defined@^1.0.0:
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
   integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 detective@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
@@ -1163,6 +1188,20 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+follow-redirects@^1.14.9:
+  version "1.15.1"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
+  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -1324,6 +1363,18 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimist@^1.1.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"