Merge pull request #251 from HackGT/248-add-character-limit-on-projec…

…t-names 248 add character limit on project names
HackGT · Jan 27, 2025 · a0fb41a · a0fb41a
2 parents 4bd9936 + 0952afb
commit a0fb41a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/create/form/DevpostInfoForm.tsx b/src/components/create/form/DevpostInfoForm.tsx
@@ -84,10 +84,11 @@ const DevpostInfoForm: React.FC<Props> = props => {
           <Col {...FORM_LAYOUT.full}>
             <Form.Item
               name="name"
-              rules={[FORM_RULES.requiredRule]}
+              rules={[FORM_RULES.requiredRule, FORM_RULES.maxLengthRule]}
               label="Project Name (should match Devpost submission name)"
             >
-              <Input placeholder="Alexa Assistant" />
+              <Input placeholder="Alexa Assistant" maxLength={FORM_RULES.maxLengthRule.max} />
+
             </Form.Item>
           </Col>
         </Row>

diff --git a/src/components/epicenter/JudgingBox.tsx b/src/components/epicenter/JudgingBox.tsx
@@ -147,8 +147,10 @@ const JudgingBox: React.FC<Props> = props => {
           <AccordionButton _expanded={{ bg: 'purple.400', color: 'white' }}>
             <Box as="span" flex='1' textAlign='left'>
               <Flex alignItems='center' justify='space-between'>
-                <Text><Badge>{props.project.id}</Badge> {props.project.name} </Text>
-
+                <Text>
+                  <Badge>{props.project.id}</Badge> 
+                  <Text mx={1.5} as="span">{props.project.name}</Text>
+                </Text>
                 <Flex gap={4}>
                   <Badge colorScheme={colorSchemeMapper[props.project.round]}>R: {props.project.round}</Badge>
 

diff --git a/src/util/util.ts b/src/util/util.ts
@@ -15,6 +15,11 @@ export const FORM_RULES = {
     type: "email",
     message: "Please enter a valid email.",
   } as Rule,
+  maxLengthRule: {
+    type: "number",
+    max: 30,
+    message: 'Project name cannot exceed 30 characters',
+  } as Rule & { max?: number },
 };
 
 export const FORM_LAYOUT = {