Merge pull request #4 from Rhymlore/releases-table

Added releases table with filters and download.

components/DownloadsComponent.tsx

@@ -0,0 +1,146 @@
+"use client"
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, CircularProgress } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import fetchFilteredReleases, { FilteredRelease } from "../utils/fetchReleases"; // Update this import based on actual file structure
+import {OperatingSystems, Architectures, Version} from './Filters'; // Ensure these imports are correctly structured
+import ReleasesTable from './ReleasesTable';
+import data from '../public/static/releases-table-data.json';
+
+const DownloadsComponent: React.FC = () => {
+    const [originalData, setOriginalData] = useState<FilteredRelease[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const [arch, setArch] = React.useState<string>('x86_64');
+    const [os, setOs] = React.useState<string>('linux'); 
+    const [version, setVersion] = React.useState<string>('v7.5');
+
+    const theme = useTheme();
+
+    const handleArch = (
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
+        newArch: string | null,
+    ) => {
+        if (newArch !== arch) {
+            setArch(newArch || '');
+            } else {
+            setArch('');
+            }
+        };
+
+    const handleOs = (
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
+        newOs: string | null,
+    ) => {
+        if (newOs !== os) {
+            setOs(newOs || '');
+            } else {
+            setOs('');
+            }
+    };
+    const handleVersion = (
+        event: React.MouseEvent<HTMLElement, MouseEvent>,
+        newVersion: string | null,
+    ) => {
+        if (newVersion) {
+        setVersion(newVersion);
+        }
+    }
+
+    useEffect(() => {
+        const fetchAssets = async () => {
+            setLoading(true);
+            try {
+                const releases = await fetchFilteredReleases(); // This function should return an array of FilteredRelease
+                setOriginalData(releases);
+                console.log(releases);
+            } catch (e) {
+                setError('Failed to fetch release assets');
+                console.error(e);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchAssets();
+    }, []);
+
+    const uniqueVersions = useMemo<string[]>(() => {
+        const unique = new Set<string>();
+        originalData.forEach(release => {
+            unique.add(release.version.split('.').slice(0, 2).join('.')); // Only major.minor
+        });
+        return Array.from(unique);
+    }, [originalData]);
+
+    const filteredData = useMemo(() => {
+        // Filter releases based on the selected version
+        const filteredReleases = originalData.filter(release => 
+          version ? release.version.startsWith(version) : true
+        );
+
+        // Now, filter assets within those releases based on the selected OS and Arch
+        const releasesWithFilteredAssets = filteredReleases.map(release => {
+          const filteredAssets = release.assets.filter(asset => {
+            const osMatch = !os || asset.operatingSystem.toLowerCase().includes(os.toLowerCase());
+            const archMatch = !arch || asset.architecture.includes(arch) || 
+                              (arch === 'PPC64' && (asset.architecture.includes('ppc64el') || asset.architecture.includes('ppc64le')));
+
+            return osMatch && archMatch;
+          });
+
+          // Return the release with the filtered assets
+          return { ...release, assets: filteredAssets };
+        }).filter(release => release.assets.length > 0); // Keep only releases with matching assets
+
+        return releasesWithFilteredAssets;
+      }, [arch, os, version, originalData]);
+
+
+    const renderContent = () => {
+        if (loading) {
+            return <CircularProgress />;
+        } else if (error) {
+            return <p>{error}</p>;
+        } else {
+            return (
+                <>
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '100%',
+                        margin: theme.spacing(1),
+                        [theme.breakpoints.down('sm')]: {
+                            flexDirection: 'column',
+                        },
+                    }}>
+                        <OperatingSystems handle={handleOs} defaultOs={os} data={data.operating_systems} />
+                        <Architectures handle={handleArch} defaultArch={arch} data={data.architectures} />
+                        <Version handle={handleVersion} defaultVersion={version} data={uniqueVersions} />
+                    </Box>
+                    {filteredData.map(release => (
+                        <ReleasesTable key={release.version} release={release} data={data.table_rows} /> // Assuming data.table_headers is correct
+                    ))}
+                </>
+            );
+        }
+    };
+
+    return (
+        <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            margin: '1em auto',
+            overflow: 'auto',
+            [theme.breakpoints.down('md')]: {
+                padding: theme.spacing(2),
+            },
+        }}>
+            {renderContent()}
+        </Box>
+    );
+};
+
+export default DownloadsComponent;

