Upgrade typescript and react-spring

Author: velopert

package.json

@@ -12,6 +12,7 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.15.0",
     "@loadable/server": "^5.15.1",
+    "@react-spring/web": "^9.4.2",
     "@reduxjs/toolkit": "^1.2.2",
     "@sentry/browser": "^5.11.1",
     "@svgr/webpack": "4.3.3",
@@ -48,8 +49,8 @@
     "@types/sanitize-html": "^1.20.2",
     "@types/styled-components": "^5.1.21",
     "@types/throttle-debounce": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "^2.8.0",
-    "@typescript-eslint/parser": "^2.8.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
     "apollo-boost": "^0.4.7",
     "apollo-link": "^1.2.13",
     "aws-lambda": "^1.0.4",
@@ -119,7 +120,7 @@
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.4.2",
     "react-textarea-autosize": "^7.1.2",
     "react-toastify": "^5.5.0",
     "react-use": "^13.12.2",
@@ -150,7 +151,7 @@
     "throttle-debounce": "^2.1.0",
     "ts-pnp": "1.1.5",
     "typesafe-actions": "^5.1.0",
-    "typescript": "~3.7.2",
+    "typescript": "^4.5.5",
     "unist-util-visit": "^2.0.1",
     "url-loader": "2.3.0",
     "webpack": "4.41.2",

src/components/base/Header.tsx

@@ -11,6 +11,7 @@ import { Link } from 'react-router-dom';
 import media from '../../lib/styles/media';
 import HeaderLogo from './HeaderLogo';
 import { themedPalette } from '../../lib/styles/themes';
+import ThemeToggleButton from './ThemeToggleButton';
 
 export type MainHeaderProps = {};
 
