diff --git a/react-frontend/package-lock.json b/react-frontend/package-lock.json index 5bf7837..87a46c8 100644 --- a/react-frontend/package-lock.json +++ b/react-frontend/package-lock.json @@ -23,12 +23,6 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "eslint": "^8.57.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.3", - "eslint-plugin-react-hooks": "^4.6.2", - "prettier": "^3.3.2", "tailwindcss": "^3.4.4" } }, @@ -3441,18 +3435,6 @@ "node": ">=14" } }, - "node_modules/@pkgr/core": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", - "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", - "dev": true, - "engines": { - "node": "^12.20.0 || ^14.18.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/unts" - } - }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz", @@ -7412,18 +7394,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint-config-prettier": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", - "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", - "dev": true, - "bin": { - "eslint-config-prettier": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=7.0.0" - } - }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -7627,36 +7597,6 @@ "deep-equal": "^2.0.5" } }, - "node_modules/eslint-plugin-prettier": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", - "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", - "dev": true, - "dependencies": { - "prettier-linter-helpers": "^1.0.0", - "synckit": "^0.8.6" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint-plugin-prettier" - }, - "peerDependencies": { - "@types/eslint": ">=8.0.0", - "eslint": ">=8.0.0", - "eslint-config-prettier": "*", - "prettier": ">=3.0.0" - }, - "peerDependenciesMeta": { - "@types/eslint": { - "optional": true - }, - "eslint-config-prettier": { - "optional": true - } - } - }, "node_modules/eslint-plugin-react": { "version": "7.34.3", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.3.tgz", @@ -8119,12 +8059,6 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, - "node_modules/fast-diff": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", - "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", - "dev": true - }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -14220,33 +14154,6 @@ "node": ">= 0.8.0" } }, - "node_modules/prettier": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", - "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", - "dev": true, - "bin": { - "prettier": "bin/prettier.cjs" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, - "node_modules/prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "dependencies": { - "fast-diff": "^1.1.2" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -16450,22 +16357,6 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, - "node_modules/synckit": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", - "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", - "dev": true, - "dependencies": { - "@pkgr/core": "^0.1.0", - "tslib": "^2.6.2" - }, - "engines": { - "node": "^14.18.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/unts" - } - }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/react-frontend/src/components/Filter/DistroFilter.css b/react-frontend/src/components/Filter/DistroFilter.css new file mode 100644 index 0000000..28add68 --- /dev/null +++ b/react-frontend/src/components/Filter/DistroFilter.css @@ -0,0 +1,40 @@ +.distro-filter-wrapper { + align-items: center; + display: flex; + flex: 0 0 auto; + gap: 15px; + justify-content: center; + position: relative; + width: 1181px; +} + +.input_group { + font-size: 16px; + font-weight: bold; +} + +.input_group label { + padding-left: 10px; + font-weight: normal; + vertical-align: middle; +} + +.input_group input[type="checkbox"] { + margin-right: 3px; +} + +#chkAll { + margin-right: 2px; +} + +.distro-filter-wrapper .input_group { + margin-bottom: 15px; +} + +.distro-filter-wrapper input[type="text"] { + width: 100%; + padding: 8px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; +} diff --git a/react-frontend/src/components/Filter/DistroFilter.js b/react-frontend/src/components/Filter/DistroFilter.js new file mode 100644 index 0000000..2babd42 --- /dev/null +++ b/react-frontend/src/components/Filter/DistroFilter.js @@ -0,0 +1,93 @@ +import React, { useState, useEffect } from 'react'; +import './DistroFilter.css'; + +const DistroFilters = () => { + const [osList, setOsList] = useState([]); + const [selectedOS, setSelectedOS] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + const [searchDescription, setSearchDescription] = useState(false); + const [loading, setLoading] = useState(true); // New loading state + + useEffect(() => { + const fetchOsList = async () => { + try { + const response = await fetch('https://sdt.openmainframeproject.org/sdt/getSupportedDistros'); + if (!response.ok) { + throw new Error('Failed to fetch OS list'); + } + const data = await response.json(); + const formattedOsList = Object.entries(data).map(([osName, versions]) => ({ + type: osName, + description: Object.keys(versions).join(', ') + })); + setOsList(formattedOsList); + setLoading(false); + } catch (error) { + console.error('Error fetching OS list:', error); + setLoading(false); + } + }; + + fetchOsList(); + }, []); + + const toggleOS = (osName) => { + const index = selectedOS.indexOf(osName); + if (index === -1) { + setSelectedOS([...selectedOS, osName]); + } else { + setSelectedOS(selectedOS.filter(os => os !== osName)); + } + }; + + const toggleAll = (event) => { + if (event.target.checked) { + const allOS = osList.map(os => os.type); + setSelectedOS(allOS); + } else { + setSelectedOS([]); + } + }; + + // Show loading indicator while fetching data + if (loading) { + return


; + } + + // Render component after data is loaded + return ( +
+
+
+
+
Select Operating System:
+
+ + + {osList.map((os, index) => ( + + ))} +
+
+
+
+
+ ); +}; + +export default DistroFilters; \ No newline at end of file diff --git a/react-frontend/src/components/SearchBar.jsx b/react-frontend/src/components/SearchBar.jsx index edeba21..ba63a46 100644 --- a/react-frontend/src/components/SearchBar.jsx +++ b/react-frontend/src/components/SearchBar.jsx @@ -1,64 +1,109 @@ import React, { useState } from "react"; - import omfLogo from "../images/openmainframe-logo.png"; function SearchBar({ setResults }) { const [input, setInput] = useState(""); + const [searchDescription, setSearchDescription] = useState(false); + const [searchExact, setSearchExact] = useState(false); - const fetchData = (value) => { + const fetchData = (value, exact) => { fetch( - "https://raw.githubusercontent.com/openmainframeproject/software-discovery-tool-data/d37ec20db63776674dae7beccfd95e152b0d1e55/data_files/IBMZ_container_registry.json" + // "https://raw.githubusercontent.com/openmainframeproject/software-discovery-tool-data/d37ec20db63776674dae7beccfd95e152b0d1e55/data_files/IBMZ_container_registry.json" + `https://sdt.openmainframeproject.org/sdt/searchPackages?search_term=${value}&exact_match=${exact}&search_bit_flag=4398046511103` ) - .then((response) => response.json()) - .then((json) => { - const results = json.filter((software) => { - return ( - value && - software && - software.packageName && - software.packageName.toLowerCase().includes(value) - ); - }); - setResults(results); - }); + .then((response) => { + response.json(); + console.log(response) + }) + // .then((json) => { + // const results = json.filter((software) => { + // if (!value || !software) { + // return false; + // } + + // const nameMatch = software.packageName.toLowerCase().includes(value.toLowerCase()); + // const descriptionMatch = + // searchDescription && software.description && software.description.toLowerCase().includes(value.toLowerCase()); + + // if (exact) { + // return ( + // software.packageName.toLowerCase() === value.toLowerCase() || + // (searchDescription && software.description && software.description.toLowerCase() === value.toLowerCase()) + // ); + // } else { + // return nameMatch || descriptionMatch; + // } + // }); + // console.log(results); + // // setResults(results); + // }); }; const handleChange = (value) => { setInput(value); - fetchData(value); + }; + + const handleSearch = () => { + fetchData(input, false); + }; + + const handleSearchExact = () => { + fetchData(input, true); + }; + + const handleCheckboxChange = () => { + setSearchDescription(!searchDescription); }; return ( -
-
- image_11 -
-
- handleChange(e.target.value)} - /> -
-
- {/* - - */} - - - + +
+
+
+ +
+
+ Enter the name of the package or at least three characters to enable pattern search. Wildcard ('*') can be used either before or after the search keywords.
); } -export default SearchBar; +export default SearchBar; \ No newline at end of file diff --git a/react-frontend/src/screens/LandingPage.jsx b/react-frontend/src/screens/LandingPage.jsx index 7e29997..160cc1b 100644 --- a/react-frontend/src/screens/LandingPage.jsx +++ b/react-frontend/src/screens/LandingPage.jsx @@ -2,13 +2,14 @@ import HeroSection from "../components/HeroSection"; import SearchBar from "../components/SearchBar"; import Carousel from "../components/Carousel/Carousel"; +import DistroFilters from "../components/Filter/DistroFilter"; // import SearchResults from "../components/SearchResults"; function LandingPage() { // const [results, setResults] = useState([]); return (
- {/* */} +