Styling issues and general fixes

client/.env.development

@@ -0,0 +1 @@
+REACT_APP_API_KEY=http://localhost:3000

client/.env.production

@@ -0,0 +1,3 @@
+REACT_APP_API_KEY=https://askfeed-api.springrole.com/
+
+# npm start se production wale prr hit hoga.

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "env-cmd": "^10.1.0",
     "http-proxy-middleware": "^2.0.0",
     "install": "^0.13.0",
     "lodash": "^4.17.21",
@@ -25,7 +26,8 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "env-cmd -f .env.production react-scripts start",
+    "dev": "env-cmd -f .env.development react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/public/index.html

@@ -10,10 +10,10 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-     <link
+    <!-- <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
-    />
+    /> -->
     <!--
       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/

client/src/actions/index.js

@@ -2,13 +2,15 @@ import axios from "axios";
 import { FETCH_USER, FETCH_SURVEYS } from "./types";
 export const submitSurvey = (values, history) => async (dispatch) => {
   const res = await axios.post(
-    "http://localhost:2000/survey/createsurvey",
+    `${process.env.REACT_APP_API_KEY}/survey/createsurvey`,
     values
   );
   dispatch({ type: FETCH_USER, payload: res.data });
 };
 
 export const fetchSurveys = () => async (dispatch) => {
-  const res = await axios.get("http://localhost:2000/survey/getSurvey");
+  const res = await axios.get(
+    `${process.env.REACT_APP_API_KEY}/survey/getSurvey`
+  );
   dispatch({ type: FETCH_SURVEYS, payload: res.data });
 };

client/src/components/ActivationEmail.js

@@ -16,7 +16,7 @@ function ActivationEmail() {
       const activationEmail = async () => {
         try {
           const res = await axios.post(
-            `http://localhost:2000/api/activate/${token}`,
+            `${process.env.REACT_APP_API_KEY}/api/activate/${token}`,
             {
               token,
             }
@@ -55,4 +55,3 @@ function ActivationEmail() {
   );
 }
 export default ActivationEmail;
-

client/src/components/LandingPage/LandingPage.css

@@ -74,7 +74,7 @@ body {
   font-weight: bold;
   font-size: 2.5rem;
   line-height: 3rem;
-  padding-left: 142rem;
+  padding-left: 25rem;
   /* identical to box height */
   color: #3362a8;
 }

client/src/components/Login.js

@@ -10,7 +10,7 @@ const Login = () => {
 
   const loginUser = async (e) => {
     e.preventDefault();
-    const res = await fetch("/api/login", {
+    const res = await fetch(`${process.env.REACT_APP_API_KEY}/api/login`, {
       method: "POST",
       headers: {
         "Content-type": "application/json",

client/src/components/Logout.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { useHistory } from "react-router-dom";
+// import "materialize-css/dist/css/materialize.min.css";
 
 const Logout = () => {
   const history = useHistory();

client/src/components/ResetLink.js

@@ -18,9 +18,12 @@ const ResetLink = () => {
 
   const forgetPassword = async () => {
     try {
-      const res = await axios.post("http://localhost:3000/api/resetlink", {
-        email,
-      });
+      const res = await axios.post(
+        `${process.env.REACT_APP_API_KEY}/api/resetlink`,
+        {
+          email,
+        }
+      );
       return setData({ ...data, err: "", success: res.data.msg });
     } catch (err) {
       console.log(err);

client/src/components/ResetPassword.js

@@ -22,7 +22,7 @@ function ResetPassword() {
   const handleResetPassword = async () => {
     try {
       const res = await axios.post(
-        `http://localhost:2000/api/changepassword/${token}`,
+        `${process.env.REACT_APP_API_KEY}/api/changepassword/${token}`,
         { password },
         {
           headers: { Authorization: token },

client/src/components/Signup.js

@@ -23,7 +23,7 @@ const Signup = () => {
   const PostData = async (e) => {
     e.preventDefault();
     const { name, email, phone, password } = user;
-    const res = await fetch("/api/signup", {
+    const res = await fetch(`${process.env.REACT_APP_API_KEY}/api/signup`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -40,7 +40,7 @@ const Signup = () => {
       window.alert("Invalid!");
       console.log("Invalid!");
     } else {
-      window.alert("Sucess!");
+      window.alert("Success! Please go to your mail to verify!");
       console.log(data);
       history.push("/login");
     }

client/src/components/surveys/StoringNo.js

@@ -15,7 +15,7 @@ function StoringNo() {
       const activationEmail = async () => {
         try {
           const res = await axios.put(
-            `http://localhost:2000/survey/response/no/${id}`,
+            `${process.env.REACT_APP_API_KEY}/survey/response/no/${id}`,
             {
               id,
             }
@@ -38,4 +38,3 @@ function StoringNo() {
   );
 }
 export default StoringNo;
-

client/src/components/surveys/StoringYes.js

@@ -8,13 +8,12 @@ function StoringYes() {
   const [err, setErr] = useState("");
   const [success, setSuccess] = useState("");
 
-
   useEffect(() => {
     if (id) {
       const activationEmail = async () => {
         try {
           const res = await axios.put(
-            `http://localhost:2000/survey/response/yes/${id}`,
+            `${process.env.REACT_APP_API_KEY}/survey/response/yes/${id}`,
             {
               id,
             }

client/src/components/surveys/SurveyList.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { fetchSurveys } from "../../actions";
+// import "materialize-css/dist/css/materialize.min.css";
 
 class SurveyList extends Component {
   componentDidMount() {
@@ -46,4 +47,3 @@ function mapStateToProps({ surveys }) {
 }
 
 export default connect(mapStateToProps, { fetchSurveys })(SurveyList);
-

package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "env-cmd": "^10.1.0",
     "express": "^4.17.1"
   },
   "scripts": {