From b473faa6101ae43a607c92e3d6a7a200dade7579 Mon Sep 17 00:00:00 2001 From: wonderlandpark Date: Mon, 17 May 2021 16:55:38 +0900 Subject: [PATCH] style: suggestions at review --- app.css | 13 ++------- components/Advertisement.tsx | 2 +- components/Application.tsx | 4 ++- components/BotCard.tsx | 7 +++-- components/Captcha.tsx | 3 +- components/DiscordAvatar.tsx | 54 ++++++++++++++++++------------------ components/Docs.tsx | 6 ++-- components/Footer.tsx | 6 ++-- components/Form/Selects.tsx | 6 ++-- components/Hero.tsx | 1 - components/Redirect.tsx | 2 +- components/Search.tsx | 4 +-- 12 files changed, 52 insertions(+), 56 deletions(-) diff --git a/app.css b/app.css index 3f119cb..2e806e6 100644 --- a/app.css +++ b/app.css @@ -152,10 +152,7 @@ button { height: 100%; box-shadow: 0 0 10px #3366FF, 0 0 5px #3366FF; opacity: 1.0; - - -webkit-transform: rotate(3deg) translate(0px, -4px); - -ms-transform: rotate(3deg) translate(0px, -4px); - transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ @@ -176,9 +173,7 @@ button { border-top-color: #3366FF; border-left-color: #3366FF; border-radius: 50%; - - -webkit-animation: nprogress-spinner 400ms linear infinite; - animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; } .nprogress-custom-parent { @@ -191,10 +186,6 @@ button { position: absolute; } -@-webkit-keyframes nprogress-spinner { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } -} @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } diff --git a/components/Advertisement.tsx b/components/Advertisement.tsx index b89d3d4..279c6f6 100644 --- a/components/Advertisement.tsx +++ b/components/Advertisement.tsx @@ -1,5 +1,5 @@ -import Logger from '@utils/Logger' import { useEffect } from 'react' +import Logger from '@utils/Logger' const Advertisement = ({ size = 'short' }: AdvertisementProps): JSX.Element => { useEffect(() => { diff --git a/components/Application.tsx b/components/Application.tsx index 0b1ad41..60b17c8 100644 --- a/components/Application.tsx +++ b/components/Application.tsx @@ -1,5 +1,7 @@ +import dynamic from 'next/dynamic' import Link from 'next/link' -import DiscordAvatar from './DiscordAvatar' + +const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const Application = ({ type, id, name }: ApplicationProps): JSX.Element => { return ( diff --git a/components/BotCard.tsx b/components/BotCard.tsx index f8259de..4e00a2c 100644 --- a/components/BotCard.tsx +++ b/components/BotCard.tsx @@ -1,12 +1,13 @@ import Link from 'next/link' +import dynamic from 'next/dynamic' import { checkBotFlag, formatNumber, makeBotURL } from '@utils/Tools' import { Status } from '@utils/Constants' import { Bot } from '@types' -import Divider from '@components/Divider' -import Tag from '@components/Tag' -import DiscordAvatar from '@components/DiscordAvatar' +const Divider = dynamic(() => import('@components/Divider')) +const Tag = dynamic(() => import('@components/Tag')) +const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => { return ( diff --git a/components/Captcha.tsx b/components/Captcha.tsx index 60a3ad9..65288d2 100644 --- a/components/Captcha.tsx +++ b/components/Captcha.tsx @@ -1,5 +1,6 @@ -import HCaptcha from '@hcaptcha/react-hcaptcha' import { Ref } from 'react' +import HCaptcha from '@hcaptcha/react-hcaptcha' + const Captcha = ({ dark, onVerify }:CaptchaProps):JSX.Element => { return diff --git a/components/DiscordAvatar.tsx b/components/DiscordAvatar.tsx index 855e30f..b175a71 100644 --- a/components/DiscordAvatar.tsx +++ b/components/DiscordAvatar.tsx @@ -11,39 +11,39 @@ const DiscordAvatar = (props: { }) => { const fallback = '/img/default.png' const [ webpUnavailable, setWebpUnavailable ] = useState() + useEffect(()=> { setWebpUnavailable(localStorage.webp === 'false') }, []) - return ( - {props.alt)=> { - if(webpUnavailable) { - (e.target as ImageTarget).onerror = (event) => { - // All Fails - (event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') } - (event.target as ImageTarget).src = fallback + + return {props.alt)=> { + if(webpUnavailable) { + (e.target as ImageTarget).onerror = (event) => { + // All Fails + (event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') } + (event.target as ImageTarget).src = fallback - } } - else { - (e.target as ImageTarget).onerror = (event) => { - // All Fails - (event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') } - (event.target as ImageTarget).src = fallback - } - // Webp Load Fail - (e.target as ImageTarget).src = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256}) - if(!supportsWebP()) localStorage.setItem('webp', 'false') + } + else { + (e.target as ImageTarget).onerror = (event) => { + // All Fails + (event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') } + (event.target as ImageTarget).src = fallback } - }} - /> - ) + // Webp Load Fail + (e.target as ImageTarget).src = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256}) + if(!supportsWebP()) localStorage.setItem('webp', 'false') + } + }} + /> } export default DiscordAvatar diff --git a/components/Docs.tsx b/components/Docs.tsx index 801955a..c28ac02 100644 --- a/components/Docs.tsx +++ b/components/Docs.tsx @@ -1,7 +1,7 @@ -import Container from '@components/Container' -import Wave from '@components/Wave' -import SEO from './SEO' +import dynamic from 'next/dynamic' +const Container = dynamic(() => import('@components/Container')) +const SEO = dynamic(() => import('@components/SEO')) const Docs = ({ title, header, description, subheader, children }: DocsProps): JSX.Element => { return ( <> diff --git a/components/Footer.tsx b/components/Footer.tsx index 9ef727d..2362aa0 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,9 +1,11 @@ import Link from 'next/link' -import Container from '@components/Container' +import dynamic from 'next/dynamic' -import Toggle from './Toggle' import { Theme } from '@types' +const Container = dynamic(() => import('@components/Container')) +const Toggle = dynamic(() => import('@components/Toggle')) + const Footer = ({ theme, setTheme }: FooterProps): JSX.Element => { return (
diff --git a/components/Form/Selects.tsx b/components/Form/Selects.tsx index edf5131..2dfc32a 100644 --- a/components/Form/Selects.tsx +++ b/components/Form/Selects.tsx @@ -1,4 +1,5 @@ -import ReactSelect, { components } from 'react-select' +import { ComponentType } from 'react' +import ReactSelect, { components, GroupTypeBase, MultiValueProps, OptionTypeBase } from 'react-select' import { SortableContainer, SortableElement, @@ -49,8 +50,7 @@ const Select = ({ placeholder, options, values, setValues, handleChange, handleT }} isMulti className='border border-grey-light dark:border-transparent rounded' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer ' placeholder={placeholder || '선택해주세요.'} options={options} onChange={handleChange} onBlur={handleTouch} noOptionsMessage={() => '검색 결과가 없습니다.'} value={values.map(el => ({ label: el, value: el}))} components={{ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - MultiValue: SortableMultiValue as any, + MultiValue: SortableMultiValue as ComponentType>>, MultiValueLabel: SortableMultiValueLabel, }} closeMenuOnSelect={false} diff --git a/components/Hero.tsx b/components/Hero.tsx index c8464c0..ddca521 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -3,7 +3,6 @@ import dynamic from 'next/dynamic' import { categories, categoryIcon } from '@utils/Constants' const Container = dynamic(()=> import('@components/Container')) -const Wave = dynamic(()=> import('@components/Wave')) const Tag = dynamic(()=> import('@components/Tag')) const Search = dynamic(()=> import('@components/Search')) diff --git a/components/Redirect.tsx b/components/Redirect.tsx index 7a47906..b249104 100644 --- a/components/Redirect.tsx +++ b/components/Redirect.tsx @@ -11,7 +11,7 @@ const Redirect = ({ to, text=true, children }:RedirectProps):JSX.Element => { if(!to) throw new Error('No Link') useEffect(() => { redirectTo(router, to) - }, []) + }) if(children) return <> {children} diff --git a/components/Search.tsx b/components/Search.tsx index 4148ac2..d350faf 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -59,7 +59,7 @@ const Search = (): JSX.Element => { if(d.findIndex(n => n.value === query) !== -1) d.splice(d.findIndex(n => n.value === query), 1) d.push({ value: query, - date: new Date().getTime() + date: Date.now() }) d.reverse() setRecentSearch(d.slice(0, 10)) @@ -67,7 +67,7 @@ const Search = (): JSX.Element => { } catch { setRecentSearch([{ value: query, - date: new Date().getTime() + date: Date.now() }]) localStorage.recentSearch = JSON.stringify(recentSearch) } finally {