Merge pull request #1 from GHkrishna/function-based-app

Converting the app from class based to Function based

.dockerignore

@@ -0,0 +1,3 @@
+# To understand relation between .dockerignore and .gitignore head on to ( https://stackoverflow.com/questions/58707272/should-dockerignore-typically-be-a-superset-of-gitignore ) This very well explains the relations and also why some files prefent in our repos are not dockerignore-d
+**/node_modules
+**/npm-debug.log

.gitignore

@@ -1,3 +1,4 @@
 # dependencies
 /node_modules
 
+.vercel

Dockerfile

@@ -0,0 +1,27 @@
+# Dockerfile created with reference to https://faun.pub/ci-cd-pipeline-with-react-app-using-github-actions-1b219d4e162f adding required insturction, info and references wherever required by GHkrishna
+# Other references: 
+# Node docs: https://nodejs.org/en/docs/guides/nodejs-docker-webapp 
+
+# Setting up the node environment
+# A node image is used to setup a node environment
+# Here node 18 version is used since I had v18.13.0 running on my machine
+# 'alpine' is nothing but a type if node image used depending on what preinstalled packages we want in our environment. More about that here: https://hub.docker.com/_/node
+# 'AS development' suggests that we need to use the specified node image in the development.
+FROM node:18-alpine AS development
+# Environment variables are stored in NODE_ENV
+# By using the below command we are suggesting to used environment variables as if we are in development server. More info here: https://www.geeksforgeeks.org/what-is-node_env-in-node-js/
+# However we are not using any environment variables in this build
+ENV NODE_ENV development
+# Adding a working directory, where all our build will be stored inside the container
+WORKDIR /app
+# Cache and install dependencies. This helps in installing all the required packahes from the package.json and packahe-lock.json in our container/node environment/workdir
+COPY package.json .
+COPY package-lock.json .
+RUN npm install
+# Copy app files. i.e. copy all the files from our repo/local root dir to the containers root dir
+# More about the command here https://stackoverflow.com/questions/47270150/copy-command-in-dockerfile-for-asp-net Even though it is for .NET, it's still useful to undertand why to copy everything after above two COPY commands and more
+COPY . .
+# Expose port for our application. Our react application listens on port 3000
+EXPOSE 3000
+# Start the app.
+CMD ["npm","start"]

README.md

@@ -1,12 +1,18 @@
-Welcome guys,
-
+# Get Advice
+Welcome,
 This a cool quote app that provides quotes or funny advice with a click of a button.
 
-How to run?
+## How to run?
 1. Clone the repository to your local machine 
 2. Run 'npm i' at the root, to install al the dependencies.
 3. Run 'npm start' to start the app (It'll run on a new browser session).
 
+[!Note]
 API used:
 ( https://api.adviceslip.com/advice )
-Its a great and funny api developed. Kudos to the founders. It contains funny advices.
+Its a great and funny api developed. Kudos to the founders. It contains funny advices.
+
+# Technical 
+This is a CI/CD pipelined application targeted to changes in this branch 'function-based-app'.
+
+The docker image is published accordingly to [docker hub](https://hub.docker.com/r/dockrish/react-cicd-pipeline) and will soon be available on a publically accesible address, with continuos integration.

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#ffffff" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.js

@@ -1,48 +1,33 @@
-import React from 'react';
-import axios from 'axios'; //'npm install --save axios' use this before using axios
-
-import './App.css';
-
-class App extends React.Component{
-    state = {
-        advice:''
-    };
-
-    componentDidMount(){
-        console.log('COMPONENT DID MOUNT');
-        this.fetchQuote();
-    };
-
-    fetchQuote = ()=>{
-        axios.get('https://api.adviceslip.com/advice')
-        .then((response) => {
-            const {advice} = response.data.slip;
-
-            this.setState({advice: advice}); 
-            //Or this.setState((advice)) If both state and local variables have same name
-
-            console.log(advice);
-        })
-        .catch((err) => {
-            console.log(err);
-        });
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+const App = () => {
+  const [advice, setAdvice] = useState("");
+
+  function getData(){
+    axios
+      .get("https://api.adviceslip.com/advice")
+      .then((response) => {
+        const adviceText = response.data.slip.advice;
+        setAdvice(adviceText);
+      })
+      .catch((error) => {
+        console.error("Error fetching advice:", error);
+      });
     }
 
-    render(){
-        const {advice} = this.state; 
-        return(
-            <div className='app'>
-                <div className="card"> 
-                    <h1 className = "heading"> {advice}</h1>
-                    <button className='button' onClick={this.fetchQuote}>
-                        <span>
-                            GIVE ME ADVICE
-                        </span>
-                    </button>
-                </div>
-            </div>
-        )
-    }
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div className="app">
+    <div className="card">
+      <h1 className="heading">{advice}</h1>
+      <button className="button" onClick={getData}>Get Advice</button>
+    </div>
+    </div>
+  );
 }
 
 export default App;

src/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./App.css";
 
-import App from './App.js';
+import App from "./App.js";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));