@@ -43,6 +44,7 @@ function Header(props: MainHeaderProps) {
 
         {user ? (
           <Right>
+            <ThemeToggleButton />
             <SearchButton to={urlForSearch}>
               <SearchIcon2 />
             </SearchButton>

src/components/base/ThemeToggleButton.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { themedPalette } from '../../lib/styles/themes';
+import { MoonIcon } from '../../static/svg';
+
+interface Props {}
+
+function ThemeToggleButton(props: Props) {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <IconButton>
+      <MoonIcon />
+    </IconButton>
+  );
+}
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-right: 0.75rem;
+  color: white;
+
+  &:hover {
+    background: ${themedPalette.slight_layer};
+  }
+`;
+
+export default ThemeToggleButton;

src/components/home/HomeMobileHeadExtra.tsx

@@ -12,7 +12,7 @@ export type MainMobileHeadExtraProps = {
 };
 
 function MainMobileHeadExtra({ visible, onClose }: MainMobileHeadExtraProps) {
-  const transition = useTransition(visible, null, {
+  const transition = useTransition(visible, {
     from: {
       opacity: 0,
       transform: 'scale(0.8)',
@@ -33,11 +33,11 @@ function MainMobileHeadExtra({ visible, onClose }: MainMobileHeadExtraProps) {
 
   return (
     <>
-      {transition.map(({ item, key, props }) =>
+      {transition((styles, item) =>
         item ? (
-          <Aligner key={key}>
-            <OutsideClickHandler onOutsideClick={onClose} key={key}>
-              <Block style={props}>
+          <Aligner>
+            <OutsideClickHandler onOutsideClick={onClose}>
+              <Block style={styles}>
                 <ul>
                   <li>
                     <Link to="/@velog">공지사항</Link>

src/components/home/TimeframePicker.tsx

@@ -13,7 +13,7 @@ export type TimeframePickerProps = {
 };
 
 function TimeframePicker({ visible, onClose }: TimeframePickerProps) {
-  const transition = useTransition(visible, null, {
+  const transition = useTransition(visible, {
     from: {
       opacity: 0,
       transform: 'scale(0.8)',
@@ -36,11 +36,11 @@ function TimeframePicker({ visible, onClose }: TimeframePickerProps) {
 
   return (
     <>
-      {transition.map(({ item, key, props }) =>
+      {transition((styles, item) =>
         item ? (
-          <Aligner key={key}>
-            <OutsideClickHandler onOutsideClick={onClose} key={key}>
-              <Block style={props} onClick={onClose}>
+          <Aligner>
+            <OutsideClickHandler onOutsideClick={onClose}>
+              <Block style={styles} onClick={onClose}>
                 <ul>
                   {timeframes.map(([value, text]) => (
                     <li

src/components/write/TagInput.tsx

@@ -117,7 +117,7 @@ const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
 };
 
 function Help({ focus }: { focus: boolean }) {
-  const transitions = useTransition(focus, null, {
+  const transitions = useTransition(focus, {
     from: { opacity: 0, transform: 'translateY(-1rem)' },
     enter: { opacity: 1, transform: 'translateY(0rem)' },
     leave: { opacity: 0, transform: 'translateY(-1rem)' },
@@ -129,9 +129,9 @@ function Help({ focus }: { focus: boolean }) {
 
   return (
     <HelpBlock>
-      {transitions.map(({ item, key, props }) =>
+      {transitions((styles, item) =>
         item ? (
-          <animated.div className="inside" style={props} key={key}>
+          <animated.div className="inside" style={styles}>
             쉼표 혹은 엔터를 입력하여 태그를 등록 할 수 있습니다.
             <br />
             등록된 태그를 클릭하면 삭제됩니다.

src/containers/register/RegisterFormContainer.tsx

@@ -34,9 +34,10 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
     null,
   );
 
-  const [onGetRegisterToken, , registerToken] = useRequest<
-    GetRegisterTokenResponse
-  >((code: string) => getRegisterToken(code));
+  const [onGetRegisterToken, , registerToken] =
+    useRequest<GetRegisterTokenResponse>((code: string) =>
+      getRegisterToken(code),
+    );
 
   const [onLocalRegister] = useRequest<AuthResponse>(localEmailRegister);
 
@@ -79,9 +80,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
       },
       shortBio: (text: string) => {
         if (text.length > 140) {
-          return `한 줄 소개는 140자 미만으로 입력해주세요. (현재 ${
-            text.length
-          }자)`;
+          return `한 줄 소개는 140자 미만으로 입력해주세요. (현재 ${text.length}자)`;
         }
       },
     };
@@ -100,7 +99,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
     try {
       if (query.code) {
         // local email register
-        const formWithoutEmail = { ...form };
+        const formWithoutEmail = { ...form } as Partial<RegisterFormType>;
         delete formWithoutEmail.email;
         await onLocalRegister({
           registerToken: registerToken && registerToken.register_token,
@@ -115,7 +114,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
         });
       }
     } catch (e) {
-      if (e.response.status === 409) {
+      if ((e as any).response.status === 409) {
         setError('이미 존재하는 아이디입니다.');
         return;
       }

src/containers/write/PublishSeriesConfig.tsx

@@ -19,7 +19,7 @@ import { toast } from 'react-toastify';
 
 export interface PublishSeriesConfigProps {}
 
-const PublishSeriesConfig: React.FC<PublishSeriesConfigProps> = props => {
+const PublishSeriesConfig: React.FC<PublishSeriesConfigProps> = (props) => {
   const user = useUser();
   const selectedSeries = useSelector(
     (state: RootState) => state.write.selectedSeries,
@@ -46,7 +46,7 @@ const PublishSeriesConfig: React.FC<PublishSeriesConfigProps> = props => {
         if (dateA > dateB) return 1;
         return 0;
       })
-      .map(series => ({
+      .map((series) => ({
         id: series.id,
         text: series.name,
       }));
@@ -83,7 +83,7 @@ const PublishSeriesConfig: React.FC<PublishSeriesConfigProps> = props => {
       const lastItem = items.item(items.length - 1);
       lastItem.scrollIntoView();
     } catch (e) {
-      if ((e?.message as string).includes('URL Slug already exists')) {
+      if (((e as any)?.message as string).includes('URL Slug already exists')) {
         toast.error('이미 존재하는 URL입니다.');
         return;
       }
@@ -98,7 +98,7 @@ const PublishSeriesConfig: React.FC<PublishSeriesConfigProps> = props => {
   const onConfirm = () => {
     if (!seriesList.data || !seriesList.data.seriesList) return;
     const selectedSeries = seriesList.data.seriesList.find(
-      series => series.id === selectedId,
+      (series) => series.id === selectedId,
     );
     if (!selectedSeries || !selectedId) return;
     dispatch(

src/lib/detectIOS.ts

@@ -3,12 +3,12 @@ export default function detectIOS() {
 
   // checkAgent for Chrome Developer Menu
   const checkAgent =
-    /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
 
   const checkPlatform =
     (/iPad|iPhone|iPod/.test(navigator.platform) ||
       (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
-    !window.MSStream;
+    !(window as any).MSStream;
 
   return checkAgent || checkPlatform;
 }

src/lib/hooks/useRequest.tsx

@@ -8,7 +8,7 @@ type UseRequestReturnType<R> = [
   boolean,
   R | null,
   Error | null,
-  () => void
+  () => void,
 ];
 
 export default function useRequest<R = any>(
@@ -25,7 +25,7 @@ export default function useRequest<R = any>(
         const response = await promiseCreator(...params);
         setData(response.data);
       } catch (e) {
-        setError(e);
+        setError(e as any);
         throw e;
       }
       setLoading(false);

src/lib/hooks/useS3Upload.tsx

@@ -37,15 +37,15 @@ const useS3Upload = () => {
           headers: {
             'Content-Type': file.type,
           },
-          onUploadProgress: e => {
+          onUploadProgress: (e) => {
             console.log(Math.round((e.loaded / e.total) * 100));
             setProgress(Math.round((e.loaded / e.total) * 100));
           },
         });
         setImage(image_path);
         return image_path;
       } catch (e) {
-        setError(e);
+        setError(e as any);
       }
     },
     [setProgress],
@@ -54,7 +54,7 @@ const useS3Upload = () => {
   return [s3Upload, image, error] as [
     typeof s3Upload,
     typeof image,
-    typeof error
+    typeof error,
   ];
 };
 

src/lib/utils.ts

@@ -86,14 +86,14 @@ export function safe<T>(callback: () => T) {
 }
 
 export function sleep(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export function loadScript(url: string) {
   return new Promise((resolve, reject) => {
     const script = document.createElement('script');
     script.onload = function onload() {
-      resolve();
+      resolve(null);
     };
     script.onerror = function onerror() {
       reject();

src/lib/waitUntil.ts

@@ -29,7 +29,7 @@ const waitUntil = (
 
     const check = () => {
       if (conditionCallback()) {
-        return resolve();
+        return resolve(null);
       }
       timeoutId = setTimeout(check, interval);
     };

src/server/serverRender.tsx

@@ -101,8 +101,8 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
       );
       if (notFound) store.dispatch(error.actions.showNotFound());
     }
-    console.log(e.name);
-    console.log(e.message);
+    console.log((e as any).name);
+    console.log((e as any).message);
     console.log(JSON.stringify(e));
   }
 

src/server/ssrMiddleware.ts

@@ -16,7 +16,7 @@ const ssrMiddleware: Middleware = async (ctx, next) => {
     ctx.body = result.html;
     ctx.status = result.statusCode;
   } catch (e) {
-    ctx.throw(500, e);
+    ctx.throw(500, e as any);
   }
 };