Merge pull request #511 from techcomrade/feature/redis

Feature/redis

frontend_web/package.json

@@ -17,7 +17,7 @@
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-cookie": "^7.1.0",

frontend_web/src/App.js

@@ -2,9 +2,6 @@ import DefaultLayout from "./layouts/DefaultLayout/DefaultLayout";
 import NotAuth from "./pages/NotAuth/notauth";
 import React, { useState, useEffect } from 'react';
 
-
-
-
 function App() {
   const hasCookie = window.hasCookie;
   return (

frontend_web/src/components/chart/LineChart.js

@@ -1,39 +1,94 @@
-import ReactApexChart from "react-apexcharts";
-import { Typography } from "antd";
-import { MinusOutlined } from "@ant-design/icons";
-import lineChart from "./configs/lineChart";
-import "./chart.scss";
-import { useTranslation } from "react-i18next";
+// LineChart.js
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getStatistic, loadStatus } from '../../redux/reducer/statisticSlice';
+import ReactApexChart from 'react-apexcharts';
+import { Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 function LineChart() {
-  const { Title, Paragraph } = Typography;
-  const { t, i18n } = useTranslation();
+  const dispatch = useDispatch();
+  const { data, loadDataStatus } = useSelector((state) => state.statistic);
+  const { Title } = Typography;
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    dispatch(getStatistic());
+  }, [dispatch]);
+
+  const lineChart = {
+    series: [
+      {
+        name: 'Record Count',
+        data: data.countNewRecordInMonth?.map((record) => record.record_count) || [],
+      },
+    ],
+    options: {
+      chart: {
+        width: '100%',
+        height: 350,
+        type: 'area',
+        toolbar: {
+          show: false,
+        },
+      },
+      legend: {
+        show: false,
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        curve: 'smooth',
+      },
+      yaxis: {
+        labels: {
+          style: {
+            fontSize: '14px',
+            fontWeight: 600,
+            colors: ['#8c8c8c'],
+          },
+        },
+      },
+      xaxis: {
+        labels: {
+          style: {
+            fontSize: '14px',
+            fontWeight: 600,
+            colors: ['#8c8c8c'],
+          },
+        },
+        categories: data.countNewRecordInMonth?.map((record) => `Month ${record.month}`) || [],
+      },
+      tooltip: {
+        y: {
+          formatter: function (val) {
+            return val;
+          },
+        },
+      },
+    },
+  };
 
   return (
     <>
       <div className="linechart">
         <div>
-          <Title level={5}>{t("homepage.number-of-new-recordings")}</Title>
-          {/* <Paragraph className="lastweek">
-            than last week <span className="bnb2">+20%</span>
-          </Paragraph> */}
+          <Title level={5}>{t('homepage.number-of-new-recordings')}</Title>
         </div>
-        {/* <div className="sales">
-          <ul>
-            <li>{<MinusOutlined />} Traffic</li>
-            <li>{<MinusOutlined />} Sales</li>
-          </ul>
-        </div> */}
       </div>
-
-      <ReactApexChart
-        className="full-width"
-        options={lineChart.options}
-        series={lineChart.series}
-        type="area"
-        height={350}
-        width={"600px"}
-      />
+      {loadDataStatus === loadStatus.Loading ? (
+        <p>Loading...</p>
+      ) : (
+        <ReactApexChart
+          className="full-width"
+          options={lineChart.options}
+          series={lineChart.series}
+          type="area"
+          height={350}
+          width={'600px'}
+        />
+      )}
     </>
   );
 }

frontend_web/src/components/chart/configs/eChart.js

