From 586d8356318e7903fc99a5784385890711a1d912 Mon Sep 17 00:00:00 2001 From: midas_hsiung Date: Sun, 3 Nov 2024 07:37:54 +0800 Subject: [PATCH 1/2] implement UI for the four pages --- frontend/src/{pages => assets/css}/home.css | 0 frontend/src/assets/css/login.css | 41 ++++++++ .../src/{pages => assets/css}/pageLayout.css | 0 frontend/src/{pages => components}/login.tsx | 2 +- frontend/src/pages/download.tsx | 54 +++++++++- frontend/src/pages/home.tsx | 4 +- frontend/src/pages/login.css | 42 -------- frontend/src/pages/pageLayout.tsx | 2 +- frontend/src/pages/rating.tsx | 45 ++++++++- frontend/src/pages/update.tsx | 98 ++++++++++++++++++- frontend/src/pages/upload.tsx | 98 ++++++++++++++++++- 11 files changed, 327 insertions(+), 59 deletions(-) rename frontend/src/{pages => assets/css}/home.css (100%) create mode 100644 frontend/src/assets/css/login.css rename frontend/src/{pages => assets/css}/pageLayout.css (100%) rename frontend/src/{pages => components}/login.tsx (95%) delete mode 100644 frontend/src/pages/login.css diff --git a/frontend/src/pages/home.css b/frontend/src/assets/css/home.css similarity index 100% rename from frontend/src/pages/home.css rename to frontend/src/assets/css/home.css diff --git a/frontend/src/assets/css/login.css b/frontend/src/assets/css/login.css new file mode 100644 index 0000000..8b517fa --- /dev/null +++ b/frontend/src/assets/css/login.css @@ -0,0 +1,41 @@ +.login-block { + max-width: 300px; + margin: 20px auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 10px; + background-color: #f9f9f9; + text-align: center; +} + +.login-block input { + width: 100%; + padding: 10px; + margin: 10px -10px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.button-group { + display: flex; + justify-content: space-between; +} + +.button-group button { + width: 45%; + padding: 10px; + background-color: #61dafb; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; +} + +.button-group button:hover { + background-color: #21a1f1; +} + +.error { + color: red; + margin-top: 10px; +} diff --git a/frontend/src/pages/pageLayout.css b/frontend/src/assets/css/pageLayout.css similarity index 100% rename from frontend/src/pages/pageLayout.css rename to frontend/src/assets/css/pageLayout.css diff --git a/frontend/src/pages/login.tsx b/frontend/src/components/login.tsx similarity index 95% rename from frontend/src/pages/login.tsx rename to frontend/src/components/login.tsx index 6c084d9..526b5a3 100644 --- a/frontend/src/pages/login.tsx +++ b/frontend/src/components/login.tsx @@ -1,6 +1,6 @@ // src/login.tsx import React, { useState } from 'react'; -import './login.css'; // Optional: For styling +import '../assets/css/login.css'; // Optional: For styling interface AuthForm { username: string; diff --git a/frontend/src/pages/download.tsx b/frontend/src/pages/download.tsx index 3a4940a..b123e2e 100644 --- a/frontend/src/pages/download.tsx +++ b/frontend/src/pages/download.tsx @@ -1,10 +1,58 @@ -import React from 'react'; +import React, { useState } from 'react'; import PageLayout from './pageLayout'; const DownloadPage: React.FC = () => { + const [searchTerm, setSearchTerm] = useState(''); + const [packages, setPackages] = useState([ + { name: 'Package 1', version: '1.0.0', size: '500KB' }, + { name: 'Package 2', version: '2.3.1', size: '1.2MB' }, + { name: 'Package 3', version: '1.2.5', size: '750KB' }, + ]); // Simulated package list + + const handleSearch = (e: React.FormEvent) => { + e.preventDefault(); + console.log('Searching for:', searchTerm); + // Add logic to fetch package list based on search term + }; + return ( - -

This is the Download page. Download files here.

+ +
+
+ +
+ + +
+ +
+

Available Packages:

+ {packages.length > 0 ? ( +
    + {packages.map((pkg, index) => ( +
  • + {pkg.name} (v{pkg.version}) - {pkg.size} + +
    • + ))} +
+ ) : ( +

No packages found. Try a different search term.

+ )} +
); }; diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx index 46fa3a3..189e753 100644 --- a/frontend/src/pages/home.tsx +++ b/frontend/src/pages/home.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import Login from './login'; -import './home.css'; // Optional: For styling +import Login from '../components/login'; +import '../assets/css/home.css'; // Optional: For styling const Home: React.FC = () => { return ( diff --git a/frontend/src/pages/login.css b/frontend/src/pages/login.css deleted file mode 100644 index 46f34e3..0000000 --- a/frontend/src/pages/login.css +++ /dev/null @@ -1,42 +0,0 @@ -.login-block { - max-width: 300px; - margin: 20px auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 10px; - background-color: #f9f9f9; - text-align: center; - } - - .login-block input { - width: 100%; - padding: 10px; - margin: 10px -10px; - border: 1px solid #ccc; - border-radius: 5px; - } - - .button-group { - display: flex; - justify-content: space-between; - } - - .button-group button { - width: 45%; - padding: 10px; - background-color: #61dafb; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; - } - - .button-group button:hover { - background-color: #21a1f1; - } - - .error { - color: red; - margin-top: 10px; - } - \ No newline at end of file diff --git a/frontend/src/pages/pageLayout.tsx b/frontend/src/pages/pageLayout.tsx index b014584..45fd049 100644 --- a/frontend/src/pages/pageLayout.tsx +++ b/frontend/src/pages/pageLayout.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import './pageLayout.css'; // Shared CSS for all pages +import '../assets/css/pageLayout.css'; // Shared CSS for all pages interface PageLayoutProps { title: string; diff --git a/frontend/src/pages/rating.tsx b/frontend/src/pages/rating.tsx index 49b99b6..8efdfb5 100644 --- a/frontend/src/pages/rating.tsx +++ b/frontend/src/pages/rating.tsx @@ -1,10 +1,49 @@ -import React from 'react'; +import React, { useState } from 'react'; import PageLayout from './pageLayout'; const RatingPage: React.FC = () => { + const [packageName, setPackageName] = useState(''); + const [ratingData, setRatingData] = useState({ + overall: 4, + dependencyPinning: 0.8, + codeReviewMetric: 0.75, + }); + + const handleSearch = (e: React.FormEvent) => { + e.preventDefault(); + console.log('Searching for:', packageName); + // Add logic to fetch rating details for the entered package name + }; + return ( - -

