feat: prices floor

GBSWHS · Aug 19, 2023 · 8bbb2bb · 8bbb2bb
1 parent bf6245f
commit 8bbb2bb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/src/components/CreateModal.tsx b/src/components/CreateModal.tsx
@@ -32,7 +32,7 @@ const CreateModal: FC<Props> = (props) => {
     forceUpdate()
     await axios.get(`/api/prices/${type ?? 't3a.micro'}`)
       .then((res) => {
-        setPrice(((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(storage) ? 0 : storage) * 0.1))
+        setPrice(Math.floor(((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(storage) ? 0 : storage) * 0.1)))
       })
       .catch((err) => { console.error(err) })
   }

diff --git a/src/components/UpdateModal.tsx b/src/components/UpdateModal.tsx
@@ -25,7 +25,7 @@ const UpdateModal: FC<Props> = (props) => {
     forceUpdate()
     await axios.get(`/api/prices/${type ?? 't3a.micro'}`)
       .then((res) => {
-        setPrice(((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(storage) ? 0 : storage) * 0.1))
+        setPrice(Math.floor(((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(storage) ? 0 : storage) * 0.1)))
       })
       .catch((err) => { console.error(err) })
   }

diff --git a/src/pages/Instances.tsx b/src/pages/Instances.tsx
@@ -56,7 +56,7 @@ const Instances: FC = () => {
         'Content-Type': 'application/json'
       }
     }).then((res) => {
-      setPrices(((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(res.data.body.storageSize) ? 0 : res.data.body.storageSize) * 0.1))
+      setPrices(Math.floor((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(res.data.body.storageSize) ? 0 : res.data.body.storageSize) * 0.1))
     })
   }, [])
 

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -7,7 +7,7 @@ import ButtonScape from '@cloudscape-design/components/button'
 import updateModalReducer from '../modules/ModalReducer'
 import UpdateModal from '../components/UpdateModal'
 import { Body, Title, Top } from '../styles/globals'
-import { useLocation, useParams } from 'react-router-dom'
+import { Link, useLocation, useParams } from 'react-router-dom'
 import { Alert, StatusIndicator, Table } from '@cloudscape-design/components'
 import { InstancesType } from '../utils/interfaces'
 import showStatus from '../utils/showStatus'
@@ -19,6 +19,7 @@ const Search: FC = () => {
   const location = useLocation()
   const serachParams = new URLSearchParams(location.search)
   const page = serachParams.get('page') ?? '0'
+  const [prices, setPrices] = useState(0);
   const [max, setMax] = useState(0)
   const [uuid, setUuid] = useState('')
   const [instances, setInstances] = useState([])
@@ -48,6 +49,17 @@ const Search: FC = () => {
     }).catch((err) => { console.error(err) })
   }, [serachParams.get('page')])
 
+  useEffect(() => {
+    axios('/api/prices', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then((res) => {
+      setPrices(Math.floor((res.data.body.pricePerHour * 24) * 30) + ((Number.isNaN(res.data.body.storageSize) ? 0 : res.data.body.storageSize) * 0.1))
+    })
+  }, [])
+
   async function deleteInstance(uuid: string): Promise<void> {
     if (confirm('정말 삭제 하시겠습니까?')) {
       await axios(`/api/instances/${uuid}`, {
@@ -156,13 +168,16 @@ const Search: FC = () => {
       <Top>
         <Title>인스턴스</Title>
         <div>
-          <a href={parseInt(page) + 1 > 1 ? `/instances?page=${parseInt(page) - 1}` : window.location.href}>
+          <p>
+            총 {prices}$/월
+          </p>
+          <Link to={parseInt(page) + 1 > 1 ? `/instances?page=${parseInt(page) - 1}` : window.location.href}>
             <svg className={parseInt(page) + 1 > 1 ? 'enabled' : 'disabled'} width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid meet"><path fillRule="evenodd" clipRule="evenodd" d="M16.2071 19.7071C16.5976 19.3166 16.5976 18.6834 16.2071 18.2929L9.91421 12L16.2071 5.70711C16.5976 5.31658 16.5976 4.68342 16.2071 4.29289C15.8166 3.90237 15.1834 3.90237 14.7929 4.29289L7.79289 11.2929C7.40237 11.6834 7.40237 12.3166 7.79289 12.7071L14.7929 19.7071C15.1834 20.0976 15.8166 20.0976 16.2071 19.7071Z"></path></svg>
-          </a>
+          </Link>
           <a>{serachParams.get('page') !== null ? parseInt(page) + 1 : 1}</a>
-          <a href={parseInt(page) + 1 >= max ? window.location.href : `/instances?page=${parseInt(page) + 1}`}>
+          <Link to={parseInt(page) + 1 >= max ? window.location.href : `/instances?page=${parseInt(page) + 1}`}>
             <svg className={parseInt(page) + 1 >= max ? 'disabled' : 'enabled'} width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid meet"><path fillRule="evenodd" clipRule="evenodd" d="M7.79289 19.7071C7.40237 19.3166 7.40237 18.6834 7.79289 18.2929L14.0858 12L7.79289 5.70711C7.40237 5.31658 7.40237 4.68342 7.79289 4.29289C8.18342 3.90237 8.81658 3.90237 9.20711 4.29289L16.2071 11.2929C16.5976 11.6834 16.5976 12.3166 16.2071 12.7071L9.20711 19.7071C8.81658 20.0976 8.18342 20.0976 7.79289 19.7071Z"></path></svg>
-          </a>
+          </Link>
           <Button style={{ backgroundColor: '#ff9900' }} onClick={() => { setCreateModal(true) }}>인스턴스 생성</Button>
         </div>