From df159be9b66f9c5521ed9cafa0a0f620efb4c70a Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 18 Sep 2023 13:45:04 +0530 Subject: [PATCH 1/5] changs made --- src/App.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 7743965b..6180790b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,7 +21,6 @@ const problems = [{ acceptance: "42%" }]; - function App() { /* Add routing here, routes look like - From f7fc69ec60985bdc520f66b38a4d496c21ede772 Mon Sep 17 00:00:00 2001 From: Pranav Date: Mon, 18 Sep 2023 13:54:37 +0530 Subject: [PATCH 2/5] few more changes made --- src/index.css | 62 ++++++++++++++++++++++++++++++++++++++++++ src/pages/login.jsx | 43 +++++++++++++++++++++++++++++ src/pages/signup.jsx | 65 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+) create mode 100644 src/pages/login.jsx create mode 100644 src/pages/signup.jsx diff --git a/src/index.css b/src/index.css index e69de29b..e4d34afa 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,62 @@ +.login-container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + } + + .login-container h2 { + text-align: center; + margin-bottom: 20px; + } + + .signup-container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + } + + .signup-container h2 { + text-align: center; + margin-bottom: 20px; + } + + .form-group { + margin-bottom: 15px; + } + + label { + display: block; + font-weight: bold; + margin-bottom: 5px; + } + + input[type="text"], + input[type="email"], + input[type="password"] { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; + } + + button { + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + } + + button:hover { + background-color: #0056b3; + } + \ No newline at end of file diff --git a/src/pages/login.jsx b/src/pages/login.jsx new file mode 100644 index 00000000..630a2814 --- /dev/null +++ b/src/pages/login.jsx @@ -0,0 +1,43 @@ +import React, { useState } from 'react'; + +const Login = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const handleLogin = () => { + // Implement authentication logic here + console.log('Email:', email); + console.log('Password:', password); + }; + + return ( +
+

Login

+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
+
+ ); +}; + +export default Login; diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx new file mode 100644 index 00000000..70173372 --- /dev/null +++ b/src/pages/signup.jsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; + +const Signup = () => { + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const handleSignup = () => { + // Implement user registration logic here + console.log('First Name:', firstName); + console.log('Last Name:', lastName); + console.log('Email:', email); + console.log('Password:', password); + }; + + return ( +
+

Sign Up

+
+
+ + setFirstName(e.target.value)} + /> +
+
+ + setLastName(e.target.value)} + /> +
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
+
+ ); +}; + +export default Signup; From 7889eaa2fd221838a6be6a57bb472c981e6bc1ba Mon Sep 17 00:00:00 2001 From: Pranav Date: Fri, 6 Oct 2023 22:30:10 +0530 Subject: [PATCH 3/5] conected client and server --- package-lock.json | 67 ++++++++++++++++ package.json | 1 + src/App.jsx | 70 ++++++----------- src/data.js | 143 +++++++++++++++++++++++++++++++++++ src/pages/Home.jsx | 9 +++ src/pages/Layout.jsx | 31 ++++++++ src/pages/ProblemDetails.jsx | 58 ++++++++++++++ src/pages/Problems.jsx | 50 ++++++++++++ src/pages/login.jsx | 14 +++- src/pages/noPage.jsx | 5 ++ src/pages/signup.jsx | 40 +++++----- 11 files changed, 424 insertions(+), 64 deletions(-) create mode 100644 src/data.js create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/Layout.jsx create mode 100644 src/pages/ProblemDetails.jsx create mode 100644 src/pages/Problems.jsx create mode 100644 src/pages/noPage.jsx diff --git a/package-lock.json b/package-lock.json index cd606935..3c5c63ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", + "react-router-dom": "^6.16.0", "vite": "^4.2.0" } }, @@ -766,6 +767,15 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", + "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==", + "dev": true, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1226,6 +1236,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", + "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.9.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz", + "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==", + "dev": true, + "dependencies": { + "@remix-run/router": "1.9.0", + "react-router": "6.16.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -1853,6 +1895,12 @@ } } }, + "@remix-run/router": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", + "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==", + "dev": true + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2176,6 +2224,25 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", + "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==", + "dev": true, + "requires": { + "@remix-run/router": "1.9.0" + } + }, + "react-router-dom": { + "version": "6.16.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz", + "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==", + "dev": true, + "requires": { + "@remix-run/router": "1.9.0", + "react-router": "6.16.0" + } + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", diff --git a/package.json b/package.json index 154dd4dd..fc3f6941 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", + "react-router-dom": "^6.16.0", "vite": "^4.2.0" } } diff --git a/src/App.jsx b/src/App.jsx index 6180790b..2b58bbc4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,58 +1,38 @@ /* * Temporary problems array schema */ -const problems = [{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%" -},{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "412%" -}, - { - title: "202. Happy Number", - difficulty: "Easy", - acceptance: "54.9%" - }, - { - title: "203. Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%" - }]; +import React from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Home from './pages/Home'; +import Layout from './pages/Layout'; +import Login from './pages/Login'; +import Signup from './pages/Signup'; +import Problems from './pages/problems'; +import ProblemDetails from './pages/ProblemDetails'; +import NoPage from './pages/noPage'; function App() { - - /* Add routing here, routes look like - + /* Add routing here, routes look like - /login - Login page /signup - Signup page /problemset/all/ - All problems (see problems array above) /problems/:problem_slug - A single problem page */ - return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) + return ( + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + + + + ); } -// A demo component -function ProblemStatement(props) { - const title = props.title; - const acceptance = props.acceptance; - const difficulty = props.difficulty; - - return - - {title} - - - {acceptance} - - - {difficulty} - - -} -export default App +export default App; diff --git a/src/data.js b/src/data.js new file mode 100644 index 00000000..b4f8f778 --- /dev/null +++ b/src/data.js @@ -0,0 +1,143 @@ +const problemlist = [ + { + id: '1', + title: 'Two Sum', + description: + 'Given an array of integers, return indices of the two numbers such that they add up to a specific target.', + acceptanceRate: '70%', + difficulty: 'Easy', + input: [2, 7, 11, 15], + output: 9, + }, + { + id: '2', + title: 'Reverse String', + description: + 'Write a function that reverses a string. The input string is given as an array of characters.', + acceptanceRate: '85%', + difficulty: 'Easy', + input: ['h', 'e', 'l', 'l', 'o'], + output: 'olleh', + }, + { + id: '3', + title: 'Palindrome Number', + description: + 'Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward.', + acceptanceRate: '60%', + difficulty: 'Medium', + input: 121, + output: 'true', + }, + { + id: '4', + title: 'FizzBuzz', + description: + 'Write a program that outputs the string representation of numbers from 1 to n. But for multiples of three, it should output "Fizz" instead of the number and for the multiples of five output "Buzz". For numbers which are multiples of both three and five, output "FizzBuzz".', + acceptanceRate: '25%', + difficulty: 'Hard', + input: 15, + output: [ + '1', + '2', + 'Fizz', + '4', + 'Buzz', + 'Fizz', + '7', + '8', + 'Fizz', + 'Buzz', + '11', + 'Fizz', + '13', + '14', + 'FizzBuzz', + ], + }, + { + id: '5', + title: 'Valid Parentheses', + description: + 'Given a string containing just the characters "(", ")", "{", "}", "[", and "]", determine if the input string is valid.', + acceptanceRate: '80%', + difficulty: 'Medium', + input: 'String s = "tailwindcss_is_so{coo)"', + output: 'true', + }, + { + id: '6', + title: 'Longest Common Prefix', + description: + 'Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "".', + acceptanceRate: '70%', + difficulty: 'Easy', + input: ['flower', 'flow', 'flight'], + output: 'fl', + }, + { + id: '7', + title: 'Merge Two Sorted Lists', + description: + 'Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists.', + acceptanceRate: '75%', + difficulty: 'Easy', + input: [ + [1, 2, 4], + [1, 3, 4], + ], + output: [1, 1, 2, 3, 4, 4], + }, + { + id: '8', + title: 'Reverse Integer', + description: + 'Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.', + acceptanceRate: '35%', + difficulty: 'Hard', + input: 123, + output: 321, + }, + { + id: '9', + title: 'Valid Anagram', + description: + 'Given two strings s and t, return true if t is an anagram of s, and false otherwise.', + acceptanceRate: '70%', + difficulty: 'Medium', + input: ['anagram', 'nagaram'], + output: 'true', + }, + { + id: '10', + title: 'Remove Duplicates from Sorted Array', + description: + 'Given a sorted array nums, remove the duplicates in-place such that each element appears only once and returns the new length.', + acceptanceRate: '75%', + difficulty: 'Easy', + input: [0, 0, 1, 1, 1, 2, 2, 3, 3, 4], + output: 5, + }, + { + id: '11', + title: 'Search Insert Position', + description: + 'Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order.', + acceptanceRate: '65%', + difficulty: 'Medium', + input: [1, 3, 5, 6], + output: 5, + }, + { + id: '12', + title: 'Valid Palindrome', + description: + 'Given a string s, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.', + acceptanceRate: '70%', + difficulty: 'Easy', + input: 'A man, a plan, a canal: Panama', + output: true, + }, +]; + +export default problemlist; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 00000000..d8cc799f --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,9 @@ +const Home = () => { + return ( +
+

This is home page

+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx new file mode 100644 index 00000000..0b74cc0b --- /dev/null +++ b/src/pages/Layout.jsx @@ -0,0 +1,31 @@ +import { Outlet, Link } from 'react-router-dom'; + +const Layout = () => { + return ( + <> + + + + + ); +}; + +export default Layout; diff --git a/src/pages/ProblemDetails.jsx b/src/pages/ProblemDetails.jsx new file mode 100644 index 00000000..511edc9e --- /dev/null +++ b/src/pages/ProblemDetails.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { useParams, Link } from 'react-router-dom'; +// import PropTypes from 'prop-types'; +import problemlist from '../data'; + +const ProblemDetails = () => { + const { pid } = useParams(); + const cleanId = pid.substring(1); + console.log(cleanId); + + const problem = problemlist.find((problem) => problem.id === cleanId); + if (!problem) { + return

Problem Not found!

; + } + + return ( + <> +
+
+
+

+ {problem.id}. {problem.title} +

+
+
+

{problem.difficulty}

+
+
+

Acceptance Rate : {problem.acceptanceRate}

+
+
+

Description :

+
{problem.description}
+
+
Input : {problem.input}
+
Output : {problem.output}
+
+
+
+
+ +
+
+ + +
+
+ + ); +}; + +export default ProblemDetails; diff --git a/src/pages/Problems.jsx b/src/pages/Problems.jsx new file mode 100644 index 00000000..de8d0af2 --- /dev/null +++ b/src/pages/Problems.jsx @@ -0,0 +1,50 @@ +import { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import problemlist from '../data'; +import ProblemDetails from './ProblemDetails'; + +const Problems = () => { + const [problems, setProblems] = useState([]); + + const init = async () => { + const response = await fetch('http://localhost:3000/questions', { + method: 'GET', + }); + + const json = await response.json(); + setProblems(json.problems); + }; + + useEffect(() => { + init(); + console.log(problems); + }, []); + return ( +
+ + + + + + + + + + + {problems.map((problem, index) => ( + + + + + + + ))} + +
IDTITLEACCEPTANCE RATEDIFFICULTY
{problem.id} + {problem.title} + {problem.acceptanceRate}{problem.difficulty}
+
+ ); +}; + +export default Problems; diff --git a/src/pages/login.jsx b/src/pages/login.jsx index 630a2814..f72aa2a6 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -4,10 +4,22 @@ const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); - const handleLogin = () => { + const handleLogin = async () => { // Implement authentication logic here console.log('Email:', email); console.log('Password:', password); + + const response = await fetch('http://localhost:3000/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email, password }), + }); + + const json = await response.json(); + localStorage.setItem('token', json.token); + console.log(json); }; return ( diff --git a/src/pages/noPage.jsx b/src/pages/noPage.jsx new file mode 100644 index 00000000..454fe54b --- /dev/null +++ b/src/pages/noPage.jsx @@ -0,0 +1,5 @@ +const NoPage = () => { + return

404

; + }; + + export default NoPage; \ No newline at end of file diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx index 70173372..2a32b1a7 100644 --- a/src/pages/signup.jsx +++ b/src/pages/signup.jsx @@ -1,17 +1,30 @@ import React, { useState } from 'react'; const Signup = () => { - const [firstName, setFirstName] = useState(''); - const [lastName, setLastName] = useState(''); + const [userName, setUserName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); - const handleSignup = () => { + const handleSignup = async () => { // Implement user registration logic here - console.log('First Name:', firstName); - console.log('Last Name:', lastName); + console.log('User Name:', userName); console.log('Email:', email); console.log('Password:', password); + + const response = await fetch('http://localhost:3000/signup', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + userName, + email, + password, + }), + }); + + const json = await response.json(); + console.log(json); }; return ( @@ -19,21 +32,12 @@ const Signup = () => {

Sign Up

- - setFirstName(e.target.value)} - /> -
-
- + setLastName(e.target.value)} + placeholder="Enter your name" + value={userName} + onChange={(e) => setUserName(e.target.value)} />
From 9b35b75030e817473871fb8826e7bafebe45748d Mon Sep 17 00:00:00 2001 From: Pranav Date: Tue, 10 Oct 2023 17:36:21 +0530 Subject: [PATCH 4/5] connected with server + css included --- package-lock.json | 41 ++++++++++ package.json | 1 + src/App.jsx | 55 ++++++++++---- src/assets/logo/logo.jpg | Bin 0 -> 9300 bytes src/data.js | 143 ----------------------------------- src/index.css | 101 +++++++++++++------------ src/main.jsx | 13 ++-- src/pages/Blogs.jsx | 11 +++ src/pages/Contact.jsx | 11 +++ src/pages/Home.jsx | 14 ++-- src/pages/Layout.jsx | 86 ++++++++++++++++----- src/pages/ProblemDetails.jsx | 91 +++++++++++++++------- src/pages/Problems.jsx | 49 ++++++++---- src/pages/login.jsx | 20 ++++- src/pages/noPage.jsx | 8 +- src/pages/signup.jsx | 6 +- vite.config.js | 6 +- 17 files changed, 366 insertions(+), 290 deletions(-) create mode 100644 src/assets/logo/logo.jpg delete mode 100644 src/data.js create mode 100644 src/pages/Blogs.jsx create mode 100644 src/pages/Contact.jsx diff --git a/package-lock.json b/package-lock.json index 3c5c63ac..e20e01d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "leet-code-frontend", "version": "0.0.0", "dependencies": { + "bootstrap": "^5.3.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -767,6 +768,16 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", @@ -839,6 +850,24 @@ "node": ">=4" } }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", @@ -1895,6 +1924,12 @@ } } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true + }, "@remix-run/router": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", @@ -1955,6 +1990,12 @@ "color-convert": "^1.9.0" } }, + "bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "requires": {} + }, "browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", diff --git a/package.json b/package.json index fc3f6941..08094e4a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "bootstrap": "^5.3.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/src/App.jsx b/src/App.jsx index 2b58bbc4..b8890e38 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,33 +1,58 @@ -/* - * Temporary problems array schema - */ -import React from 'react'; -import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import React, { useState } from 'react'; +import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; import Home from './pages/Home'; +import Blogs from './pages/Blogs'; +import Contact from './pages/Contact'; import Layout from './pages/Layout'; import Login from './pages/Login'; import Signup from './pages/Signup'; -import Problems from './pages/problems'; +import Problems from './pages/Problems'; import ProblemDetails from './pages/ProblemDetails'; import NoPage from './pages/noPage'; function App() { - /* Add routing here, routes look like - - /login - Login page - /signup - Signup page - /problemset/all/ - All problems (see problems array above) - /problems/:problem_slug - A single problem page - */ + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [problemId, setProblemId] = useState(null); + + // Function to simulate a login + const login = (token) => { + localStorage.setItem('Token', token); + + setIsAuthenticated(true); + }; + + // Function to simulate a logout + const logout = () => { + localStorage.removeItem('Token'); + + setIsAuthenticated(false); + }; + + // A function to handle authentication-based redirection + const requireAuth = (component) => { + return isAuthenticated ? component : ; + }; return ( }> } /> + } /> + } /> } /> - } /> - } /> - } /> + } + /> + } // Protect this route with requireAuth + /> + )} // Protect this route with requireAuth + /> } /> diff --git a/src/assets/logo/logo.jpg b/src/assets/logo/logo.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1bb040f5a4238e68f85f27796ef46acb0ffb8556 GIT binary patch literal 9300 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 literal 0 HcmV?d00001 diff --git a/src/data.js b/src/data.js deleted file mode 100644 index b4f8f778..00000000 --- a/src/data.js +++ /dev/null @@ -1,143 +0,0 @@ -const problemlist = [ - { - id: '1', - title: 'Two Sum', - description: - 'Given an array of integers, return indices of the two numbers such that they add up to a specific target.', - acceptanceRate: '70%', - difficulty: 'Easy', - input: [2, 7, 11, 15], - output: 9, - }, - { - id: '2', - title: 'Reverse String', - description: - 'Write a function that reverses a string. The input string is given as an array of characters.', - acceptanceRate: '85%', - difficulty: 'Easy', - input: ['h', 'e', 'l', 'l', 'o'], - output: 'olleh', - }, - { - id: '3', - title: 'Palindrome Number', - description: - 'Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward.', - acceptanceRate: '60%', - difficulty: 'Medium', - input: 121, - output: 'true', - }, - { - id: '4', - title: 'FizzBuzz', - description: - 'Write a program that outputs the string representation of numbers from 1 to n. But for multiples of three, it should output "Fizz" instead of the number and for the multiples of five output "Buzz". For numbers which are multiples of both three and five, output "FizzBuzz".', - acceptanceRate: '25%', - difficulty: 'Hard', - input: 15, - output: [ - '1', - '2', - 'Fizz', - '4', - 'Buzz', - 'Fizz', - '7', - '8', - 'Fizz', - 'Buzz', - '11', - 'Fizz', - '13', - '14', - 'FizzBuzz', - ], - }, - { - id: '5', - title: 'Valid Parentheses', - description: - 'Given a string containing just the characters "(", ")", "{", "}", "[", and "]", determine if the input string is valid.', - acceptanceRate: '80%', - difficulty: 'Medium', - input: 'String s = "tailwindcss_is_so{coo)"', - output: 'true', - }, - { - id: '6', - title: 'Longest Common Prefix', - description: - 'Write a function to find the longest common prefix string amongst an array of strings. If there is no common prefix, return an empty string "".', - acceptanceRate: '70%', - difficulty: 'Easy', - input: ['flower', 'flow', 'flight'], - output: 'fl', - }, - { - id: '7', - title: 'Merge Two Sorted Lists', - description: - 'Merge two sorted linked lists and return it as a sorted list. The list should be made by splicing together the nodes of the first two lists.', - acceptanceRate: '75%', - difficulty: 'Easy', - input: [ - [1, 2, 4], - [1, 3, 4], - ], - output: [1, 1, 2, 3, 4, 4], - }, - { - id: '8', - title: 'Reverse Integer', - description: - 'Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-231, 231 - 1], then return 0.', - acceptanceRate: '35%', - difficulty: 'Hard', - input: 123, - output: 321, - }, - { - id: '9', - title: 'Valid Anagram', - description: - 'Given two strings s and t, return true if t is an anagram of s, and false otherwise.', - acceptanceRate: '70%', - difficulty: 'Medium', - input: ['anagram', 'nagaram'], - output: 'true', - }, - { - id: '10', - title: 'Remove Duplicates from Sorted Array', - description: - 'Given a sorted array nums, remove the duplicates in-place such that each element appears only once and returns the new length.', - acceptanceRate: '75%', - difficulty: 'Easy', - input: [0, 0, 1, 1, 1, 2, 2, 3, 3, 4], - output: 5, - }, - { - id: '11', - title: 'Search Insert Position', - description: - 'Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order.', - acceptanceRate: '65%', - difficulty: 'Medium', - input: [1, 3, 5, 6], - output: 5, - }, - { - id: '12', - title: 'Valid Palindrome', - description: - 'Given a string s, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.', - acceptanceRate: '70%', - difficulty: 'Easy', - input: 'A man, a plan, a canal: Panama', - output: true, - }, -]; - -export default problemlist; diff --git a/src/index.css b/src/index.css index e4d34afa..15ddd8a9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,52 +1,52 @@ .login-container { - max-width: 400px; - margin: 0 auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - } - - .login-container h2 { - text-align: center; - margin-bottom: 20px; - } - - .signup-container { - max-width: 400px; - margin: 0 auto; - padding: 20px; - border: 1px solid #ccc; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - } - - .signup-container h2 { - text-align: center; - margin-bottom: 20px; - } + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} - .form-group { - margin-bottom: 15px; - } - - label { - display: block; - font-weight: bold; - margin-bottom: 5px; - } - - input[type="text"], - input[type="email"], - input[type="password"] { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - outline: none; - } - - button { +.login-container h2 { + text-align: center; + margin-bottom: 20px; +} + +.signup-container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +.signup-container h2 { + text-align: center; + margin-bottom: 20px; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +input[type='text'], +input[type='email'], +input[type='password'] { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + outline: none; +} + +/* button { width: 100%; padding: 10px; background-color: #007bff; @@ -59,4 +59,9 @@ button:hover { background-color: #0056b3; } - \ No newline at end of file + */ + +.logo { + width: 3.125rem; /* Set the desired width */ + height: auto; /* Automatically adjust height while maintaining aspect ratio */ +} diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..f7ad52ad 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,11 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './index.css'; +import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.createRoot(document.getElementById('root')).render( - , -) + +); diff --git a/src/pages/Blogs.jsx b/src/pages/Blogs.jsx new file mode 100644 index 00000000..d57e2ef2 --- /dev/null +++ b/src/pages/Blogs.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Blogs = () => { + return ( +
+

Blogs

+
+ ); +}; + +export default Blogs; diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx new file mode 100644 index 00000000..a4a6d514 --- /dev/null +++ b/src/pages/Contact.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Contact = () => { + return ( +
+

Contact Us

+
+ ); +}; + +export default Contact; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index d8cc799f..ff082f7f 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,9 +1,11 @@ +import React from 'react'; + const Home = () => { - return ( -
-

This is home page

-
- ); + return ( +
+

This is home page

+
+ ); }; -export default Home; \ No newline at end of file +export default Home; diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index 0b74cc0b..c040e02c 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -1,28 +1,76 @@ +import React from 'react'; import { Outlet, Link } from 'react-router-dom'; +import logo from './../assets/logo/logo.jpg'; const Layout = () => { return ( <> -
-
-
- -
-
- - -
+ +
+
+ +
+
+ + +
+
); diff --git a/src/pages/Problems.jsx b/src/pages/Problems.jsx index de8d0af2..4601d088 100644 --- a/src/pages/Problems.jsx +++ b/src/pages/Problems.jsx @@ -1,10 +1,10 @@ import { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; -import problemlist from '../data'; -import ProblemDetails from './ProblemDetails'; -const Problems = () => { +const Problems = (props) => { const [problems, setProblems] = useState([]); + const [problemColor, setProblemColor] = useState(); + const { setProblemId } = props; const init = async () => { const response = await fetch('http://localhost:3000/questions', { @@ -15,30 +15,53 @@ const Problems = () => { setProblems(json.problems); }; + const handleProblemClick = (id) => { + console.log(`Clicked problem with ID: ${id}`); + if (id) { + setProblemId(id); + } + console.log(id); + }; + + const difficultyColor = (value) => { + if (value === 'Easy') { + return 'text-success'; + } else if (value === 'Medium') { + return 'text-warning'; + } else return 'text-danger'; + }; + useEffect(() => { init(); - console.log(problems); }, []); return ( -
- +
+
- - - - + + + + {problems.map((problem, index) => ( - + - + ))} diff --git a/src/pages/login.jsx b/src/pages/login.jsx index f72aa2a6..222cf961 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -1,8 +1,11 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; -const Login = () => { +const Login = (props) => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const navigate = useNavigate(); + const { onLogin, problemId } = props; const handleLogin = async () => { // Implement authentication logic here @@ -18,8 +21,17 @@ const Login = () => { }); const json = await response.json(); - localStorage.setItem('token', json.token); - console.log(json); + const token = json.token; + onLogin(token); + // console.log(json); + const url = `/problem/:${problemId}`; + if (problemId) { + navigate(url); + } else { + // Handle the case where problemId is null or undefined + // Redirect to a default route or handle accordingly + navigate('/problems'); // Redirect to /problems if problemId is not available + } }; return ( @@ -44,7 +56,7 @@ const Login = () => { onChange={(e) => setPassword(e.target.value)} /> - diff --git a/src/pages/noPage.jsx b/src/pages/noPage.jsx index 454fe54b..bdf70eff 100644 --- a/src/pages/noPage.jsx +++ b/src/pages/noPage.jsx @@ -1,5 +1,5 @@ const NoPage = () => { - return

404

; - }; - - export default NoPage; \ No newline at end of file + return

404

; +}; + +export default NoPage; diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx index 2a32b1a7..d0d24950 100644 --- a/src/pages/signup.jsx +++ b/src/pages/signup.jsx @@ -58,7 +58,11 @@ const Signup = () => { onChange={(e) => setPassword(e.target.value)} /> - diff --git a/vite.config.js b/vite.config.js index 5a33944a..627a3196 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) +}); From 75f49f7679f8346104efdbd3c79f168947820d24 Mon Sep 17 00:00:00 2001 From: Pranav Date: Sun, 15 Oct 2023 12:21:44 +0530 Subject: [PATCH 5/5] bugs fixed --- src/App.jsx | 38 +++++++++---- src/pages/Layout.jsx | 37 ++++++++----- src/pages/ProblemDetails.jsx | 104 ++++++++++++++++++++++++++++++++--- src/pages/Problems.jsx | 1 - src/pages/SignupSucess.jsx | 15 +++++ src/pages/login.jsx | 92 +++++++++++++++++++------------ src/pages/signup.jsx | 98 +++++++++++++++++++-------------- 7 files changed, 275 insertions(+), 110 deletions(-) create mode 100644 src/pages/SignupSucess.jsx diff --git a/src/App.jsx b/src/App.jsx index b8890e38..648d5388 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,7 @@ import Contact from './pages/Contact'; import Layout from './pages/Layout'; import Login from './pages/Login'; import Signup from './pages/Signup'; +import SignupSuccess from './pages/SignupSucess'; import Problems from './pages/Problems'; import ProblemDetails from './pages/ProblemDetails'; import NoPage from './pages/noPage'; @@ -13,6 +14,7 @@ import NoPage from './pages/noPage'; function App() { const [isAuthenticated, setIsAuthenticated] = useState(false); const [problemId, setProblemId] = useState(null); + const [userId, setUserId] = useState(null); // Function to simulate a login const login = (token) => { @@ -36,25 +38,37 @@ function App() { return ( - }> + + } + > } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> } + path="/login" + element={ + + } /> } // Protect this route with requireAuth - /> - )} // Protect this route with requireAuth + path="/problems" + element={} /> } /> + )} // Protect this route with requireAuth + /> ); diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx index c040e02c..cc45682f 100644 --- a/src/pages/Layout.jsx +++ b/src/pages/Layout.jsx @@ -2,7 +2,8 @@ import React from 'react'; import { Outlet, Link } from 'react-router-dom'; import logo from './../assets/logo/logo.jpg'; -const Layout = () => { +const Layout = (props) => { + const { isAuthenticated, onLogout } = props; return ( <> diff --git a/src/pages/ProblemDetails.jsx b/src/pages/ProblemDetails.jsx index 3fff4bd7..043fde13 100644 --- a/src/pages/ProblemDetails.jsx +++ b/src/pages/ProblemDetails.jsx @@ -1,11 +1,18 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; +import { Link } from 'react-router-dom'; +import logo from './../assets/logo/logo.jpg'; -const ProblemDetails = () => { +const ProblemDetails = (props) => { const { pid } = useParams(); const cleanId = pid.substring(1); const [problem, setProblem] = useState(''); const [submission, setSubmission] = useState(''); + const [result, setResult] = useState(''); + const [showResult, setShowResult] = useState(false); // New state for result visibility + const [submissions, setSubmissions] = useState([]); + const [showSubmissions, setShowSubmissions] = useState(false); // state for Getsubmission visibility + const { userId } = props; const init = async () => { const response = await fetch('http://localhost:3000/question/' + cleanId, { @@ -15,15 +22,49 @@ const ProblemDetails = () => { setProblem(json.question); }; + const handleSubmit = () => { + postSubmit(); + getSubmit(); + }; + useEffect(() => { init(); }, []); - if (!problem) { - return

Problem Not found!

; - } - const handleSubmit = async () => { + const postSubmit = async () => { const response = await fetch('http://localhost:3000/submissions', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + authorization: localStorage.getItem('Token'), + }, + body: JSON.stringify({ + problemId: cleanId, + submission: submission, + userId: userId, + }), + }); + + const json = await response.json(); + console.log(json); + }; + + const getSubmit = async () => { + const response = await fetch( + 'http://localhost:3000/submission/' + cleanId, + { + method: 'GET', + headers: { + authorization: localStorage.getItem('Token'), + }, + } + ); + const json = await response.json(); + console.log(json); + }; + + const handleRun = async () => { + const response = await fetch('http://localhost:3000/run', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -36,12 +77,50 @@ const ProblemDetails = () => { }); const json = await response.json(); + setResult(json.status); + setShowResult(true); + console.log(result); console.log(json); }; + const difficultyColor = (value) => { + if (value === 'Easy') { + return 'text-success'; + } else if (value === 'Medium') { + return 'text-warning'; + } else return 'text-danger'; + }; + + const generateResult = (result) => { + if (result === 'WA') { + return Wrong Answer; + } else { + return Accepted; + } + }; + + if (!problem) { + return

Problem Not found!

; + } return ( <>
+
+
+ + Your Logo + +
+
+ +

All Problems

+ +
+

{problem.id}. {problem.title} @@ -49,7 +128,9 @@ const ProblemDetails = () => {

-

{problem.difficulty}

+

+ {problem.difficulty} +

Acceptance Rate : {problem.acceptanceRate}

@@ -60,20 +141,27 @@ const ProblemDetails = () => {
Input : {problem.input}
Output : {problem.output}
+
+ {showResult &&
Result : {generateResult(result)}
} +
- +
-
- - setPassword(e.target.value)} - /> -
- - -
+ )} + ); }; diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx index d0d24950..b44277e9 100644 --- a/src/pages/signup.jsx +++ b/src/pages/signup.jsx @@ -1,9 +1,13 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; const Signup = () => { const [userName, setUserName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); + const [errorMessage, setErrorMessage] = useState(''); + const [isWrong, setIsWrong] = useState(false); + const navigate = useNavigate(); const handleSignup = async () => { // Implement user registration logic here @@ -23,50 +27,64 @@ const Signup = () => { }), }); - const json = await response.json(); - console.log(json); + if (response.ok) { + const json = await response.json(); + console.log(json); + navigate('/signupsuccess'); + } else { + const json = await response.json(); + const errorResponse = json.message; + setErrorMessage(errorResponse); + setIsWrong(true); + } }; return ( -
-

Sign Up

-
-
- - setUserName(e.target.value)} - /> + <> + {isWrong ? ( +

{errorMessage}

+ ) : ( +
+

Sign Up

+ +
+ + setUserName(e.target.value)} + /> +
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ +
-
- - setEmail(e.target.value)} - /> -
-
- - setPassword(e.target.value)} - /> -
- - -
+ )} + ); };
IDTITLEACCEPTANCE RATEDIFFICULTYIDTITLEACCEPTANCE RATEDIFFICULTY
{problem.id}{problem.id} - {problem.title} + handleProblemClick(problem.id)} + className="nav-link" + > + {problem.title} + {problem.acceptanceRate}{problem.difficulty} + {problem.difficulty} +