style: linting

GBSWHS · Aug 20, 2023 · 1d16ecd · 1d16ecd
1 parent a20912a
commit 1d16ecd
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 204 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,10 +6,13 @@ import Invites from './pages/Invites'
 import Search from './pages/Search'
 import PathProcesor from './components/PathProcessor'
 import { type FC } from 'react'
+import { GlobalStyles } from './styles/globals'
+import { Toaster } from 'react-hot-toast'
 
 const App: FC = () =>
   <BrowserRouter>
     <Header />
+    <GlobalStyles />
     <PathProcesor />
 
     <Routes>
@@ -18,6 +21,11 @@ const App: FC = () =>
       <Route path="/instances/search/:search" element={<Search />}></Route>
       <Route path='/invites/:uuid' element={<Invites />}></Route>
     </Routes>
+
+    <Toaster
+      position="bottom-right"
+      reverseOrder={false}
+    />
   </BrowserRouter>
 
 export default App
diff --git a/src/components/CreateModal.tsx b/src/components/CreateModal.tsx
@@ -16,7 +16,7 @@ const CreateModal: FC<Props> = (props) => {
   const navigate = useNavigate()
   const [, updateState] = useState<any>()
   const forceUpdate = useCallback(() => { updateState({}) }, [])
-  const [status, setStatus] = useState("normal");
+  const [status, setStatus] = useState('normal')
   const [price, setPrice] = useState(0)
   const [storage, setStorage] = useState(8)
   const [event, dispatch] = useReducer(createModalReducer, {
@@ -31,7 +31,7 @@ const CreateModal: FC<Props> = (props) => {
     memo: ''
   })
 
-  async function getPrice(type: string): Promise<void> {
+  async function getPrice (type: string): Promise<void> {
     forceUpdate()
     await axios.get(`/api/prices/${type ?? 't3a.micro'}`)
       .then((res) => {
@@ -44,7 +44,7 @@ const CreateModal: FC<Props> = (props) => {
     void getPrice(event.type)
   }, [])
 
-  function portEnter(e: any): void {
+  function portEnter (e: any): void {
     if (e.keyCode === 13 || e.keyCode === 32) {
       const exists = event.ports.some((item: any) => item.value === event.port.replace(/\D/g, '')) as boolean
       if (!exists) {
@@ -56,9 +56,9 @@ const CreateModal: FC<Props> = (props) => {
     }
   }
 
-  async function create(): Promise<void> {
+  async function create (): Promise<void> {
     forceUpdate()
-    setStatus("loading");
+    setStatus('loading')
     await axios('/api/instances', {
       method: 'POST',
       headers: {
@@ -75,19 +75,18 @@ const CreateModal: FC<Props> = (props) => {
         memo: event.memo
       }
     }).then(() => {
-      setStatus("success");
+      setStatus('success')
       navigate('/')
-   }).catch(() => { setStatus("error") })
+    }).catch(() => { setStatus('error') })
   }
 
   return (
     <Body style={{ display: props.display ? 'block' : 'none' }}>
       <Main>
-        {status === "normal" ?
-          <></>
-          :
-          status === "success" ?
-            <Alert
+        {status === 'normal'
+          ? <></>
+          : status === 'success'
+            ? <Alert
               dismissible
               statusIconAriaLabel="Success"
               type="success"
@@ -99,9 +98,8 @@ const CreateModal: FC<Props> = (props) => {
             >
               잠시 후 새로고침 됩니다.
             </Alert>
-            :
-            status === "error" ?
-              <Alert
+            : status === 'error'
+              ? <Alert
                 statusIconAriaLabel="Error"
                 type="error"
                 header={
@@ -112,8 +110,7 @@ const CreateModal: FC<Props> = (props) => {
               >
                 잠시 후 다시시도 해주세요!
               </Alert>
-              :
-              <Alert
+              : <Alert
                 statusIconAriaLabel="Warning"
                 type="warning"
                 header={
@@ -135,7 +132,7 @@ const CreateModal: FC<Props> = (props) => {
           <input className="input" onChange={(e) => { dispatch({ type: 'setName', name: e.target.value }) }} placeholder="이름 | (예: capstone-2023-1-4)"></input>
           <input className="input" onChange={(e) => { dispatch({ type: 'setDescription', description: e.target.value }) }} placeholder="목적 | (예: 2023년 1학기 캡스톤 #4)"></input>
           <input className="input" onChange={(e) => { dispatch({ type: 'setOwner', owner: e.target.value }) }} placeholder="관리자 | (예: 박민혁)"></input>
-          <input className="input" onChange={(e) => { dispatch({ type: 'setType', instance: e.target.value }); void getPrice(e.target.value, event.storage) }} list="typeList" placeholder="인스턴스 타입 | t3a.micro"></input>
+          <input className="input" onChange={(e) => { dispatch({ type: 'setType', instance: e.target.value }); void getPrice(e.target.value) }} list="typeList" placeholder="인스턴스 타입 | t3a.micro"></input>
           <datalist id="typeList" defaultValue={'t3a.micro'}>
             <option value={'t3a.micro'}>t3a.micro</option>
             <option value={'t3a.nano'}>t3a.nano</option>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { useState, type FC, FormEvent } from 'react'
+import { useState, type FC, type FormEvent } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { styled } from 'styled-components'
 

diff --git a/src/components/UpdateModal.tsx b/src/components/UpdateModal.tsx
@@ -19,12 +19,12 @@ const UpdateModal: FC<Props> = (props) => {
   const [, updateState] = useState<any>()
   const forceUpdate = useCallback(() => { updateState({}) }, [])
   const navigate = useNavigate()
-  const [status, setStatus] = useState("normal");
+  const [status, setStatus] = useState('normal')
   const [price, setPrice] = useState(0)
   const [storage, setStorage] = useState(0)
   const [isIpChange, setChange] = useState(false)
 
-  async function getPrice(type: string): Promise<void> {
+  async function getPrice (type: string): Promise<void> {
     forceUpdate()
     await axios.get(`/api/prices/${type ?? 't3a.micro'}`)
       .then((res) => {
@@ -37,9 +37,9 @@ const UpdateModal: FC<Props> = (props) => {
     void getPrice(props.instance.type)
   }, [price])
 
-  function portEnter(e: any): void {
+  function portEnter (e: any): void {
     if (e.keyCode === 13 || e.keyCode === 32) {
-      const exists = props.instance.ports.some((item: any) => item.value === props.instance.port.replace(/\D/g, '')) as boolean
+      const exists = props.instance.ports.some((item: any) => item.value === props.instance.port.replace(/\D/g, ''))
       if (!exists) {
         props.instanceAction({ type: 'setPort', port: '' })
         props.instanceAction({
@@ -49,9 +49,9 @@ const UpdateModal: FC<Props> = (props) => {
     }
   }
 
-  async function update(): Promise<void> {
+  async function update (): Promise<void> {
     forceUpdate()
-    setStatus("loading");
+    setStatus('loading')
     await axios(`/api/instances/${props.uuid}`, {
       method: 'PUT',
       headers: {
@@ -64,23 +64,22 @@ const UpdateModal: FC<Props> = (props) => {
         owner: props.instance.owner,
         type: props.instance.type,
         storageSize: props.instance.storage,
-        ports: props.instance.ports.sort().join(','),
+        ports: props.instance.ports.sort((a, b) => (a.value > b.value ? -1 : 1)).join(','),
         memo: props.instance.memo
       }
     }).then(() => {
-      setStatus("success");
+      setStatus('success')
       navigate('/')
     }).catch(() => { setStatus('error') })
   }
 
   return (
     <Body style={{ display: props.display ? 'block' : 'none' }}>
       <Main>
-        {status === "normal" ?
-          <></>
-          :
-          status === "success" ?
-            <Alert
+        {status === 'normal'
+          ? <></>
+          : status === 'success'
+            ? <Alert
               dismissible
               statusIconAriaLabel="Success"
               type="success"
@@ -92,9 +91,8 @@ const UpdateModal: FC<Props> = (props) => {
             >
               잠시 후 새로고침 됩니다.
             </Alert>
-            :
-            status === "error" ?
-              <Alert
+            : status === 'error'
+              ? <Alert
                 statusIconAriaLabel="Error"
                 type="error"
                 header={
@@ -105,8 +103,7 @@ const UpdateModal: FC<Props> = (props) => {
               >
                 잠시 후 다시시도 해주세요!
               </Alert>
-              :
-              <Alert
+              : <Alert
                 statusIconAriaLabel="Warning"
                 type="warning"
                 header={

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,19 +1,7 @@
-import React from 'react'
+import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import { GlobalStyles } from './styles/globals'
-import { Toaster } from 'react-hot-toast'
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-)
-root.render(
-  <React.StrictMode>
-    <GlobalStyles />
-    <App />
-    <Toaster
-      position="bottom-right"
-      reverseOrder={false}
-    />
-  </React.StrictMode>
-)
+ReactDOM
+  .createRoot(document.getElementById('root') as HTMLDivElement)
+  .render(<StrictMode><App /></StrictMode>)
diff --git a/src/modules/InvitesReducer.ts b/src/modules/InvitesReducer.ts
@@ -1,6 +1,6 @@
 import { type InvitesAction, type InvitesState } from '../utils/interfaces'
 
-export default function invitesReducer(state: InvitesState, action: InvitesAction): any {
+export default function invitesReducer (state: InvitesState, action: InvitesAction): any {
   switch (action.type) {
     case 'setCategory':
       return { ...state, category: action.category }