leumas-private-shared/src/SchemaGrid/SchemaGrid.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
  Container,
  Grid,
  TextField,
  Pagination,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Button
} from '@mui/material';

const SchemasComponent = () => {
  const [schemas, setSchemas] = useState([]);
  const [filteredSchemas, setFilteredSchemas] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [page, setPage] = useState(1);
  const [open, setOpen] = useState(false);
  const [selectedSchema, setSelectedSchema] = useState(null);

  const schemasPerPage = 10;

  useEffect(() => {
    axios.get(`${import.meta.env.VITE_REACT_APP_LEUMAS_API_ENDPOINT}/schema`)
      .then(response => {
        setSchemas(response.data);
        setFilteredSchemas(response.data);
      })
      .catch(error => console.error('Error fetching schemas:', error));
  }, []);

  useEffect(() => {
    setFilteredSchemas(
      schemas.filter(schema => schema.toLowerCase().includes(searchQuery.toLowerCase()))
    );
  }, [searchQuery, schemas]);

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
  };

  const handlePageChange = (event, value) => {
    setPage(value);
  };

  const handleClickOpen = (schema) => {
    setSelectedSchema(schema);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setSelectedSchema(null);
  };

  const startIndex = (page - 1) * schemasPerPage;
  const displayedSchemas = filteredSchemas.slice(startIndex, startIndex + schemasPerPage);

  return (
    <Container>
      <TextField
        label="Search"
        variant="outlined"
        fullWidth
        margin="normal"
        value={searchQuery}
        onChange={handleSearchChange}
      />
      <Grid container spacing={2}>
        {displayedSchemas.map((schema, index) => (
          <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
            <Button
              variant="outlined"
              fullWidth
              onClick={() => handleClickOpen(schema)}
            >
              {schema}
            </Button>
          </Grid>
        ))}
      </Grid>
      <Pagination
        count={Math.ceil(filteredSchemas.length / schemasPerPage)}
        page={page}
        onChange={handlePageChange}
        color="primary"
        style={{ marginTop: '20px', display: 'flex', justifyContent: 'center' }}
      />
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Navigate to {selectedSchema}</DialogTitle>
        <DialogContent>
          <DialogActions>
            <Button onClick={() => window.location.href = `/public/${selectedSchema}`}>Public</Button>
            <Button onClick={() => window.location.href = `/owned/${selectedSchema}`}>Owned</Button>
            <Button onClick={() => window.location.href = `/purchased/${selectedSchema}`}>Purchased</Button>
            <Button onClick={() => window.location.href = `/create/${selectedSchema}`}>Create</Button>
            <Button onClick={() => window.location.href = `/new/${selectedSchema}`}>New</Button>
            <Button onClick={() => window.location.href = `/build/new/${selectedSchema}`}>Build New</Button>
          </DialogActions>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Close</Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
};

export default SchemasComponent;