Merge branch 'code_organizing_branch' into sebbe-pre-dev_branch

Cleaned up and organized the code a bit better using a constants.ts file.
ScilifelabDataCentre · Jan 30, 2024 · 6a3bf9e · 6a3bf9e
2 parents c243bdb + d11bbbe
commit 6a3bf9e
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 48 deletions.
diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx
@@ -1,14 +1,13 @@
 import { ReactElement } from "react";
 
-export default function CardComponent(prop: { classes: string, title: string, text: string, button: string }): ReactElement {
+export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement {
     const title: ReactElement = (
         <h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
     );
 
-    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
     const button: ReactElement = (
         <div className="card-actions justify-center">
-            <button className={buttonClasses}>{prop.button}</button>
+            <button className={prop.buttonClasses}>{prop.button}</button>
         </div>
     );
 

diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx
@@ -1,24 +1,22 @@
 import { ReactElement } from 'react';
 import {ILink, ISVG} from '../interfaces/types';
 import { Link } from 'react-router-dom';
+import { LINK_CLASSES } from '../constants';
 
 export default function FooterComponent(): ReactElement {
-
-  var footerClasses: string = 'footer p-10 bg-base-100 text-base-content';
 
-  var linkClasses: string = 'link link-hover';
   var linksCol1: { [id: string] : ILink; } = {
-      'l1': { text: 'Anonymization Tool', classes: linkClasses, link: '/' },
-      'l2': { text: 'Data Search', classes: linkClasses, link: '/' },
-      'l3': { text: 'Data Types', classes: linkClasses, link: '/' },
-      'l4': { text: 'Events & News', classes: linkClasses, link: '/' },
+      'l1': { text: 'Anonymization Tool', classes: LINK_CLASSES, link: '/' },
+      'l2': { text: 'Data Search', classes: LINK_CLASSES, link: '/' },
+      'l3': { text: 'Data Types', classes: LINK_CLASSES, link: '/' },
+      'l4': { text: 'Events & News', classes: LINK_CLASSES, link: '/' },
   };
 
   var linksCol2: { [id: string] : ILink; } = {
-      'l1': { text: 'About us', classes: linkClasses, link: '/' },
-      'l2': { text: 'Contact', classes: linkClasses, link: '/' },
-      'l3': { text: 'Open Source Contribution', classes: linkClasses, link: '/' },
-      'l4': { text: 'Privacy Policy', classes: linkClasses, link: '/privacy' },
+      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' },
+      'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/' },
+      'l3': { text: 'Open Source Contribution', classes: LINK_CLASSES, link: '/' },
+      'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
   };
 
   var svgConfig: string[] = ['/', 'http://www.w3.org/2000/svg', '24', '24', '0 0 24 24', 'fill-current']
@@ -30,7 +28,7 @@ export default function FooterComponent(): ReactElement {
 
 
   return (
-    <footer className={footerClasses}>
+    <footer className='footer p-10 bg-base-100 text-base-content'>
       <nav>
       {Object.keys(linksCol1).map( key => (
           <Link className={linksCol1[key].classes} to={linksCol1[key].link}>{linksCol1[key].text}</Link>

diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
@@ -1,20 +1,19 @@
 import { Link, NavLink } from 'react-router-dom';
 import { ILink } from '../interfaces/types';
+import { BUTTON_TYPE_ONE, LINK_CLASSES } from '../constants';
 
 export default function HeaderComponent() {
 
-    var linkClasses: string = 'link link-hover';
     var links: { [id: string] : ILink; } = {
         'l1': { text: 'Random text for now', classes: 'pointer-events-none', link: '/#' },
-        'l2': { text: 'Data', classes: linkClasses, link: 'data' },
-        'l3': { text: 'Events & News', classes: linkClasses, link: 'eventsandnews' },
-        'l4': { text: 'Contact', classes: linkClasses, link: 'contact' },
-        'l5': { text: 'About', classes: linkClasses, link: 'about' },
+        'l2': { text: 'Data', classes: LINK_CLASSES, link: 'data' },
+        'l3': { text: 'Events & News', classes: LINK_CLASSES, link: 'eventsandnews' },
+        'l4': { text: 'Contact', classes: LINK_CLASSES, link: 'contact' },
+        'l5': { text: 'About', classes: LINK_CLASSES, link: 'about' },
     };
 
-    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
     var buttons: { [id: string] : ILink; } = {
-        'b1': { text: 'Sign In', classes: buttonClasses, link: 'signin' },
+        'b1': { text: 'Sign In', classes: BUTTON_TYPE_ONE, link: 'signin' },
     };
 
     return (

diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts
@@ -0,0 +1,11 @@
+// reused tailwind classes
+export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold";
+
+export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
+
+export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
+export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300';
+
+export const BODY_CLASSES: string = "bg-white space-y-6 p-14";
+
+export const LINK_CLASSES: string = 'link link-hover';
diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import CardComponent from "../components/CardComponent";
 import ImageCarouselComponent from "../components/ImageCarouselComponent";
 import TextBarComponent from "../components/TextBarComponent";
+import { BODY_CLASSES, BUTTON_TYPE_ONE, HEADER_ONE, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants';
 
 export default function HomePage(): ReactElement {
 
@@ -13,35 +14,33 @@ export default function HomePage(): ReactElement {
         trackPageView()
     }, [])
 
-    var headerOne: string = "text-left text-black text-[40px] font-semibold";
     var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
-    var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
-    var textBarClasses: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
+    var blackCardClasses: string = "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
     var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node";
 
     return (
         <div>
-            <TextBarComponent classes={textBarClasses} text={textBarContent} />
-            <div className="bg-white space-y-14">
+            <TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
+            <div className={BODY_CLASSES}>
             <ImageCarouselComponent />
             <div className="grid grid-cols-2 gap4">
                 <div className="flex flex-col space-y-1.5 ...">
-                    <h1 className={headerOne}>Latest News</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+                    <h1 className={HEADER_ONE}>Latest News</h1>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
                 </div>
                 <div className="flex flex-col space-y-1.5 ...">
-                    <h1 className={headerOne}>Upcoming Events</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+                    <h1 className={HEADER_ONE}>Upcoming Events</h1>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
+                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
                 </div>
             </div>
                 <div className="grid grid-cols-2">
-                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
-                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
+                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
+                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
                 </div>
             </div>
         </div>

diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx
@@ -1,6 +1,13 @@
 import React, { ReactElement } from 'react';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import TextBarComponent from '../components/TextBarComponent';
+import {
+    BODY_CLASSES,
+    BUTTON_TYPE_ONE,
+    BUTTON_TYPE_TWO,
+    HEADER_ONE,
+    PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
+} from '../constants';
 
 export default function PrivacyPage(): ReactElement {
     const { trackPageView,} = useMatomo()
@@ -10,8 +17,6 @@ export default function PrivacyPage(): ReactElement {
         trackPageView()
     }, [])
 
-    var headerOne: string = "text-left text-black text-[40px] font-semibold";
-    var textBarClasses: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
     var textBarContent: string = "Transparency is one of our guiding principles. Get acquainted with how we're creating a secure space for you.";
     var privacyDescription = `
                             Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
@@ -35,31 +40,29 @@ export default function PrivacyPage(): ReactElement {
                             `;
 
     var alertMessage = "we use cookies for no reason.";
-    var buttonDenyClasses = "btn btn-sm";
-    var buttonAcceptClasses = "btn btn-sm btn-primary";
 
     return (
         <>
-            <TextBarComponent classes={textBarClasses} text={textBarContent} />
-            <div className="bg-white space-y-6 p-14">
+            <TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
+            <div className={BODY_CLASSES}>
                 <div className="text-sm breadcrumbs">
                 <ul>
                     <li><a>Home</a></li> 
                     <li><a>Documents</a></li> 
                     <li>Add Document</li>
                 </ul>
                 </div>
-                <div className={headerOne}>Privacy Policy</div>
+                <div className={HEADER_ONE}>Privacy Policy</div>
                 <div className="divider">Default</div>
                 <p>{privacyDescription}</p>
                 <div className="divider">Default</div>
                 <p>{trackingMessage}</p>
                 <div role="alert" className="alert">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                     <span>{alertMessage}</span>
-                    <div>
-                        <button className={buttonDenyClasses}>Deny</button>
-                        <button className={buttonAcceptClasses}>Accept</button>
+                    <div className="space-x-2">
+                        <button className={BUTTON_TYPE_TWO}>Deny</button>
+                        <button className={BUTTON_TYPE_ONE}>Accept</button>
                     </div>
                 </div>
             </div>