components/Filters.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+
+interface VersionProps {
+  handle: (event: React.MouseEvent<HTMLElement, MouseEvent>, newAlignment: string) => void;
+  defaultVersion: string;
+  data: Array<string>;
+}
+
+interface ArchitecturesProps {
+  handle: (event: React.MouseEvent<HTMLElement, MouseEvent>, newAlignment: string) => void;
+  defaultArch: string;
+  data: Array<string>;
+}
+
+interface OperatingSystemsProps {
+  handle: (event: React.MouseEvent<HTMLElement, MouseEvent>, newAlignment: string) => void;
+  defaultOs: string;
+  data: Array<string>;
+}
+
+export const Architectures:React.FC<ArchitecturesProps> = ({handle, defaultArch, data}) => {
+  return (
+      <Box sx={{ display: "flex", flexDirection:"column", alignItems:"center", margin: "0 10px"}}>
+          <Typography variant="overline" display="block" gutterBottom>
+          Architectures
+          </Typography>
+          <ToggleButtonGroup
+              color="primary"
+              value={defaultArch}
+              exclusive
+              aria-label="Architecture"
+              onChange={handle}
+              size='small'
+          >   
+              {data.map((arch) => (
+              <ToggleButton key={arch} value={arch}>{arch}</ToggleButton>
+              ))}
+          </ToggleButtonGroup>
+      </Box>
+  )
+}
+
+
+export const OperatingSystems:React.FC<OperatingSystemsProps> = ({handle, defaultOs, data}) => {
+  return (
+      <Box sx={{ display: "flex", flexDirection:"column", alignItems:"center", margin: "0 10px 0 0"}}>
+          <Typography variant="overline" display="block" gutterBottom>
+          Operating Systems
+          </Typography>
+          <ToggleButtonGroup
+              color="primary"
+              value={defaultOs}
+              exclusive
+              aria-label="Platform"
+              onChange={handle}
+              size='small'
+          >   
+              {data.map((operating_systems) => (
+              <ToggleButton key={operating_systems} value={operating_systems}>{operating_systems}</ToggleButton>
+              ))}
+          </ToggleButtonGroup>
+      </Box>
+  )
+}
+
+export const Version:React.FC<VersionProps> = ({handle, defaultVersion, data}) => {
+  return (
+    <Box sx={{ display: "flex", flexDirection:"column", alignItems:"center", margin: "0 0 0 10px"}}>
+      <Typography variant="overline" display="block" gutterBottom>
+      Versions
+      </Typography>
+      <ToggleButtonGroup
+        color="primary"
+        value={defaultVersion}
+        exclusive
+        aria-label="Version"
+        onChange={handle}
+        size='small'
+      >
+        {data.map((version) => (
+          <ToggleButton key={version} value={version}>{version}</ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </Box>
+
+  )
+}

components/ReleasesTable.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { 
+    Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Link} 
+    from '@mui/material';
+import { FilteredRelease } from '../utils/fetchReleases';
+
+
+
+interface ReleasesTableProps {
+    data: Array<string>;
+    release: FilteredRelease;
+}
+
+  const ReleasesTable: React.FC<ReleasesTableProps> = ({ release , data }) => {
+    return(
+        <TableContainer component={Paper} sx={{marginTop:"15px"}}>
+        <Table aria-label="simple table">
+            <TableHead>
+            <TableRow>
+                {data.map((tableRows) => (
+                <TableCell align='center' key={tableRows}><Typography variant='h6' >{tableRows}</Typography></TableCell>
+                ))}
+            </TableRow>
+            </TableHead>
+            <TableBody>
+                {release.assets.map((asset, index) => (
+                    <TableRow key={index}>
+                    <TableCell align='center'>{release.version}</TableCell>
+                    <TableCell align='center'>{asset.operatingSystem}</TableCell>
+                    <TableCell align='center'>{asset.architecture}</TableCell>
+                    <TableCell align='center'>
+                        <Link href={asset.downloadUrl}>{asset.name}</Link>
+                    </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+        </TableContainer>
+    );
+}
+
+export default ReleasesTable;