From 02c6045738349b958888a0902ce4a4e2334ee0c7 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:15:48 -0500
Subject: [PATCH 1/7] state file

---
 data.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 data.js

diff --git a/data.js b/data.js
new file mode 100644
index 000000000..ca040f23f
--- /dev/null
+++ b/data.js
@@ -0,0 +1,32 @@
+export const data = [
+  {
+    name: "01/10/2023",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "01/20/2023",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "01/30/2023",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: "01/25/2023",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "02/09/2023",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+];

From 09483b0119d099cf8ee602da8bb66dcd1c0c9b31 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:16:22 -0500
Subject: [PATCH 2/7] state.js file

---
 State.js | 259 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 259 insertions(+)
 create mode 100644 State.js

diff --git a/State.js b/State.js
new file mode 100644
index 000000000..e81737a46
--- /dev/null
+++ b/State.js
@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from "react";
+import { Container, Table } from "react-bootstrap";
+import StateChart from "./StateChart";
+import DeleteModal from "../Shared/DeleteModal/DeleteModal";
+import CreateModal from "./CreateModal";
+import UpdateModal from "./UpdateModal";
+import { useParams } from "react-router-dom";
+
+const State = () => {
+  const { code, stateName } = useParams();
+  const [state,setState] = useState()
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [createModal, setCreateModal] = useState(false);
+  const [updateModal, setUpdateModal] = useState(false);
+  const [selected, setSelected] = useState({});
+  useEffect(()=>{
+    if (code == "AK"){
+      setState("Alaska")
+    }
+    if (code == "AR"){
+      setState("Arkansas")
+    }
+    if (code == "AZ"){
+      setState("Arizona")
+    }
+    if (code == "CA"){
+      setState("California")
+    }
+    if (code == "CO"){
+      setState("Colorado")
+    }
+    if (code == "CT"){
+      setState("Connecticut")
+    }
+    if (code == "AL"){
+      setState("Alabama")
+    }
+    
+  },[code])
+
+  const handleDelete = () => {};
+  return (
+    <div>
+      <Container>
+        <div>
+          <div>
+            <h3 className="text-center mt-5 mb-4">
+              Covid News of Albama on January, 2021
+            </h3>
+          </div>
+        </div>
+        <div>
+          <h4 className="text-start mt-5 mb-4">Chart View For January, 2021</h4>
+          <StateChart />
+        </div>
+        <div className=" mt-5 mb-4">
+          <div className="d-flex justify-content-between items-start mb-3">
+            <h4 className="text-start">Tabular View For January, 2021</h4>
+            <button
+              className="view-details-btn d-block"
+              onClick={() => {
+                setCreateModal(true);
+              }}
+            >
+              + New Entry
+            </button>
+          </div>
+
+          <Table className="mb-5" responsive striped bordered hover>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>State Name</th>
+                <th>Date</th>
+                <th>Positive</th>
+                <th>Recovered</th>
+                <th>Death</th>
+                <th>Update</th>
+                <th>Delete</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>1</td>
+                <td>{state}</td>
+                <td>01/10/2023</td>
+                <td>2000</td>
+                <td>1405</td>
+                <td>10</td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setUpdateModal(true);
+                    }}
+                    className="view-details-btn"
+                  >
+                    Update
+                  </button>
+                </td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setDeleteModal(true);
+                    }}
+                    className="delete-btn"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr>
+                <td>2</td>
+                <td>{state}</td>
+                <td>01/20/2023</td>
+                <td>2000</td>
+                <td>1405</td>
+                <td>10</td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setUpdateModal(true);
+                    }}
+                    className="view-details-btn"
+                  >
+                    Update
+                  </button>
+                </td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setDeleteModal(true);
+                    }}
+                    className="delete-btn"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr>
+                <td>3</td>
+                <td>{state}</td>
+                <td>01/30/2023</td>
+                <td>2000</td>
+                <td>1405</td>
+                <td>10</td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setUpdateModal(true);
+                    }}
+                    className="view-details-btn"
+                  >
+                    Update
+                  </button>
+                </td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setDeleteModal(true);
+                    }}
+                    className="delete-btn"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr>
+                <td>4</td>
+                <td>{state}</td>
+                <td>01/25/2023</td>
+                <td>2000</td>
+                <td>1405</td>
+                <td>10</td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setUpdateModal(true);
+                    }}
+                    className="view-details-btn"
+                  >
+                    Update
+                  </button>
+                </td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setDeleteModal(true);
+                    }}
+                    className="delete-btn"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+              <tr>
+                <td>5</td>
+                <td>{state }</td>
+                <td>02/09/2023</td>
+                <td>2000</td>
+                <td>1405</td>
+                <td>10</td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setUpdateModal(true);
+                    }}
+                    className="view-details-btn"
+                  >
+                    Update
+                  </button>
+                </td>
+                <td>
+                  <button
+                    onClick={() => {
+                      setSelected({});
+                      setDeleteModal(true);
+                    }}
+                    className="delete-btn"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </Table>
+        </div>
+      </Container>
+      {/* delete */}
+      <DeleteModal
+        show={deleteModal}
+        handleClose={() => setDeleteModal(false)}
+        deleteFunc={handleDelete}
+      />
+
+      {/* CreateModal */}
+      <CreateModal
+        show={createModal}
+        handleClose={() => setCreateModal(false)}
+      />
+
+      {/* update */}
+      <UpdateModal
+        show={updateModal}
+        handleClose={() => setUpdateModal(false)}
+      />
+    </div>
+  );
+};
+
+export default State;
\ No newline at end of file

