feat: update for non-covid hospitals

hendraaagil · Jul 11, 2021 · d5e3482 · d5e3482 · vercel · Jul 11, 2021
1 parent 66870af
commit d5e3482
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 25 deletions.
diff --git a/src/components/HospitalCard.js b/src/components/HospitalCard.js
@@ -1,13 +1,32 @@
 import useSWR from 'swr';
 import { useRouter } from 'next/router';
-import { Button, ButtonGroup, Heading, Stack, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Divider,
+  Heading,
+  Stack,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import { FaArrowRight, FaMapMarkerAlt, FaPhone } from 'react-icons/fa';
 
 const fetcher = (...args) => fetch(...args).then((res) => res.json());
 
 const HospitalCard = ({ hosp, type }) => {
-  const { address, bed_availability: bed, id, info, name, phone, queue } = hosp;
+  const {
+    address,
+    available_beds: beds,
+    bed_availability: bed,
+    id,
+    info,
+    name,
+    phone,
+    queue,
+  } = hosp;
   const router = useRouter();
+  const bgCard = useColorModeValue('gray.50', 'gray.700');
 
   const { data } = useSWR(
     `${process.env.NEXT_PUBLIC_API_URL}/get-hospital-map?hospitalid=${id}`,
@@ -28,29 +47,61 @@ const HospitalCard = ({ hosp, type }) => {
             {name}
           </Heading>
           <Text fontWeight="500">{address}</Text>
-          <Text size="xs">{info}</Text>
+          {+type === 1 && <Text fontSize="sm">{info}</Text>}
         </Stack>
-        <Stack
-          py={2}
-          px={3}
-          align="center"
-          justify="center"
-          bg={bed === 0 && 'red.500'}
-          rounded="md"
-          shadow="inner"
-        >
-          {bed === 0 ? (
-            <Text fontWeight="600">Penuh!</Text>
-          ) : (
-            <Stack textAlign="center">
-              <Text fontWeight="600">Tersedia : {bed}</Text>
-              <Text fontSize="sm" fontWeight="500">
-                {queue || 'Tanpa'} antrean
+        {+type === 1 && (
+          <Stack
+            py={2}
+            px={3}
+            align="center"
+            justify="center"
+            bg={bed === 0 && 'red.500'}
+            rounded="md"
+            shadow="inner"
+          >
+            {bed === 0 ? (
+              <Text fontWeight="600">Penuh!</Text>
+            ) : (
+              <Stack textAlign="center">
+                <Text fontWeight="600">Tersedia : {bed}</Text>
+                <Text fontSize="sm" fontWeight="500">
+                  {queue || 'Tanpa'} antrean
+                </Text>
+              </Stack>
+            )}
+          </Stack>
+        )}
+      </Stack>
+      {beds && (
+        <Stack direction={['column', 'row']} justify="space-between">
+          {beds.map((be) => (
+            <Box
+              key={be.bed_class}
+              p={3}
+              textAlign="center"
+              bg={bgCard}
+              rounded="md"
+              shadow="inner"
+              borderWidth={be.available <= 0 && '2px'}
+              borderColor={be.available <= 0 && 'red.500'}
+            >
+              <Text
+                fontSize="2xl"
+                fontWeight="600"
+                color={be.available <= 0 && 'red.500'}
+              >
+                {be.available}
               </Text>
-            </Stack>
-          )}
+              <Text fontWeight="500">{be.bed_class}</Text>
+              <Text fontWeight="500" fontSize="sm">
+                {be.room_name}
+              </Text>
+              <Divider my={2} />
+              <Text fontSize="xs">{be.info}</Text>
+            </Box>
+          ))}
         </Stack>
-      </Stack>
+      )}
       <Stack
         direction={['column', 'column', 'row']}
         justify="space-between"

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -94,9 +94,7 @@ const Search = () => {
         <Stack direction={['column', 'column', 'row']} py={2}>
           <Text>Pilih Tempat Tidur : </Text>
           <Radio value="1">Covid 19</Radio>
-          <Radio value="2" isDisabled>
-            Non-Covid 19 (API dalam perbaikan)
-          </Radio>
+          <Radio value="2">Non-Covid 19</Radio>
         </Stack>
       </RadioGroup>
       <Button