Merge pull request acidonper#11 from acidonper/develop

Develop

Author: acidonper

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

public/quarkus.png

@@ -0,0 +1,14 @@
+import { AppService } from './AppService';
+
+describe('AppService Interface', () => {
+  it('should instantiate a AppService Object', () => {
+    const appService: AppService = {
+      id: '1',
+      jump: '/jump_path',
+      name: '/last_path',
+      img: 'jump1'
+    };
+
+    expect(appService).toBeTruthy();
+  });
+});

src/domain/AppService.spec.ts

@@ -0,0 +1,6 @@
+export interface AppService {
+    id: string;
+    jump: string;
+    name: string;
+    img: string;
+  }

src/domain/AppService.ts

@@ -6,11 +6,13 @@ export const sentJump = async (
   url: string,
   data: Jump
 ): Promise<ResponseBack> => {
+
+  const unix_date = new Date().getTime()
   // Define options with headers
   const options = {
     headers: {
       'Content-Type': 'application/json',
-      'React-modifier': 'true',
+      'React-modifier': unix_date,
     },
   };
 

src/infrastructure/postJump.tsx

@@ -13,6 +13,6 @@ describe('Test React Multi Component Header', () => {
 
     expect(logoDiv).toBeTruthy();
     expect(imgName).toBe('Jump Logo');
-    expect(h1[0]).toHaveTextContent('Jump App v2.0 DEV');
+    expect(h1[0]).toHaveTextContent('Jump App v2.');
   });
 });

src/ui/header/Header.spec.tsx

@@ -14,7 +14,7 @@ export const Header: React.FunctionComponent<Props> = () => {
         <a href='/'>
           <Logo size='xxl'></Logo>
         </a>
-        <h1>Jump App v2.0 DEV</h1>
+        <h1>Jump App v2.1 DEV</h1>
       </div>
     </>
   );

src/ui/header/Header.tsx

@@ -17,7 +17,6 @@
   display: flex;
   flex-direction: row;
   padding-top: var(--m);
-  padding-left: var(--l);
 }
 
 .jumps-buttons-images-item {
@@ -61,7 +60,7 @@
   background-image: var(--secondary-color);
   color: var(--on-secondary-color);
   padding: var(--l);
-  margin-left: var(--xl);
+  margin-left: var(--l);
   display: flex;
   min-width: 25vh;
   flex-direction: column;

src/ui/home/Home.module.css

@@ -3,6 +3,7 @@ import { bind } from '../../utils/bind';
 import styles from './Home.module.css';
 import { sentJump } from '../../infrastructure/postJump';
 import { ResponseBack } from '../../domain/ResponseBack';
+import { AppService } from '../../domain/AppService';
 import { JumpLog } from '../../domain/JumpLog';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { Jump } from '../../domain/Jump';
@@ -17,25 +18,32 @@ export const Home: React.FunctionComponent<Props> = () => {
   const appSpringboot =
     process.env.REACT_APP_SPRINGBOOT || 'http://springboot:8443';
   const appPython = process.env.REACT_APP_PYTHON || 'http://python:8444';
+  const appQuarkus = process.env.REACT_APP_QUARKUS || 'http://quarkus:8080';
 
-  const golang = {
+  const golang: AppService = {
     id: '1',
     jump: appGolang,
     name: 'Golang',
     img: './golang.png'
   };
-  const springboot = {
+  const springboot: AppService = {
     id: '2',
     jump: appSpringboot,
     name: 'Springboot',
     img: './springboot.png'
   };
-  const python = {
+  const python: AppService = {
     id: '3',
     jump: appPython,
     name: 'Python',
     img: './python.png'
   };
+  const quarkus: AppService = {
+    id: '4',
+    jump: appQuarkus,
+    name: 'Quarkus',
+    img: './quarkus.png'
+  };
 
   const jumps = [golang, springboot, python];
   const jumpLogTest = {
@@ -87,33 +95,8 @@ export const Home: React.FunctionComponent<Props> = () => {
       setCallLogs({ ...item });
     }
   };
-
-  const addGoJump = () => {
-    const item = { ...golang };
-    if (data.length > 0) {
-      const newid = parseInt(data[data.length - 1].id) + 1;
-      item.id = newid.toString();
-      console.log(item);
-      setData([...data, item]);
-    } else {
-      item.id = '1';
-      setData([item]);
-    }
-  };
-  const addSpJump = () => {
-    const item = { ...springboot };
-    if (data.length > 0) {
-      const newid = parseInt(data[data.length - 1].id) + 1;
-      item.id = newid.toString();
-      console.log(item);
-      setData([...data, item]);
-    } else {
-      item.id = '1';
-      setData([item]);
-    }
-  };
-  const addPyJump = () => {
-    const item = { ...python };
+  const addJump = (obj: AppService) => {
+    const item = { ...obj };
     if (data.length > 0) {
       const newid = parseInt(data[data.length - 1].id) + 1;
       item.id = newid.toString();
@@ -140,28 +123,36 @@ export const Home: React.FunctionComponent<Props> = () => {
             <div className={cx('jumps-buttons-images')}>
               <div className={cx('jumps-buttons-images-item')}>
                 <img
-                  onClick={addSpJump}
+                  onClick={() => addJump(springboot)}
                   src={springboot.img}
                   alt={springboot.name}
                   className={cx('jumps-buttons-button-img')}
                 />
               </div>
               <div className={cx('jumps-buttons-images-item')}>
                 <img
-                  onClick={addGoJump}
+                  onClick={() => addJump(golang)}
                   src={golang.img}
                   alt={golang.name}
                   className={cx('jumps-buttons-button-img')}
                 />
               </div>
               <div className={cx('jumps-buttons-images-item')}>
                 <img
-                  onClick={addPyJump}
+                  onClick={() => addJump(python)}
                   src={python.img}
                   alt={python.name}
                   className={cx('jumps-buttons-button-img')}
                 />
               </div>
+              <div className={cx('jumps-buttons-images-item')}>
+                <img
+                  onClick={() => addJump(quarkus)}
+                  src={quarkus.img}
+                  alt={quarkus.name}
+                  className={cx('jumps-buttons-button-img')}
+                />
+              </div>
             </div>
           </div>
           <div>