integrate prettier formatter for frontend

.github/workflows/react-quality.yml

@@ -0,0 +1,21 @@
+name: React Code Quality Check
+
+on: 
+  pull_request:
+    paths:
+      - 'frontend/**'
+
+jobs:
+  python-check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14'
+    - name: Install dependencies and run Prettier
+      run: |
+        cd frontend
+        npm install
+        npx prettier --check .

.pre-commit-config.yaml

@@ -12,11 +12,16 @@ repos:
     -   id: flake8
         files: ^backend/  # Run flake8 only on files in the backend/ directory
         exclude: ^backend/alembic/versions/  # Exclude alembic migration files
-
 -   repo: https://github.com/pre-commit/mirrors-mypy
     rev: 'v1.7.1'  # Use the latest version
     hooks:
     -   id: mypy
         files: ^backend/
         exclude: ^backend/alembic/versions/  # Exclude alembic migration files
+-   repo: https://github.com/pre-commit/mirrors-prettier
+    rev: 'v3.1.0'
+    hooks:
+    -   id: prettier
+        files: ^frontend/  # Adjust this path to where your React code is
+
 

.vscode/settings.json

@@ -4,5 +4,21 @@
       "editor.formatOnSave": true,
       "files.trimTrailingWhitespace": true,
     },
-    "workbench.editor.enablePreview": false
+  "workbench.editor.enablePreview": false,
+  "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  },
 }

frontend/package.json

@@ -34,6 +34,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "prettier": "^3.2.2",
     "vite": "^5.0.0"
   }
 }

frontend/src/pages/dashboards/CreateDashboard.jsx