@@ -2,7 +2,7 @@ const eChart = {
   series: [
     {
       name: "Sales",
-      data: [0,1, 1, 2, 1, 3],
+      data: [0,1, 1, 2, 1, 10],
       color: "#fff",
     },
   ],

frontend_web/src/components/chart/configs/lineChart.js

@@ -2,7 +2,7 @@ const lineChart = {
   series: [
     {
       name: "Websites",
-      data: [ 0, 1, 3, 3, 4, 2],
+      data: [ 0, 1, 3, 3, 4, 15],
       offsetY: 0,
     },
   ],

frontend_web/src/pages/Home/home.js

@@ -14,6 +14,8 @@ const Home = () => {
   const [dropdownData, setDropData] = useState([]);
   const { Title } = Typography;
   const { t } = useTranslation();
+  const [count, setCount] = useState([]);
+
 
   useEffect(() => {
     dispatch(getStatistic(dataState));
@@ -25,6 +27,54 @@ const Home = () => {
     }
   }, [dataState.loadDataStatus]);
 
+  // console.log(dataState.data.countNewRecordInMonth);
+
+  //Get data
+  // useEffect(() => {
+  //   if (dataState.loadDataStatus === loadStatus.Success){
+  //     const rawData = dataState.data;
+  //   }
+  // })
+
+  useEffect(() => {
+    if (dataState.loadDataStatus === loadStatus.Success) {
+      setDropData(dataState.data);
+
+      const updatedCount = [
+        {
+          today: t("label.doctor"),
+          title: dataState.data.doctors,
+          persent: "+20%",
+          icon: profile,
+          bnb: "bnb2",
+        },
+        {
+          today: t("label.patient"),
+          title: dataState.data.patients,
+          persent: "+10%",
+          icon: profile,
+          bnb: "bnb2",
+        },
+        {
+          today: t("label.device"),
+          title: dataState.data.device_count,
+          persent: "",
+          icon: heart,
+          bnb: "redtext",
+        },
+        {
+          today: t("label.record"),
+          title: dataState.data.record_count,
+          persent: "+10%",
+          icon: cart,
+          bnb: "bnb2",
+        },
+      ];
+      setCount(updatedCount);
+    }
+  }, [dataState.loadDataStatus, dataState.data, t]);
+
+
   const profile = [
     <svg
       width="22"
@@ -86,36 +136,35 @@ const Home = () => {
       ></path>
     </svg>,
   ];
-  const count = [
-    {
-      today: t("label.doctor"),
-      title: "2",
-      persent: "+20%",
-      icon: profile,
-      bnb: "bnb2",
-    },
+  //   {
+  //     today: t("label.doctor"),
+  //     title: "2",
+  //     persent: "+20%",
+  //     icon: profile,
+  //     bnb: "bnb2",
+  //   },
 
-    {
-      today: t("label.patient"),
-      title: "7",
-      persent: "+10%",
-      icon: profile,
-      bnb: "bnb2",
-    },
-    {
-      today: t("label.device"),
-      title: "3",
-      persent: "",
-      icon: heart,
-      bnb: "redtext",
-    },{
-      today: t("label.record"),
-      title: "5",
-      persent: "+10%",
-      icon: cart,
-      bnb: "bnb2",
-    },
-  ];
+  //   {
+  //     today: t("label.patient"),
+  //     title: "7",
+  //     persent: "+10%",
+  //     icon: profile,
+  //     bnb: "bnb2",
+  //   },
+  //   {
+  //     today: t("label.device"),
+  //     title: "3",
+  //     persent: "",
+  //     icon: heart,
+  //     bnb: "redtext",
+  //   },{
+  //     today: t("label.record"),
+  //     title: "5",
+  //     persent: "+10%",
+  //     icon: cart,
+  //     bnb: "bnb2",
+  //   },
+  // ];
 
   return (
     <>

server-web/config/redis.js

@@ -1,12 +1,27 @@
-const { createClient} = require("redis");
-const client = createClient();
-
-client.on('connect', () => {
-    console.log('Redis connected');
-})
-client.on('error', err => {
-    console.log('Redis client error', err);
-})
-client.connect();
-
-module.exports = client;
+const redis = require('redis');
+
+const client = redis.createClient({
+    socket: {
+        port: 6380,
+        host: '127.0.0.1'
+    }
+});
+
+client.on('error', (err) => {
+    console.error('Redis client error', err);
+});
+
+async function connectRedis() {
+    try {
+        await client.connect();
+        console.log('Redis connected');
+        const pong = await client.ping();
+        console.log(pong);
+    } catch (err) {
+        console.error('Connection error:', err);
+    }
+}
+
+connectRedis();
+
+module.exports = client;

server-web/controllers/StatisticController.js

@@ -5,7 +5,7 @@ class StatisticController{
         console.log(`[P]:::Count total: `);
         const total = await StatisticService.getStatistics();
         return res.status(200).json({
-          message: "Count user successful!",
+          message: "Count successful!",
           metadata: total,
         });       
     }

server-web/middlewares/AuthenMiddleware.js

@@ -5,7 +5,6 @@ class AuthenMiddleware {
     const validation = UserService.validateUser(req.body).error;
     if (validation === undefined) {
       console.log("Validate successful!");
-
       next();
     } else {
       return res.status(400).json({

server-web/models/RecordModel/RecordRepository.js

@@ -139,6 +139,13 @@ class RecordRepository {
     return await RecordDTO.count();
   }
 
+  async countNewRecordInMonth(){
+    const [result, metadata] = await sequelize.query(
+      "SELECT EXTRACT(MONTH FROM FROM_UNIXTIME(start_time / 1000)) AS month, COUNT(*) AS record_count FROM records GROUP BY month ORDER BY month"
+    )
+    return result;
+  }
+
   async getRecordByDoctorId(doctor_id) {
     return await sequelize.query(
       "SELECT re.*, de.device_name, u.username FROM fmecg.records as re LEFT JOIN fmecg.patient_doctor_assignment pda ON re.user_id = pda.patient_id LEFT JOIN fmecg.devices as de ON re.user_id = de.user_id LEFT JOIN fmecg.users AS u ON u.id = re.user_id  WHERE pda.doctor_id = :doctor",

server-web/models/TokenModel/TokenDTO.js

@@ -2,6 +2,7 @@ const Sequelize = require("sequelize");
 const sequelize = require("../../config/sequelize");
 const Account = require("../AccountModel/AccountDTO");
 
+
 const Token = sequelize.define("tokens", {
   id: {
     type: Sequelize.STRING,
@@ -12,7 +13,7 @@ const Token = sequelize.define("tokens", {
     type: Sequelize.STRING,
     allowNull: false,
     references: {
-      model: Account,
+      model: Account, 
       key: "id",
     },
   },