Merge pull request #131 from aniketbiswas21/unsubscribe

feat: added unsubscribe page and docker-dev setup

client/src/pages/Unsubscribe/Unsubscribe.styles.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import { Input, FormItem } from "formik-antd";
+import { sm, xs } from "theme/breakpoints";
+
+export const UnsubscribeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    text-align: center;
+    margin: auto;
+    color: ${({ theme }) => theme.secondaryColor};
+    font-weight: 800;
+    font-size: 2rem;
+
+    ${sm} {
+      font-size: 1.8rem;
+      line-height: 1.6rem;
+    }
+    ${xs} {
+      font-size: 1.4rem;
+      line-height: 1.6rem;
+    }
+  }
+
+  img {
+    margin-top: 1rem;
+    object-fit: contain;
+    height: 500px;
+    border-radius: 20px;
+
+    ${xs},
+    ${sm} {
+      height: 300px;
+      width: 100%;
+      margin: 1rem auto;
+    }
+  }
+
+  .form {
+    display: flex;
+    margin: 3rem auto;
+    width: 100%;
+    justify-content: center;
+
+    ${xs} {
+      flex-direction: column;
+    }
+  }
+
+  .submit {
+    margin-left: 0.5rem;
+
+    ${xs} {
+      margin-left: 0;
+    }
+  }
+`;
+
+export const StyledInput = styled(Input)`
+  width: 100%;
+  margin: auto;
+`;
+
+export const StyledFormItem = styled(FormItem)`
+  display: flex;
+  justify-content: center;
+  width: 60%;
+
+  @media only screen and (max-width: 1600px) {
+    width: 30%;
+  }
+
+  ${sm} {
+    width: 100%;
+  }
+
+  ${xs} {
+    width: 100%;
+  }
+`;

client/src/pages/Unsubscribe/Unsubscribe.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import Layout from "components/Layout/Layout";
+import { Button, Col, message, notification, Row } from "antd";
+import { Formik, FormikProps } from "formik";
+import { Form } from "formik-antd";
+import { useMutation } from "react-query";
+import { unsubsribeByEmail } from "services/api";
+import { UnsubscribeSchema } from "utils/UnsubscribeSchema";
+
+import {
+  UnsubscribeWrapper,
+  StyledInput,
+  StyledFormItem,
+} from "./Unsubscribe.styles";
+import happyVaccine from "../../assets/happyVaccine.jpg";
+
+interface FormValues {
+  email: string;
+}
+
+interface OtherProps {
+  handleSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void;
+  isValid: boolean;
+}
+
+const initialValues: FormValues = {
+  email: "",
+};
+
+const Unsubscribe: React.FC = () => {
+  const { isLoading, mutate } = useMutation(
+    (email: string) => unsubsribeByEmail(email),
+    {
+      onSuccess: (data: string) => {
+        notification.success({
+          message: data,
+          placement: "bottomRight",
+        });
+      },
+      onError: (err) => {
+        console.log(err);
+        notification.error({
+          message: "Something went wrong",
+          description: "Please try again later",
+          placement: "bottomRight",
+        });
+      },
+    }
+  );
+  const onSubmit = (formik: OtherProps & FormikProps<FormValues>): void => {
+    const { handleSubmit, isValid } = formik;
+    if (!isValid) {
+      message.error("Please fill all the details correctly", 2);
+    } else {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Layout>
+      <Row justify="center">
+        <Col xs={24} sm={24} md={24} lg={24} xl={24} xxl={14}>
+          <UnsubscribeWrapper>
+            <h1>
+              Thank you for using Covaccinate! We hope, we could be of help!
+            </h1>
+            <img src={happyVaccine} alt="Happy Vaccine" />
+            <Formik
+              initialValues={initialValues}
+              validationSchema={UnsubscribeSchema}
+              onSubmit={(values) => {
+                mutate(values.email);
+              }}
+            >
+              {(props) => {
+                const { email } = props.values;
+
+                return (
+                  <Form className="form">
+                    <StyledFormItem name="email">
+                      <StyledInput
+                        placeholder="Enter your registered email"
+                        value={email}
+                        size="large"
+                        name="email"
+                        onChange={props.handleChange}
+                      />
+                    </StyledFormItem>
+                    <Button
+                      type="primary"
+                      size="large"
+                      className="submit"
+                      onClick={() => {
+                        onSubmit(props);
+                      }}
+                      loading={isLoading}
+                    >
+                      Unsubscribe
+                    </Button>
+                  </Form>
+                );
+              }}
+            </Formik>
+          </UnsubscribeWrapper>
+        </Col>
+      </Row>
+    </Layout>
+  );
+};
+
+export default Unsubscribe;

client/src/routes/index.tsx

@@ -10,6 +10,7 @@ const VaccineAvailability = lazy(
   () => import("pages/VaccineAvailability/VaccineAvailability")
 );
 const News = lazy(() => import("pages/News/News"));
+const Unsubscribe = lazy(() => import("pages/Unsubscribe/Unsubscribe"));
 
 const Routes = () => {
   return (
@@ -22,6 +23,7 @@ const Routes = () => {
           component={VaccineAvailability}
         />
         <RouteWrapper exact path="/news" component={News} />
+        <RouteWrapper exact path="/unsubscribe" component={Unsubscribe} />
       </Switch>
     </Suspense>
   );

client/src/services/api.tsx

@@ -148,3 +148,14 @@ export const fetchNews = async (): Promise<INewsData> => {
     throw error;
   }
 };
+
+export const unsubsribeByEmail = async (email: string): Promise<any> => {
+  try {
+    const res: AxiosResponse<any> = await axios.post(`/users/unsubscribe/`, {
+      email,
+    });
+    return res.data;
+  } catch (error) {
+    throw error;
+  }
+};

client/src/utils/RegisterSchema.tsx

@@ -6,9 +6,6 @@ export const RegistrationSchema = Yup.object().shape({
     .max(50, "Name cannot be greater than 50 characters!")
     .required("Required"),
   email: Yup.string().email("Invalid email").required("Required"),
-  // password: Yup.string()
-  //   .min(6, "Password should atleast be 6 characters!")
-  //   .required("Required"),
   category: Yup.string().required("Required"),
   zipcode: Yup.string()
     .min(6, "Please enter a valid zipcode")

client/src/utils/UnsubscribeSchema.tsx

@@ -0,0 +1,5 @@
+import * as Yup from "yup";
+
+export const UnsubscribeSchema = Yup.object().shape({
+  email: Yup.string().email("Invalid email").required("Required"),
+});

client/src/utils/axios.tsx

@@ -1,7 +1,10 @@
 import axios from "axios";
 
 export default axios.create({
-  baseURL: "/api",
+  baseURL:
+    process.env.NODE_ENV === "development"
+      ? process.env.REACT_APP_SERVER_URL_DEV
+      : "/api",
   responseType: "json",
   headers: {
     "Content-Type": "application/json",

docker-compose.dev.yml

@@ -13,8 +13,8 @@ services:
       - ./client:/app
   web:
     build:
-      context: .
-      dockerfile: jabme/Dockerfile
+      context: ./jabme
+      dockerfile: Dockerfile
     command: python manage.py runserver 0.0.0.0:8000
     volumes:
       - ./jabme:/usr/src/app
@@ -40,6 +40,7 @@ services:
   nginx:
     build:
       context: ./nginx
+      dockerfile: Dockerfile.dev
     ports:
       - 3000:80
     depends_on:

nginx/Dockerfile.dev

@@ -0,0 +1,4 @@
+FROM nginx:1.19.0-alpine
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx.dev.conf /etc/nginx/conf.d

nginx/nginx.dev.conf

@@ -0,0 +1,45 @@
+upstream client {
+    server client:3000;
+}
+
+upstream jabme {
+    server web:8000;
+}
+
+
+server {
+    listen 80;
+
+    location /api {
+        proxy_pass http://jabme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+        proxy_redirect off;
+    }
+
+    location /admin {
+        proxy_pass http://jabme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+        proxy_redirect off;
+    }
+
+    location /staticfiles/ {
+        alias /home/app/web/staticfiles/;
+    }
+
+    location /sockjs-node {
+        proxy_pass http://client;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+    }
+
+    location / {
+        proxy_pass http://client;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+        proxy_redirect off;
+    }
+
+}