@@ -1,40 +1,42 @@
-import React, { useState, useEffect } from 'react';
-import { Box, TextField, Button, Typography } from '@mui/material';
-import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-import { API_URL } from '../../utils/constants';
+import React, { useState, useEffect } from "react";
+import { Box, TextField, Button, Typography } from "@mui/material";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { API_URL } from "../../utils/constants";
 
 const CreateDashboardPage = () => {
-  const [organization, setOrganization] = useState('');
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
+  const [organization, setOrganization] = useState("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
   const navigate = useNavigate();
 
   useEffect(() => {
     // Fetch organization
-    axios.get(`${API_URL}users/me/`)
-      .then(response => {
+    axios
+      .get(`${API_URL}users/me/`)
+      .then((response) => {
         setOrganization(response.data.organization);
       })
-      .catch(error => console.error('Error fetching organization:', error));
+      .catch((error) => console.error("Error fetching organization:", error));
   }, []);
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    axios.post(`${API_URL}dashboard/`, { name, description, organization })
-      .then(response => {
+    axios
+      .post(`${API_URL}dashboard/`, { name, description, organization })
+      .then((response) => {
         // Handle successful dashboard creation
-        console.log('Dashboard created:', response.data);
-        navigate('/dashboards')
+        console.log("Dashboard created:", response.data);
+        navigate("/dashboards");
       })
-      .catch(error => {
-        console.error('Error creating dashboard:', error);
+      .catch((error) => {
+        console.error("Error creating dashboard:", error);
       });
   };
 
   const handleBack = () => {
-    navigate('/dashboards')
-  }
+    navigate("/dashboards");
+  };
 
   return (
     <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
@@ -44,15 +46,15 @@ const CreateDashboardPage = () => {
         fullWidth
         label="Name"
         value={name}
-        onChange={e => setName(e.target.value)}
+        onChange={(e) => setName(e.target.value)}
         margin="normal"
       />
       <TextField
         required
         fullWidth
         label="Description"
         value={description}
-        onChange={e => setDescription(e.target.value)}
+        onChange={(e) => setDescription(e.target.value)}
         margin="normal"
       />
       <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>

frontend/src/pages/dashboards/Dashboard.jsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Box, Grid, IconButton, Paper, Typography } from '@mui/material';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
-import { useNavigate } from 'react-router-dom';
-import ChartDisplay from '../charts/ChartDisplay';
-import { API_URL } from '../../utils/constants';
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { Box, Grid, IconButton, Paper, Typography } from "@mui/material";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { useNavigate } from "react-router-dom";
+import ChartDisplay from "../charts/ChartDisplay";
+import { API_URL } from "../../utils/constants";
 
 function Dashboard() {
   const { dashboardId } = useParams();
@@ -14,34 +14,55 @@ function Dashboard() {
   useEffect(() => {
     if (dashboardId) {
       fetch(`${API_URL}/dashboard/?id=${dashboardId}`)
-        .then(response => response.json())
-        .then(data => setDashboardData(data))
-        .catch(error => console.error('Error fetching dashboard:', error));
+        .then((response) => response.json())
+        .then((data) => setDashboardData(data))
+        .catch((error) => console.error("Error fetching dashboard:", error));
     }
   }, [dashboardId]);
 
   const handleChartCreate = (event) => {
-    navigate(`/dashboards/${dashboardId}/charts/create`)
-  }
+    navigate(`/dashboards/${dashboardId}/charts/create`);
+  };
 
   if (!dashboardData) return <div>Loading...</div>;
-  
+
   return (
     <div>
       <Box>
-        <Typography variant="h5" gutterBottom>📊 {dashboardData.name} </Typography>
-        <Typography variant="subtitle1" gutterBottom>Description: {dashboardData.description}</Typography>
+        <Typography variant="h5" gutterBottom>
+          📊 {dashboardData.name}{" "}
+        </Typography>
+        <Typography variant="subtitle1" gutterBottom>
+          Description: {dashboardData.description}
+        </Typography>
         <Grid container spacing={2}>
-          {dashboardData.charts && dashboardData.charts.map((chart, index) => (
-            <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
-              <Paper elevation={3} sx={{ padding: 2 }}>
-                <ChartDisplay chartType={chart.config.type} config={chart.config} />
-              </Paper>
-            </Grid>
-          ))}
+          {dashboardData.charts &&
+            dashboardData.charts.map((chart, index) => (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
+                <Paper elevation={3} sx={{ padding: 2 }}>
+                  <ChartDisplay
+                    chartType={chart.config.type}
+                    config={chart.config}
+                  />
+                </Paper>
+              </Grid>
+            ))}
           <Grid item xs={12} sm={6} md={4} lg={3}>
-            <Paper elevation={3} sx={{ padding: 2, display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-              <IconButton color="primary" aria-label="add new chart" onClick={handleChartCreate}>
+            <Paper
+              elevation={3}
+              sx={{
+                padding: 2,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+              }}
+            >
+              <IconButton
+                color="primary"
+                aria-label="add new chart"
+                onClick={handleChartCreate}
+              >
                 <AddCircleOutlineIcon style={{ fontSize: 60 }} />
               </IconButton>
             </Paper>

frontend/src/pages/dashboards/DashboardTable.jsx

@@ -1,45 +1,62 @@
-import React, { useState, useEffect } from 'react';
-import { Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@mui/material';
-import { Link } from 'react-router-dom';
-import { format } from 'date-fns';
-import { API_URL } from '../../utils/constants';
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
+import { Link } from "react-router-dom";
+import { format } from "date-fns";
+import { API_URL } from "../../utils/constants";
 
 function DashboardTable() {
   const [dashboards, setDashboards] = useState([]);
 
   useEffect(() => {
     fetch(`${API_URL}/dashboards/`)
-      .then(response => response.json())
-      .then(data => setDashboards(data))
-      .catch(error => console.error('Error fetching dashboards:', error));
+      .then((response) => response.json())
+      .then((data) => setDashboards(data))
+      .catch((error) => console.error("Error fetching dashboards:", error));
   }, []);
 
   return (
     <Table>
-    <TableHead>
+      <TableHead>
         <TableRow>
-        <TableCell>Name</TableCell>
-        <TableCell>Description</TableCell>
-        <TableCell>Created at</TableCell>
-        <TableCell>Updated at</TableCell>
+          <TableCell>Name</TableCell>
+          <TableCell>Description</TableCell>
+          <TableCell>Created at</TableCell>
+          <TableCell>Updated at</TableCell>
         </TableRow>
-    </TableHead>
-    <TableBody>
+      </TableHead>
+      <TableBody>
         {dashboards.map((dashboard) => (
-        <TableRow key={dashboard.name} hover>
+          <TableRow key={dashboard.name} hover>
             <TableCell>
-            <Link to={`/dashboards/${dashboard.id}`}>{dashboard.name}</Link>
+              <Link to={`/dashboards/${dashboard.id}`}>{dashboard.name}</Link>
             </TableCell>
-            <TableCell style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                <Tooltip title={dashboard.description} placement="top">
-                    <div>{dashboard.description}</div>
-                </Tooltip>
+            <TableCell
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              <Tooltip title={dashboard.description} placement="top">
+                <div>{dashboard.description}</div>
+              </Tooltip>
             </TableCell>
-            <TableCell>{format(new Date(dashboard.created_at), 'yyyy-MM-dd')}</TableCell>
-            <TableCell>{format(new Date(dashboard.updated_at), 'yyyy-MM-dd')}</TableCell>
-        </TableRow>
+            <TableCell>
+              {format(new Date(dashboard.created_at), "yyyy-MM-dd")}
+            </TableCell>
+            <TableCell>
+              {format(new Date(dashboard.updated_at), "yyyy-MM-dd")}
+            </TableCell>
+          </TableRow>
         ))}
-    </TableBody>
+      </TableBody>
     </Table>
   );
 }

frontend/src/pages/dashboards/DashboardsMenuPage.jsx

@@ -1,19 +1,25 @@
-import React from 'react';
-import { Box, Typography, Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
-import DashboardTable from './DashboardTable';
+import React from "react";
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import DashboardTable from "./DashboardTable";
 
 function DashboardMenuPage() {
   const navigate = useNavigate();
 
   const handleCreateDashboard = () => {
-    navigate('/dashboards/create')
+    navigate("/dashboards/create");
   };
 
   return (
     <Box>
-      <Typography variant="h4" gutterBottom>📊 Dashboards</Typography>
-      <Button variant="contained" onClick={handleCreateDashboard} sx={{ mb: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        📊 Dashboards
+      </Typography>
+      <Button
+        variant="contained"
+        onClick={handleCreateDashboard}
+        sx={{ mb: 2 }}
+      >
         Create New Dashboard
       </Button>
       <DashboardTable />