development face completed

.gitignore

@@ -23,14 +23,6 @@ lib-cov
 coverage
 *.lcov
 
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
 
 # node-waf configuration
 .lock-wscript
@@ -42,8 +34,6 @@ build/Release
 node_modules/
 jspm_packages/
 
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
 
 # TypeScript cache
 *.tsbuildinfo
@@ -57,11 +47,6 @@ web_modules/
 # Optional stylelint cache
 .stylelintcache
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
 
 # Optional REPL history
 .node_repl_history
@@ -79,46 +64,6 @@ web_modules/
 .env.production.local
 .env.local
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 

client/src/components/organisms/header/index.tsx

@@ -66,7 +66,7 @@ const Header: React.FC = () => {
             Other
             </li>
           </Link>
-          <Link to="#">
+          <Link to="/signin">
             {currentUser ? (
               <img
                 className="rounded-full h-7 w-7 object-cover"

client/src/components/template/main-container/index.tsx

@@ -10,7 +10,7 @@ export const MainContainer: FC<MainContainerProps> = ({ children, pageId }) => {
   return (
     <div id={pageId} className="t-main-container">
       <Header />
-      <main className="t-main-container__body">{children}</main>
+      <main className="t-main-container__body container mx-auto">{children}</main>
     </div>
   );
 };

client/src/pages/fibonacci/index.tsx

@@ -9,19 +9,20 @@ interface FibonacciProps {
 
 const Fibonacci: React.FC<FibonacciProps> = ({ pageId }) => {
   const [seenIndexes, setSeenIndexes] = useState([]);
-  const [error, setError] = useState<string>('');
   const [values, setValues] = useState<any>({});
   const [inputValue, setInputValue] = useState<string>('');
+  const [error, setError] = useState<string>('');
 
+  // On submit form value
   const handleSubmit = async (event: { preventDefault: () => void }) => {
     event.preventDefault();
-    console.log(inputValue);
     try {
       await axios.post('/api/values', {
         index: inputValue,
       });
 
       setInputValue('');
+      setError('');
     } catch (error) {
       setError('404 (Not Found)');
     }
@@ -45,7 +46,7 @@ const Fibonacci: React.FC<FibonacciProps> = ({ pageId }) => {
   };
 
   useEffect(() => {
-    // Fetch Index from redis 
+    // Fetch Index from redis
     const fetchIndexes = async () => {
       try {
         const values = await axios.get('/api/values/current');
@@ -56,8 +57,8 @@ const Fibonacci: React.FC<FibonacciProps> = ({ pageId }) => {
         setError('404 (Not Found)');
       }
     };
-    
-   // Fetch Values from postgres
+
+    // Fetch Values from postgres
     const fetchValues = async () => {
       try {
         const seenIndexes = await axios.get('/api/values/all');
@@ -71,27 +72,48 @@ const Fibonacci: React.FC<FibonacciProps> = ({ pageId }) => {
 
     fetchIndexes();
     fetchValues();
-  }, []);
+  }, [inputValue]);
 
   return (
     <MainContainer>
-      <div className="fibonacci" id={pageId}>
-        <h2>{error && error}</h2>
+      <div className="p-fibonacci" id={pageId}>
+        <h2 className="text-base font-semibold leading-7 text-gray-900 text-4xl mt-10">
+          Fib Calculator
+        </h2>
+        <p className="mt-4 text-sm leading-6 text-gray-600">
+          The is Fib calculated
+        </p>
+        <h2 className="p-fibonacci__error mt-10 text-base font-semibold leading-7 text-gray-900">
+          {error && error}
+        </h2>
         <form onSubmit={handleSubmit}>
-          <label>Enter your index:</label>
+          <label className="p-fibonacci__label text-sm font-medium leading-6 text-gray-900">
+            Enter your index:
+          </label>
           <input
+            className="ml-4 p-fibonacci__input rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             type="number"
+            placeholder='Enter number'
             value={inputValue}
             onChange={(event) => setInputValue(event.target.value)}
           />
-          <button type="submit">Submit</button>
+          <button
+            type="submit"
+            className="ml-4 p-fibonacci__submit rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            Submit
+          </button>
         </form>
 
-        <h3>Indexes I have seen: </h3>
-        {renderSeenIndexes()}
+        <h3 className="p-fibonacci__indexes mt-10 text-xl">
+          Indexes I have seen: 
+        </h3>
+        <p className='text-base'> {renderSeenIndexes()} </p>
 
-        <h3>Calculated Values:</h3>
-        {renderValues()}
+        <h3 className="p-fibonacci__values mt-4 text-xl">
+          Calculated Values: 
+        </h3>
+        <p className='text-base'> {renderValues()} </p>
       </div>
     </MainContainer>
   );

client/src/pages/others/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
+import { MainContainer } from '../../components/template/main-container';
 import './index.scss';
 
 interface OtherProps {
   pageId?: string | undefined;
 }
 const Others: React.FC<OtherProps> = ({ pageId }) => {
   return (
-    <div className="other" id={pageId}>
-      <ul className="">
-        <li>One</li>
-        <li>Two</li>
-        <li>Three</li>
-      </ul>
-    </div>
+    <MainContainer>
+      <div className="p-other flex flex-row justify-center" id={pageId}>
+        <h1 className='text-5xl mt-10'>Other page </h1>
+      </div>
+    </MainContainer>
   );
 };
 

client/src/pages/search/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MainContainer } from '../../components/template/main-container';
+import './index.scss';
+
+interface SearchProps {
+  pageId?: string | undefined;
+}
+const Search: React.FC<SearchProps> = ({ pageId }) => {
+  return (
+    <MainContainer>
+      <div className="p-search flex flex-row justify-center" id={pageId}>
+        <h1 className='text-5xl mt-10'>Search page </h1>
+      </div>
+    </MainContainer>
+  );
+};
+
+export default Search;

client/src/pages/singin/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MainContainer } from '../../components/template/main-container';
+
+interface SignInProps {
+  pageId?: string | undefined;
+}
+const SignIn: React.FC<SignInProps> = ({ pageId }) => {
+  return (
+    <MainContainer>
+      <div className="p-signin flex flex-row justify-center" id={pageId}>
+        <h1 className='text-5xl mt-10'>SignIn page </h1>
+      </div>
+    </MainContainer>
+  );
+};
+
+export default SignIn;

client/src/routers/routers.tsx

@@ -3,13 +3,17 @@ import { Route, Routes } from 'react-router-dom';
 import Fibonacci from '../pages/fibonacci';
 import Home from '../pages/home';
 import Others from '../pages/others';
+import Search from '../pages/search';
+import SignIn from '../pages/singin';
 
 const Routers = () => {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/fibonacci" element={<Fibonacci />} />
       <Route path="/otherpage" element={<Others />} />
+      <Route path="/search" element={<Search />} />
+      <Route path="/signin" element={<SignIn />} />
     </Routes>
   );
 };

docker-compose-dev.yml

@@ -1,46 +1,58 @@
-version: '3'
+version: '3.1'
 services:
+  # https://hub.docker.com/_/postgres
   postgres:
     image: 'postgres:latest'
     restart: always
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    # https://github.com/docker-library/docs/blob/master/postgres/README.md#environment-variables
     environment:
-      - POSTGRES_PASSWORD=postgres_password
+      - POSTGRES_DB=pgmulticontainer
+      - POSTGRES_PASSWORD=3497Wa
   redis:
     image: 'redis:latest'
   ngins:
     depends_on:
-      - api
+      - backend
       - client
     restart: always
     build:
       context: ./nginx
       dockerfile: Dockerfile.dev
     ports:
-      - "3050:80"
-  api:
+      - '3050:80'
+  backend:
+    # Build backend service
     build:
       context: ./server
       dockerfile: Dockerfile.dev
+    # Add a new volume to the backend service for the bind mount.
     volumes:
+      # Inside the container, don't try to override this folder. Don't try to override it, don't try to redirect access to it, just leave that folder as is.
       - /app/node_modules
+      # Look at the `server` directory, and copy everything inside there into the `app` folder of the container.
       - ./server:/app
+    # https://docs.docker.com/compose/environment-variables/set-environment-variables/#use-the-environment-attribute
+    # You can set environment variables in a service's containers with the environment attribute in your Compose file.
     environment:
       - REDIS_HOST=redis
       - REDIS_PORT=6379
       - PGUSER=postgres
       - PGHOST=postgres
-      - PGDATABASE=postgres
-      - PGPASSWORD=postgres_password
+      - PGDATABASE=pgmulticontainer
+      - PGPASSWORD=3497Wa
       - PGPORT=5432
   client:
-    environment:
-      - WDS_SOCKET_PORT=0
     build:
       context: ./client
       dockerfile: Dockerfile.dev
     volumes:
       - /app/node_modules
       - ./client:/app
+    environment:
+    # Fixes bug where websocket connection is fixed to default port 3000
+      - WDS_SOCKET_PORT=0
   worker:
     build:
       context: ./worker
@@ -51,3 +63,6 @@ services:
     environment:
       - REDIS_HOST=redis
       - REDIS_PORT=6379
+
+volumes:
+  pgdata:

nginx/.dockerignore

@@ -1,2 +1 @@
-package-lock.json
 node_modules

nginx/Dockerfile.dev

@@ -1,2 +1,5 @@
+# https://hub.docker.com/_/nginx
 FROM nginx
+# A directory where the result of executing envsubst is output
+# ./default.conf.template will be output with the filename /etc/nginx/conf.d/default.conf
 COPY ./default.conf /etc/nginx/conf.d/default.conf