Single trade response feature (#148)

* basic cards * wireframed trade/single/response * styled results * font color/style * submit state, no response and error handling * changed grid bg from odd to even children * add filtering feat for results * add tests
ed-pilots-network · Jul 13, 2024 · 0030547 · 0030547
1 parent 042744a
commit 0030547
Show file tree

Hide file tree

Showing 19 changed files with 1,436 additions and 127 deletions.
diff --git a/app/_components/commodities/CommodityFormResponse.tsx b/app/_components/commodities/CommodityFormResponse.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 
 import { VStack } from '@chakra-ui/react';
-import { compareNumbers, legendItems, legendItemsDark } from './helpers';
+import { legendItems, legendItemsDark } from '../utility/common-components';
+import { compareNumbers } from '../utility/common-functions';
 import { FormResponseHeading, GridHeadings, GridBodyItem } from './components';
 import GetColor from '@/app/_hooks/colorSelector';
 import useColorMode from '@/app/_hooks/useColorMode';
-import { ICommodityFormResponse } from '@/types/index';
+import type { ICommodityFormResponse } from '@/types/index';
 
 interface ICommodityFormResponseProps {
   commodityResponse: ICommodityFormResponse[];

diff --git a/app/_components/commodities/MobileCommodityFormResponse.tsx b/app/_components/commodities/MobileCommodityFormResponse.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 
 import { Table, TableContainer, VStack } from '@chakra-ui/react';
-import { compareNumbers, legendItems, legendItemsDark } from './helpers';
+import { legendItems, legendItemsDark } from '../utility/common-components';
+import { compareNumbers } from '../utility/common-functions';
 import {
   FormResponseHeading,
   GridHeadingsMobile,

diff --git a/app/_components/commodities/components/FormResponseHeading.tsx b/app/_components/commodities/components/FormResponseHeading.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { Flex, HStack, Heading, Image, Text, VStack } from '@chakra-ui/react';
-import { ICommodityFormResponse } from '@/types/index';
 import PageHeading from '../../utility/pageHeading';
+import type { ICommodityFormResponse } from '@/types/index';
 
 interface IFormResponseHeadProps {
   commodityResponse: ICommodityFormResponse[];

diff --git a/app/_components/commodities/components/GridBodyItem.tsx b/app/_components/commodities/components/GridBodyItem.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 import { formatThousands } from '@/app/_hooks/textFormatting';
 import { GridItem, SimpleGrid, Text } from '@chakra-ui/react';
 import GetColor from '@/app/_hooks/colorSelector';
-import { calculateTimeDifference, renderStationTypeIcon } from '../helpers';
-import { ICommodityFormResponse } from '@/types/index';
+import { RenderStationTypeIcon } from '../../utility/common-components';
+import { calculateTimeDifference } from '../../utility/common-functions';
+import type { ICommodityFormResponse } from '@/types/index';
 
 interface IGridBodyItemProps {
   isDark: boolean;
@@ -53,7 +54,7 @@ const GridBodyItem: React.FC<IGridBodyItemProps> = ({
       marginY="auto"
       maxWidth="90%"
     >
-      {renderStationTypeIcon(commodity.station, isDark)}
+      <RenderStationTypeIcon station={commodity.station} isDark={isDark} />
       <Text overflowX="scroll" whiteSpace="nowrap">
         {commodity.station.name}
       </Text>

diff --git a/app/_components/commodities/components/GridBodyItemMobile.tsx b/app/_components/commodities/components/GridBodyItemMobile.tsx
@@ -5,7 +5,8 @@ import { faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { formatThousands } from '@/app/_hooks/textFormatting';
 import { Flex, Icon, Tbody, Td, Text, Tr } from '@chakra-ui/react';
 import { ICommodityFormResponse } from '@/app/_types/commodity';
-import { calculateTimeDifference, renderStationTypeIcon } from '../helpers';
+import { RenderStationTypeIcon } from '../../utility/common-components';
+import { calculateTimeDifference } from '../../utility/common-functions';
 import GetColor from '@/app/_hooks/colorSelector';
 
 interface IGridBodyItemProps {
@@ -28,7 +29,7 @@ const GridBodyItemMobile: React.FC<IGridBodyItemProps> = ({
         <Text>Station Name: {commodity.station.name}</Text>
         <Flex gap={2}>
           Station Type:
-          {renderStationTypeIcon(commodity.station, isDark)}
+          <RenderStationTypeIcon station={commodity.station} isDark={isDark} />
         </Flex>
         <Text>
           Arrival Distance: {commodity.station.arrivalDistance ?? '?'} ls

diff --git a/app/_components/trade-routes/single/Form.tsx b/app/_components/trade-routes/single/Form.tsx
@@ -102,10 +102,6 @@ const Form: React.FC<FormProps> = ({
     onSubmitHandler(data);
   };
 
-  // TODO: cargoCapacity needs to be required and have a default
-  // same goes for maxRouteDistance and maxArrivalDistance
-  // will need to shuffle these inputs out of the collapse
-  // radio options need to return false if not selected
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Grid

diff --git a/app/_components/trade-routes/single/response/Legend.tsx b/app/_components/trade-routes/single/response/Legend.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Flex, HStack, Heading, Image, Text, VStack } from '@chakra-ui/react';
+import {
+  legendItems,
+  legendItemsDark,
+} from '../../../utility/common-components';
+import useColorMode from '@/app/_hooks/useColorMode';
+import PageHeading from '../../../utility/pageHeading';
+
+const ResponseLegend = () => {
+  const { isDark } = useColorMode();
+  return (
+    <>
+      <PageHeading heading="Top Trades" />
+      <HStack>
+        <Heading as="h3" size="sm" hideBelow="md">
+          Legend:
+        </Heading>
+        <Flex gap={4}>
+          {isDark
+            ? legendItems.map((item, index) => (
+                <VStack key={index} width="fit-content">
+                  <Text size="xs">{item.text}:</Text>
+                  <Image src={item.src} alt={item.alt} boxSize="20px" />
+                </VStack>
+              ))
+            : legendItemsDark.map((item, index) => (
+                <VStack key={index} width="fit-content">
+                  <Text size="xs">{item.text}:</Text>
+                  <Image src={item.src} alt={item.alt} boxSize="20px" />
+                </VStack>
+              ))}
+        </Flex>
+      </HStack>
+    </>
+  );
+};
+
+export default ResponseLegend;