From 26dd076ee28fc4e846ee3147c16e29d490961de2 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:16:54 -0500
Subject: [PATCH 3/7] state chart.js file

---
 StateChart.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 StateChart.js

diff --git a/StateChart.js b/StateChart.js
new file mode 100644
index 000000000..ea24e3ef7
--- /dev/null
+++ b/StateChart.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { Tooltip } from "react-bootstrap";
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  Label,
+  LineChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { data } from "./data";
+
+const StateChart = () => {
+  return (
+    <div className="chart-container">
+      {/* <ResponsiveContainer width={"100%"} height={"1000px"}> */}
+      <LineChart
+        width={1000}
+        height={300}
+        data={data}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        {/* <XAxis dataKey="name" /> */}
+        <XAxis dataKey="name">
+          <Label  value ="Dates" position="bottom" /> 
+        </XAxis>
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Line
+          type="monotone"
+          dataKey="pv"
+          stroke="#8884d8"
+          activeDot={{ r: 8 }}
+        />
+        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+      </LineChart>
+      {/* </ResponsiveContainer> */}
+    </div>
+  );
+};
+
+export default StateChart;

From fd0f033fae9a33e695a85d00d3c81f53da208524 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:17:18 -0500
Subject: [PATCH 4/7] css file for the state component

---
 State.css | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 State.css

diff --git a/State.css b/State.css
new file mode 100644
index 000000000..e69de29bb

From 6b4047491315ce19087f4cef752b402c63564c72 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:29:55 -0500
Subject: [PATCH 5/7] model code

---
 CreateModal.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 CreateModal.js

diff --git a/CreateModal.js b/CreateModal.js
new file mode 100644
index 000000000..45226f033
--- /dev/null
+++ b/CreateModal.js
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { Button, Form, Modal } from "react-bootstrap";
+
+const CreateModal = ({ show, handleClose }) => {
+  const [formData, setFormData] = useState({
+    stateCode: "AL",
+    date: "",
+    positive: "",
+    recovered: "",
+    death: "",
+  });
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  return (
+    <Modal show={show} onHide={handleClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>Update Data</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="">
+          <Form.Group className="mb-3" controlId="formBasicstate">
+            <Form.Label>State</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="stateCode"
+              value={formData?.stateCode}
+              type="text"
+              placeholder="Enter State"
+              disabled
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicDate">
+            <Form.Label>Date</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="date"
+              value={formData?.date}
+              type="date"
+              placeholder="Select Date"
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicPositive">
+            <Form.Label>Positive</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="positive"
+              value={formData?.positive}
+              type="text"
+              placeholder="Enter Positive"
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicRecovered">
+            <Form.Label>Recovered</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="recovered"
+              value={formData?.recovered}
+              type="text"
+              placeholder="Enter Recovered"
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicDeath">
+            <Form.Label>Death</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="death"
+              value={formData?.death}
+              type="text"
+              placeholder="Enter Death"
+            />
+          </Form.Group>
+        </div>
+      </Modal.Body>
+      <div className="d-flex justify-content-end items-end m-2">
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+        <button className="delete-btn ms-2" onClick={handleClose}>
+          Confirm
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default CreateModal;

From 91ee66de9429866bf2766674d2814afffd729cfb Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:30:14 -0500
Subject: [PATCH 6/7] create modal


From 473fb8b755db6b60075dc878ca8d638209ad5781 Mon Sep 17 00:00:00 2001
From: yashusf <125499177+yashusf@users.noreply.github.com>
Date: Sun, 19 Nov 2023 11:31:02 -0500
Subject: [PATCH 7/7] upload modal

---
 UpdateModal.js | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 UpdateModal.js

diff --git a/UpdateModal.js b/UpdateModal.js
new file mode 100644
index 000000000..366fb5f48
--- /dev/null
+++ b/UpdateModal.js
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Button, Form, Modal } from "react-bootstrap";
+
+const UpdateModal = ({ show, handleClose }) => {
+  const [formData, setFormData] = useState({
+    stateCode: "AL",
+    date: "",
+    positive: "",
+    recovered: "",
+    death: "",
+  });
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  return (
+    <Modal show={show} onHide={handleClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>Update Data</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="">
+          <Form.Group className="mb-3" controlId="formBasicstate">
+            <Form.Label>State</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="stateCode"
+              value={formData?.stateCode}
+              type="text"
+              placeholder="Enter State"
+              disabled
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicDate">
+            <Form.Label>Date</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="date"
+              value={formData?.date}
+              type="date"
+              placeholder="Select Date"
+              disabled
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicPositive">
+            <Form.Label>Positive</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="positive"
+              value={formData?.positive}
+              type="text"
+              placeholder="Enter Positive"
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicRecovered">
+            <Form.Label>Recovered</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="recovered"
+              value={formData?.recovered}
+              type="text"
+              placeholder="Enter Recovered"
+            />
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="formBasicDeath">
+            <Form.Label>Death</Form.Label>
+            <Form.Control
+              onChange={handleChange}
+              name="death"
+              value={formData?.death}
+              type="text"
+              placeholder="Enter Death"
+            />
+          </Form.Group>
+        </div>
+      </Modal.Body>
+      <div className="d-flex justify-content-end items-end m-2">
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+        <button className="delete-btn ms-2" onClick={handleClose}>
+          Confirm
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+export default UpdateModal;