Added Mock UI

Konnect-Agri · Jun 8, 2023 · f065c5c · f065c5c
1 parent 9647e88
commit f065c5c
Show file tree

Hide file tree

Showing 32 changed files with 6,225 additions and 7 deletions.
diff --git a/apps/mock-ui/Dockerfile b/apps/mock-ui/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:lts-alpine
+WORKDIR /app
+COPY package*.json yarn.lock ./
+RUN yarn 
+COPY . .
+RUN yarn build
+RUN yarn global add serve
+EXPOSE 4000
+CMD ["serve", "-s", "dist"]
+
diff --git a/apps/mock-ui/index.html b/apps/mock-ui/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> Farmer App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/mock-ui/package-lock.json b/apps/mock-ui/package-lock.json
diff --git a/apps/mock-ui/package.json b/apps/mock-ui/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "mock-bank-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@magicbell/magicbell-react": "^10.3.4",
+    "@types/lodash": "^4.14.191",
+    "@types/react-router-bootstrap": "^0.24.5",
+    "axios": "^1.1.3",
+    "bootstrap": "^5.2.3",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-json-to-table": "^0.1.7",
+    "react-router-bootstrap": "^0.26.2",
+    "react-router-dom": "^6.4.3",
+    "sweetalert": "^2.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/apps/mock-ui/postcss.config.cjs b/apps/mock-ui/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/mock-ui/public/vite.svg b/apps/mock-ui/public/vite.svg
diff --git a/apps/mock-ui/src/App.tsx b/apps/mock-ui/src/App.tsx
@@ -0,0 +1,26 @@
+import "./index.css";
+import Home from "./component/Home";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Header from "./component/Header";
+import Login from "./component/Login";
+
+import { Toaster } from 'react-hot-toast';
+
+function App() {
+  return (
+    <Router>
+      <>
+        <Header />
+        <div className="App">
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route path="/home" element={<Home />} />
+          </Routes>
+        </div>
+        <Toaster />
+      </>
+    </Router>
+  );
+}
+
+export default App;
diff --git a/apps/mock-ui/src/api/index.tsx b/apps/mock-ui/src/api/index.tsx
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export const markFarmerChoice = async (url: string) => {
+  const res = await axios.patch(
+    url,
+    {},
+    {
+      headers: {
+        authorization: localStorage.getItem("token"),
+      },
+    }
+  );
+  return res;
+};
diff --git a/apps/mock-ui/src/assets/fonts/Mulish-Bold.ttf b/apps/mock-ui/src/assets/fonts/Mulish-Bold.ttf
diff --git a/apps/mock-ui/src/assets/fonts/Mulish-Demi.ttf b/apps/mock-ui/src/assets/fonts/Mulish-Demi.ttf
diff --git a/apps/mock-ui/src/assets/fonts/Mulish-Medium.ttf b/apps/mock-ui/src/assets/fonts/Mulish-Medium.ttf
diff --git a/apps/mock-ui/src/assets/fonts/Mulish-Regular.ttf b/apps/mock-ui/src/assets/fonts/Mulish-Regular.ttf
diff --git a/apps/mock-ui/src/assets/images/homeScreen.png b/apps/mock-ui/src/assets/images/homeScreen.png
diff --git a/apps/mock-ui/src/assets/images/homeScreen2.png b/apps/mock-ui/src/assets/images/homeScreen2.png
diff --git a/apps/mock-ui/src/component/EmptyState/index.module.css b/apps/mock-ui/src/component/EmptyState/index.module.css
@@ -0,0 +1,18 @@
+.container {
+    background: #fff;
+    padding: 3rem 2rem;
+    width: 60vw;
+    margin: auto;
+    display: flex;
+    margin-top: 5rem;
+    border-radius: 0.5rem;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.container p:nth-child(1) {
+    font-size: 2rem;
+    color: #424242;
+    font-weight: 600;
+    text-align: center;
+}
diff --git a/apps/mock-ui/src/component/EmptyState/index.tsx b/apps/mock-ui/src/component/EmptyState/index.tsx
@@ -0,0 +1,13 @@
+
+import styles from './index.module.css';
+
+const EmptyState: React.FC<any> = () => {
+
+    return (
+        <div className={styles.container}>
+            <p>You have no new requests</p>
+        </div>
+    )
+}
+
+export default EmptyState;
diff --git a/apps/mock-ui/src/component/Header.tsx b/apps/mock-ui/src/component/Header.tsx
@@ -0,0 +1,32 @@
+
+import React, { FC, useEffect, useState } from 'react'
+import { Container, Navbar, Nav, } from 'react-bootstrap';
+
+import { LinkContainer } from 'react-router-bootstrap'
+
+const Header: FC = () => {
+    const [showLogout, setShowLogout] = useState<boolean>();
+    useEffect(() => {
+        if (window.location.pathname == "/")
+            setShowLogout(false)
+        else
+            setShowLogout(true);
+    }, [window.location.pathname])
+    return (
+        <header>
+            <Navbar bg="dark" variant="dark" expand="lg">
+                <Container>
+                    <LinkContainer to="">
+                        <Navbar.Brand>Krushak Odisha</Navbar.Brand>
+                    </LinkContainer>
+                    {showLogout && <LinkContainer to="/" onClick={() => { localStorage.clear() }}>
+                        <Navbar.Brand>Logout</Navbar.Brand>
+                    </LinkContainer>}
+                </Container>
+            </Navbar>
+        </header>
+    )
+}
+
+export default Header
+
diff --git a/apps/mock-ui/src/component/Home.tsx b/apps/mock-ui/src/component/Home.tsx
@@ -0,0 +1,21 @@
+import { useNotifications } from '@magicbell/magicbell-react';
+
+import { MagicBellProvider } from '@magicbell/magicbell-react';
+import EmptyState from './EmptyState';
+import NotificationItem from "./Notification";
+const Home = () => {
+  const store: any = useNotifications();
+  return (
+    <MagicBellProvider apiKey={"3983ee94df2462f02d3f45913630ee1bc243df34"} userEmail={localStorage.getItem('userEmail') as string}>
+      {
+        store?.notifications?.filter((el: any) => el.readAt == null)?.length > 0
+          ?
+          <NotificationItem data={store.notifications.filter((el: any) => el.readAt == null)[0]} />
+          :
+          <EmptyState />
+      }
+    </MagicBellProvider>
+  );
+};
+
+export default Home;
diff --git a/apps/mock-ui/src/component/Login.tsx b/apps/mock-ui/src/component/Login.tsx
@@ -0,0 +1,84 @@
+import axios from "axios";
+import React, { SyntheticEvent, useCallback, useState, FC } from "react";
+import { Button, Form, Container, Row, Col, Card } from "react-bootstrap";
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+const ApplicationId = "0f66446f-9530-44fd-837b-106cbc5b07a4";
+
+const Login: FC = () => {
+  const [loginId, setLoginId] = useState();
+  const [password, setPassword] = useState();
+  const navigateTo = useNavigate();
+  const handleLogin = useCallback(
+    (e: SyntheticEvent) => {
+      e.preventDefault();
+      const url = `https://auth.konnect.samagra.io/api/login`;
+      const config = {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `HZmKaLCvHMJ36eChXdSpdT7IMqKXr-3rpldpCTmwBJxKFKDf-1h31QwN`,
+        },
+      };
+      console.log("vbn:", { loginId, password });
+      axios
+        .post(url, { loginId, password, applicationId: ApplicationId }, config)
+        .then((res) => {
+          if (res?.data?.token) {
+            localStorage.setItem("token", res?.data?.token);
+            localStorage.setItem("userEmail", res?.data?.user?.email);
+            navigateTo("/home");
+          }
+        })
+        .catch((err) => {
+          toast.error(err.message);
+        });
+    },
+    [loginId, password]
+  );
+
+  return (
+    <Container>
+      <Row>
+        <Col className="mx-auto mt-5 mb-5" md={6}>
+          <Card className="mb-2 p-3">
+            <Form>
+              <Form.Group className="mb-3" controlId="formBasicEmail">
+                <Form.Label>User Name</Form.Label>
+                <Form.Control
+                  type="text"
+                  placeholder="User Id"
+                  value={loginId}
+                  onChange={(e: any) => {
+                    console.log(e.target.value);
+                    setLoginId(e.target.value);
+                  }}
+                />
+                <Form.Text className="text-muted">
+                  We'll never share your email with anyone else.
+                </Form.Text>
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="formBasicPassword">
+                <Form.Label>Password</Form.Label>
+                <Form.Control
+                  type="password"
+                  placeholder="Password"
+                  value={password}
+                  onChange={(e: any) => {
+                    setPassword(e.target.value);
+                  }}
+                />
+              </Form.Group>
+
+              <Button variant="primary" onClick={handleLogin}>
+                Submit
+              </Button>
+            </Form>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default Login;
diff --git a/apps/mock-ui/src/component/Notification/index.module.css b/apps/mock-ui/src/component/Notification/index.module.css
@@ -0,0 +1,50 @@
+.container {
+    background: #fff;
+    padding: 3rem 2rem;
+    width: 60vw;
+    margin: auto;
+    display: flex;
+    margin-top: 5rem;
+    border-radius: 0.5rem;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
+.container p:nth-child(1) {
+    font-size: 2rem;
+    color: #424242;
+    font-weight: 600;
+}
+
+.container p:nth-child(2) {
+    margin: 2rem 0rem;
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: #757575;
+}
+
+.btnContainer {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.btn {
+    font-size: 1.5rem;
+    padding: 0.5rem 3rem;
+    background: #fff;
+    border: 2px solid #ffc119;
+    cursor: pointer;
+    transition: all 0.5s ease-in-out;
+}
+
+.btn:hover {
+    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+    transform: translateY(-3px);
+}
+
+.btnContainer div:nth-child(2) {
+    margin-left: 3rem;
+    background: #ffc119;
+}
diff --git a/apps/mock-ui/src/component/Notification/index.tsx b/apps/mock-ui/src/component/Notification/index.tsx
@@ -0,0 +1,41 @@
+import { markFarmerChoice } from "../../api";
+import styles from "./index.module.css";
+import { useNotification } from "@magicbell/magicbell-react";
+
+interface Props {
+  data: any;
+}
+
+const NotificationItem: React.FC<Props> = (props) => {
+  const { data } = props;
+  const notification = useNotification(data);
+  console.log("notification", notification, data);
+  const submitResponse = async (choice: string) => {
+    const url = `${data?.customAttributes?.collector?.url}/${data?.customAttributes?.id}/${choice}`;
+    const res = await markFarmerChoice(url).catch((err) => {
+      console.log(err);
+    });
+    console.log(res);
+    if (res) notification.markAsRead();
+    else {
+      notification.markAsRead();
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <p>{data.title}</p>
+      <p>{data.content}</p>
+      <div className={styles.btnContainer}>
+        <div className={styles.btn} onClick={() => submitResponse("reject")}>
+          Reject
+        </div>
+        <div className={styles.btn} onClick={() => submitResponse("accept")}>
+          Accept
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationItem;