💄 Tidy up Expo page

Move truncate function to util file since now used on multiple pages/components
ducompsoc · Oct 28, 2024 · 1bc7312 · 1bc7312
1 parent cb60ba6
commit 1bc7312
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/client/src/components/judge/ProjectEntry.tsx b/client/src/components/judge/ProjectEntry.tsx
@@ -1,5 +1,6 @@
 import { twMerge } from 'tailwind-merge';
 import DragHamburger from './dnd/DragHamburger';
+import {truncate} from "../../util";
 
 interface ProjectEntryProps {
     project: SortableJudgedProject;
@@ -11,13 +12,6 @@ const ProjectEntry = ({ project, ranking }: ProjectEntryProps) => {
         return null;
     }
 
-    // Will truncate a string to width characters exactly,
-    // adding a dot at the end if the length is > than width chars
-    const truncate = (s: string, width: number = 8) => {
-        if (s.length <= width) return s;
-        return s.substring(0, width-1) + '.';
-    };
-
     let rankColor = 'text-lightest';
     switch (ranking) {
         case 1:

diff --git a/client/src/pages/Expo.tsx b/client/src/pages/Expo.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import Container from '../components/Container';
 import { getRequest } from '../api';
-import { errorAlert } from '../util';
+import {errorAlert, truncate} from '../util';
 
 const Expo = () => {
     const [rawProjects, setRawProjects] = useState<PublicProject[]>([]);
@@ -40,7 +40,7 @@ const Expo = () => {
         <Container noCenter>
             <h1 className="mt-4 text-4xl text-center font-bold">Project Expo</h1>
             <h2 className="text-2xl text-center font-bold text-primary">
-                {import.meta.env.VITE_JURY_NAME}
+                <a href="/">{import.meta.env.VITE_JURY_NAME}</a>
             </h2>
             <table className="mb-4">
                 <thead>
@@ -59,7 +59,7 @@ const Expo = () => {
                                 'px-4 py-2 cursor-pointer text-left ' + (!nameSort && 'underline')
                             }
                         >
-                            Table
+                            Location
                         </th>
                     </tr>
                 </thead>
@@ -68,7 +68,7 @@ const Expo = () => {
                         <tr key={idx}>
                             <td className="px-4 py-2">
                                 <a href={project.url} target="_blank" rel="noopener noreferrer">
-                                    {project.name}
+                                    {truncate(project.name, 20)}
                                 </a>
                             </td>
                             <td className="px-4 py-2">{project.location}</td>

diff --git a/client/src/util.tsx b/client/src/util.tsx
@@ -61,4 +61,11 @@ function errorAlert<T>(res: FetchResponse<T>) {
     console.error(err);
 }
 
-export { timeSince, arrow, fixIfFloat, fixIfFloatDigits, errorAlert, showTopFive };
+// Will truncate a string to width characters exactly,
+// adding a dot at the end if the length is > than width chars
+function truncate(s: string, width: number = 8) {
+    if (s.length <= width) return s;
+    return s.substring(0, width-1) + '.';
+}
+
+export { timeSince, arrow, fixIfFloat, fixIfFloatDigits, errorAlert, showTopFive, truncate };