feat: Initial Website and fully integrated

ASEAN-Build-The-Earth · Apr 20, 2024 · 3f1f2f7 · 3f1f2f7
1 parent 25c0b94
commit 3f1f2f7
Show file tree

Hide file tree

Showing 22 changed files with 554 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/public/aseanbte_logo.png b/public/aseanbte_logo.png
diff --git a/public/aseanbte_logo192.png b/public/aseanbte_logo192.png
diff --git a/public/aseanbte_logo512.png b/public/aseanbte_logo512.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/aseanbte_logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ffc561" />
     <meta
-      name="description"
-      content="Web site created using create-react-app"
+      name="Plot Indexer | ASEAN BTE"
+      content="Search your in-progress plot and find its location informations"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/aseanbte_logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Plot Indexer | ASEAN BTE</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Plot Indexer",
+  "name": "Plot Indexer | ASEAN BTE",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "aseanbte_logo192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "aseanbte_logo512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#ffc561",
+  "background_color": "#282c34"
 }
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,50 @@
-.App {
+.app {
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
+.app_logo {
+  height: 20vmin;
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.app_content {
+  background-color: #323842;
+  padding: 2rem;
+  margin-top: 1rem;
+  border-radius: 0.15rem;
+  border-style: solid;
+  border-color: #3a414c;
 }
 
-.App-header {
+.app_header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
+  padding-top: 7vh;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.app_link {
+  color: #d1b456;
+  display: flex;
+  align-items: flex-end;
+}
+
+.app_footer {
+  color: #aeafb1;
+  display: inline-flex;
+  justify-content: space-evenly;
+  align-items: flex-end;
+  width: 100%;
+  max-width: 30em;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.app_footer small{
+  font-style: oblique;
+
 }
+
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,50 @@
-import logo from './logo.svg';
+import logo from './resources/aseanbte_logo.gif';
 import './App.css';
-
+import SearchBar from './components/SearchBar'; 
+import Result from './components/Result'; 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="app">
+      <header className="app_header">
+        <img src={logo} className="app_logo" alt="logo"/>
+        <div className="app_content">
+          <p><strong>ASEAN Build The Earth Plot System</strong></p>
+          <SearchBar>
+            <Result/>
+          </SearchBar>
+        </div>
+        <footer className="app_footer">
+          <a
+            className="app_link"
+            href="https://github.com/ASEAN-Build-The-Earth"
+            target="_blank"
+            rel="noopener noreferrer">
+            <small>Our Github</small>
+            <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
+              <path fill="currentColor" 
+                d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
+              </path>
+            </svg>
+          </a>
+          <a
+            className="app_link"
+            href="https://asean.buildtheearth.asia/"
+            target="_blank"
+            rel="noopener noreferrer">
+            <small>Visit Our Website</small>
+            <svg width="1.75rem" height="1.75rem" ariaHidden="true" viewBox="-5 -4.75 30 30">
+              <path fill="currentColor" 
+                d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z">
+              </path>
+            </svg>
+          </a>
+        </footer>
       </header>
     </div>
   );
 }
 
+
+
+
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,8 +1,70 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom'
+import SearchBar from './components/SearchBar';
+import Result from './components/Result';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+const setup = () => {
+  const utils = render(<SearchBar><Result/></SearchBar>);
+  const input = screen.getByTestId("input");
+  const button = screen.getByTestId("button");
+  return { input, button, ...utils }
+}
+
+test("Should show a loader while fetching API", () => {
+  const { ...utils } = setup();
+  expect(utils.getByTestId("loader")).toBeInTheDocument();
+})
+
+test("After closing tutorial guide, should show an alert to search for plots", async () => {
+  const { input, button, ...utils } = setup();
+  const closeButton = await utils.findByRole("close_button")
+
+  expect(closeButton).toBeInTheDocument();
+  expect(utils.getByLabelText(/Plot ID:/i)).toBeInTheDocument();
+
+  fireEvent.click(closeButton);
+
+  const alert = await screen.findByRole("alert");
+  expect(alert).toHaveTextContent(/Insert your in-progress Plot ID here/i);
 });
+
+test("Try inserting invalid number of zero to text box, should send an alert", async () => {
+  const { input, button, ...utils } = setup();
+
+  // focus and type value into search box
+  expect(button).toBeDisabled();
+  expect(input.value).toBe("");
+  fireEvent.change(input, { target: { value: 0 }});
+  expect(button).not.toBeDisabled();
+
+  // click the search box, it should be disabled
+  fireEvent.click(button);
+  expect(button).toBeDisabled();
+
+  // button re enable after a delay
+  setTimeout(() => {
+    expect(button).not.toBeDisabled();
+  }, 3000)
+
+  // an alert message should be fire since the test value of "0" is invalid
+  const alert = await utils.findByRole("alert");
+  expect(alert).toHaveTextContent(/Invalid Number/i);
+});
+
+test("Text input should be limited to 3 digits", async () => {
+  const { input, button } = setup();
+  expect(button).toBeDisabled();
+  expect(input.value).toBe("");
+
+  // Inserting 4 digits number straight should be blocked
+  fireEvent.change(input, { target: { value: 1234 }}); expect(input.value).toBeFalsy();
+  fireEvent.change(input, { target: { value: 1 }}); expect(input.value).not.toBeFalsy();
+
+  // Editing from valid digits whould be limited to the current digits
+  fireEvent.change(input, { target: { value: 12 }}); expect(input.value).toBe("12");
+  fireEvent.change(input, { target: { value: 123 }}); expect(input.value).toBe("123");
+  fireEvent.change(input, { target: { value: 1234 }}); expect(input.value).toBe("123");
+  fireEvent.change(input, { target: { value: 12345 }}); expect(input.value).toBe("123");
+
+  expect(button).not.toBeDisabled();
+})
diff --git a/src/components/LoadingSvg.js b/src/components/LoadingSvg.js
@@ -0,0 +1,45 @@
+/**
+ * Loading SVG Style 4 
+ * By Nikhil Krishnan from: [https://codepen.io/nikhil8krishnan/pen/rVoXJa] under MIT License
+ * @param color the color of the svg
+ * @returns an animated loading icon
+ */
+const Svg = ({color, ...props}) => {
+    return (
+        <svg version="1.1" 
+            data-testid="loader"
+            id="L4" x="0px" y="0px" 
+            style={{ ...props.style }}
+            className={props.className? props.className : null}
+            viewBox="-7 40 70 20" enableBackground="new 0 0 0 0">
+            <circle fill={color} stroke="none" cx="6" cy="50" r="6">
+                <animate
+                attributeName="opacity"
+                dur="1s"
+                values="0;1;0"
+                repeatCount="indefinite"
+                begin="0.1"/>    
+            </circle>
+            <circle fill={color} stroke="none" cx="26" cy="50" r="6">
+                <animate
+                attributeName="opacity"
+                dur="1s"
+                values="0;1;0"
+                repeatCount="indefinite" 
+                begin="0.2"/>       
+            </circle>
+            <circle fill={color} stroke="none" cx="46" cy="50" r="6">
+                <animate
+                attributeName="opacity"
+                dur="1s"
+                values="0;1;0"
+                repeatCount="indefinite" 
+                begin="0.3"/>     
+            </circle>
+        </svg>
+    );
+}
+
+export default function LoadingSvg({fillColor, ...props}) {
+    return fillColor ? <Svg color={fillColor} {...props}/> : <Svg color="rgb(60, 67, 80)" {...props}/>;
+}