Fixed bug when sending emails

.env.example

@@ -3,4 +3,5 @@ REACT_APP_FIREBASE_AUTH_DOMAIN =
 REACT_APP_FIREBASE_PROJECT_ID =
 REACT_APP_FIREBASE_STORAGE_BUCKET =
 REACT_APP_FIREBASE_MESSAGING_SENDER =
-REACT_APP_FIREBASE_APP_ID =
+REACT_APP_FIREBASE_APP_ID =
+REACT_APP_MAIL_SERVER =

README.md

@@ -26,7 +26,7 @@ End user must be capable of:
 - React Hooks
 - Firebase (database and authentication)
 - MaterialUI (User interface)
-- Axios (to communicate with external server. I am using a small api that I created for another project to send emails)
+- Axios (to communicate with email backend: https://github.com/jossydeleon/nodemailer-express-app)
 - React-hook-form (Form Validation Api)
 
 ## Login credentials
@@ -48,7 +48,8 @@ In order to receive notifications when products hits zero:
 
 ### Note
 
-You need to check Spam folder in your email in case notification is not received in inbox folder.
+- Emails will take time to arrive since the backend is hosted in Heroku free version account.
+- You need to check Spam folder in your email in case notification is not received in inbox folder.
 
 ## Run it locally
 
@@ -63,6 +64,7 @@ REACT_APP_FIREBASE_PROJECT_ID =
 REACT_APP_FIREBASE_STORAGE_BUCKET =
 REACT_APP_FIREBASE_MESSAGING_SENDER =
 REACT_APP_FIREBASE_APP_ID =
+REACT_APP_MAIL_SERVER =
 ```
 
 3. Then, start the development server:

Rest.http

@@ -1,8 +1,8 @@
 ### Post
-POST https://fncapi.vercel.app/api/mailer HTTP/1.1
+POST https://nodemailer-express-app.herokuapp.com/mail-tracker HTTP/1.1
 content-type: application/json
 
 {
-    "product": "Fruit",
+    "product": "Bananas",
     "email": "[email protected]"
 }

src/pages/Debug.tsx

@@ -76,7 +76,7 @@ const Debug: React.FC = () => {
         },
         data.email
       );
-      toast.success(`Email has been set successfully`);
+      toast.success(`Email has been sent successfully`);
     } catch (error) {
       toast.error(`Something happend: ` + error);
       console.log(error);

src/pages/Root.tsx

@@ -14,10 +14,8 @@ import { RootStore } from "../state/Store";
 import Products from "./Products";
 import Shop from "./Shop";
 import Settings from "./Settings";
-import Debug from "./Debug";
 import { actionSetProducts } from "../state/actions/DatabaseActions";
 import {
-  FaBug,
   FaDoorOpen,
   FaList,
   FaShoppingBag,
@@ -117,13 +115,13 @@ const Root: React.FC = () => {
       icon: <FaTools size={"1.5em"} color="white" />,
       component: Settings,
     },
-    {
-      name: "Debug",
-      path: `${url}debug`,
-      exact: true,
-      icon: <FaBug size={"1.5em"} color="white" />,
-      component: Debug,
-    },
+    // {
+    //   name: "Debug",
+    //   path: `${url}debug`,
+    //   exact: true,
+    //   icon: <FaBug size={"1.5em"} color="white" />,
+    //   component: Debug,
+    // },
   ];
 
   /**

src/util/Helper.ts

@@ -1,6 +1,8 @@
 import axios from "axios";
 import { IProduct } from "../types";
 
+const API = process.env.REACT_APP_MAIL_SERVER;
+
 /**
  * Add 2 decimals to number
  * @param value number
@@ -17,12 +19,10 @@ export function convertToCurrency(value: number) {
  */
 export async function sendEmailReport(product: IProduct, email: string) {
   try {
-    const result = await axios.post("https://fncapi.vercel.app/api/mailer", {
+    await axios.post(`${API}`, {
       product: product.name,
       email,
     });
-
-    console.log(JSON.stringify(result));
   } catch (error) {
     throw error;
   }