This is the Rating page. Rate your experience here.

+ +
+
+ +
+ + +
+ + {packageName && ( +
+

Rating for: {packageName}

+

Overall Rating: {ratingData.overall} / 5

+

Dependency Pinning: {ratingData.dependencyPinning.toFixed(2)}

+

Code Review Metric: {ratingData.codeReviewMetric.toFixed(2)}

+
+ )} ); }; diff --git a/frontend/src/pages/update.tsx b/frontend/src/pages/update.tsx index 7a2c69b..41101ab 100644 --- a/frontend/src/pages/update.tsx +++ b/frontend/src/pages/update.tsx @@ -1,10 +1,102 @@ -import React from 'react'; +import React, { useState } from 'react'; import PageLayout from './pageLayout'; const UpdatePage: React.FC = () => { + const [packageName, setPackageName] = useState(''); // Pre-filled for existing data + const [currentVersion, setCurrentVersion] = useState('1.0.0'); // Example current version + const [newVersion, setNewVersion] = useState(''); + const [description, setDescription] = useState(''); + const [file, setFile] = useState(null); + + const handleFileChange = (e: React.ChangeEvent) => { + if (e.target.files && e.target.files.length > 0) { + setFile(e.target.files[0]); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log('Update Data:', { + packageName, + currentVersion, + newVersion, + description, + file, + }); + // Add logic to handle the package update + }; + return ( - -

This is the Update page. Update your content here.

+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+