bug fixes, add fontsource fonts, display enums (#20)

Co-authored-by: scottrepreneur <[email protected]>

apps/frontend/components/RaidCard.tsx

@@ -29,7 +29,6 @@ import {
   RAID_CATEGORY_DISPLAY,
   BUDGET_DISPLAY,
   GUILD_CLASS_ICON,
-  SKILLS_DISPLAY,
 } from '../utils/constants';
 import { displayDate } from '../utils/general';
 import MemberAvatarStack from './MemberAvatarStack';
@@ -52,7 +51,7 @@ const RaidCard: React.FC<RaidProps> = ({ raid, consultation }: RaidProps) => {
   const description = _.get(consultation, 'description');
   const budget =
     BUDGET_DISPLAY[_.get(consultation, 'budgetOption.budgetOption')];
-  const projectType = _.get(consultation, 'projectType.projectType');
+  const projectType = PROJECT_TYPE_DISPLAY(_.get(consultation, 'projectType.projectType'));
   const rolesRequired = _.map(_.get(raid, 'raidsRolesRequired', []), 'role');
 
   const link = raid ? `/raids/${id}/` : `/consultations/${id}/`;

apps/frontend/components/RaidDetailsCard.tsx

@@ -23,6 +23,7 @@ import {
   truncateAddress,
 } from '../utils';
 import InfoStack from './InfoStack';
+import { DELIVERY_PRIORITIES_DISPLAY, AVAILABLE_PROJECT_SPECS_DISPLAY, PROJECT_TYPE_DISPLAY } from '../utils/constants';
 
 interface RaidProps {
   raid?: IRaid;
@@ -97,7 +98,9 @@ const RaidDetailsCard: React.FC<RaidProps> = ({
   const keyLinkItems = [
     consultation?.link && {
       label: 'Project Specs',
-      details: _.get(consultation, 'availableProjectSpec.availableProjectSpec'),
+      details: AVAILABLE_PROJECT_SPECS_DISPLAY(
+        _.get(consultation, 'availableProjectSpec.availableProjectSpec')
+      ),
       link: consultation?.link,
     },
     _.get(consultation, 'consultationHash') && {
@@ -138,22 +141,28 @@ const RaidDetailsCard: React.FC<RaidProps> = ({
         },
         {
           label: 'Project Type',
-          details: _.get(consultation, 'projectType.projectType', '-'),
+          details: PROJECT_TYPE_DISPLAY(
+            _.get(consultation, 'projectType.projectType', '-')
+          ),
         },
         {
           label: 'Specs',
-          details: _.get(
-            consultation,
-            'availableProjectSpec.availableProjectSpec',
-            '-'
-          ),
+          details: AVAILABLE_PROJECT_SPECS_DISPLAY(
+            _.get(
+              consultation,
+              'availableProjectSpec.availableProjectSpec',
+              '-'
+            ),
+          )
         },
         {
           label: 'Delivery Priority',
-          details: _.get(
-            consultation,
-            'deliveryPriority.deliveryPriority',
-            '-'
+          details: DELIVERY_PRIORITIES_DISPLAY(
+            _.get(
+              consultation,
+              'deliveryPriority.deliveryPriority',
+              '-'
+            )
           ),
         },
       ].filter((x) => x),

apps/frontend/pages/_app.tsx

@@ -12,12 +12,13 @@ import { RGThemeProvider, useCustomToast } from '@raidguild/design-system';
 import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
 import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
 import { wagmiClient } from '../utils/wagmiClient';
 import { chains } from '../utils/chains';
 
 import '@rainbow-me/rainbowkit/styles.css';
 import { OverlayContextProvider } from '../contexts/OverlayContext';
+import "@fontsource/uncial-antiqua"
+import "@fontsource/texturina"
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
   const toast = useCustomToast();

apps/frontend/pages/consultations/[consultation].tsx

@@ -19,7 +19,7 @@ const Consultation = () => {
         subheader={<Heading>{_.get(consultation, 'name')}</Heading>}
         isLoading={false}
       >
-        <HStack align="flex-start">
+        <HStack align="flex-start" width="100%">
           <RaidDetailsCard consultation={consultation} />
           <Button>Create Raid</Button>
         </HStack>

apps/frontend/utils/constants.ts

@@ -54,13 +54,32 @@ export const PREFERRED_CONTACT = ['Discord', 'Email', 'Telegram'];
 
 export const PROJECT_TYPE = ['New', 'Existing'];
 
-export const PROJECT_TYPE_DISPLAY = {
-  NEW: 'New',
-  EXISTING: 'Existing',
+
+export const PROJECT_TYPE_DISPLAY = (projectType: string) => {
+  const projectTypeMap = {
+    NEW:'New',
+    EXISTING:'Existing',
+  };
+
+  if (!_.includes(_.keys(projectTypeMap), projectType)) return;
+
+  return projectTypeMap[projectType];
 };
 
 export const AVAILABLE_PROJECT_SPECS = ['Yes', 'Partial', 'None'];
 
+export const AVAILABLE_PROJECT_SPECS_DISPLAY = (spec: string) => {
+  const specsMap = {
+    YES:'Yes',
+    PARTIAL:'Partial',
+    NONE:'None',
+  };
+
+  if (!_.includes(_.keys(specsMap), spec)) return;
+
+  return specsMap[spec];
+};
+
 export const BUDGET = [
   'LESS_THAN_FIVE_THOUSAND',
   'FIVE_TO_TWENTY_THOUSAND',
@@ -83,6 +102,18 @@ export const DELIVERY_PRIORITIES = [
   'Polished & Inexpensive',
 ];
 
+export const DELIVERY_PRIORITIES_DISPLAY = (priority: string) => {
+  const deliveryPrioritiesMap = {
+    FAST_AND_POLISHED: 'Fast & Polished',
+    FAST_AND_INEXPENSIVE: 'Fast & Inexpensive',
+    POLISHED_AND_INEXPENSIVE: 'Polished & Inexpensive',
+  };
+
+  if (!_.includes(_.keys(deliveryPrioritiesMap), priority)) return;
+
+  return deliveryPrioritiesMap[priority];
+};
+
 export const SUBMISSION_TYPE = ['Paid', 'Unpaid'];
 
 export const SKILLS_DISPLAY_OPTIONS = [

package.json

@@ -15,6 +15,7 @@
     "@emotion/server": "11.4.0",
     "@emotion/styled": "11.9.3",
     "@fontsource/texturina": "^4.5.11",
+    "@fontsource/uncial-antiqua": "^4.5.10",
     "@nrwl/next": "14.4.2",
     "@raidguild/design-system": "^0.4.18",
     "@rainbow-me/rainbowkit": "^0.8.0",

yarn.lock

@@ -2663,6 +2663,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/texturina/-/texturina-4.5.11.tgz#6bb1e10d18198464f890406a502c11e480e4f317"
   integrity sha512-q/YCxLgsjF+RJRg17wPX4v/FkfDOPMFMjlTiLbXVsXErby9wqqYneTRHyjNFN64maE/FWG8IlW4c53T9w4nCuw==
 
+"@fontsource/uncial-antiqua@^4.5.10":
+  version "4.5.10"
+  resolved "https://registry.yarnpkg.com/@fontsource/uncial-antiqua/-/uncial-antiqua-4.5.10.tgz#ee86ccd852810b62d451ae9afe929b0d9efc1e38"
+  integrity sha512-FRM+PUZHv7q84vG4iMzy+UdeE2bz6vOaB48edOex/B8S4z/OzGn0FE1fb537kPWYIg1EsodTskksHlYvKtEw4Q==
+
 "@graphql-typed-document-node/core@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
@@ -12039,7 +12044,6 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-
 react-cmdk@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-cmdk/-/react-cmdk-1.3.7.tgz#9d8a4da3f1c8110b2935df0f8de67f655b3300aa"
@@ -12062,7 +12066,6 @@ react-datepicker@^4.8.0:
     react-onclickoutside "^6.12.0"
     react-popper "^2.2.5"
 
-
 [email protected], react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"