From a97752a7839a73bcd284eb7844cfa7fab2f03cc0 Mon Sep 17 00:00:00 2001 From: Spandan Mishra Date: Sun, 14 Jul 2024 01:14:38 +0530 Subject: [PATCH] Completed the react assignment --- package-lock.json | 63 ++++++++- package.json | 3 +- src/App.jsx | 333 ++++++++++++++++++++++++++++++++++++++++++---- src/index.css | 37 ++++++ src/main.jsx | 5 +- 5 files changed, 413 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd606935..37114274 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.24.1" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==", + "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 +1235,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", + "dependencies": { + "@remix-run/router": "1.17.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", + "dependencies": { + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" + }, + "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 +1892,11 @@ } } }, + "@remix-run/router": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2176,6 +2220,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", + "requires": { + "@remix-run/router": "1.17.1" + } + }, + "react-router-dom": { + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", + "requires": { + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" + } + }, "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..fca2dfe2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.24.1" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.jsx b/src/App.jsx index 7743965b..77df3f66 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,44 +1,295 @@ -/* - * 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", +import {React, useState } from 'react'; +import { BrowserRouter as Router, Route, Routes, useLocation, Link, useParams } from 'react-router-dom'; + +const problemSet = [[{ + title: "1. Bitwise AND of Numbers Range", + difficulty: "Medium", + acceptance: "42%", + description: "Given two integers left and output that represent the range [left, right], return the bitwise AND of all numbers in this range, inclusive.", + examples: [{ + input: "left = 5, right = 7", + output: "4" + }, + { + input: "left = 0, right = 0", + output: "0" + }] + }, + { + title: "2. Happy Number", + difficulty: "Easy", + acceptance: "56%", + description: "Write an algorithm to determine if a number n is happy.", + examples: [{ + input: "n = 19", + output: "true" + }, + { + input: "n = 2", + output: "false" + }] + }, + { + title: "3. Isomorphic Strings", + difficulty: "Easy", + acceptance: "45.4%", + description: "Two strings s and t are isomorphic if the characters in s can be replaced to get t.", + examples: [{ + input: "s = 'egg', t = 'add", + output: "true" + }, + { + input: "s = 'foo', t = 'bar'", + output: "false" + }] + }, + { + title: "4. Remove Linked List Elements", + difficulty: "Hard", + acceptance: "42%", + description: "Given the head of a linked list and an integer val, remove all the nodes of the linked list that has Node.val == val, and return the new head.", + examples: [{ + input: "head = [1,2,6,3,4,5,6], val = 6", + output: "[1,2,3,4,5]" + }, + { + input: "head = [], val = 1", + output: "head = [], val = 1" + }] + }, + { + title: "5. Longest Palindromic Substring", + acceptance: "34.1%", + difficulty: "Medium", + description: "Given a string s, return the longest palindromic substring in s", + examples: [{ + input: "babad", + output: "bab" + }, + { + input: "cbbd", + output: "bb" + }] + }], + + [{ + title: "6. Zigzag Conversion", + acceptance: "48.6%", + difficulty: "Medium", + description: "Write the code that will take a string and make this conversion given a number of rows:", + examples: [{ + input: "'PAYPALISHIRING', numRows = 3", + output: "PAHNAPLSIIGYIR" + }, + { + input: "PAYPALISHIRING', numRows = 4", + output: "PINALSIGYAHRPI" + }] + }, + { + title: "7. Reverse Integer", + acceptance: "28.9%", + difficulty: "Medium", + 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.", + examples: [{ + input: "x = 123", + output: "321" + }, + { + input: "x = -123", + output: "-321" + }] + }, + { + title: "8. String to Integer (atoi)", + acceptance: "17.6%", + difficulty: "Medium", + description: "Implement the myAtoi(string s) function, which converts a string to a 32-bit signed integer.", + examples: [{ + input: "'42'", + output: "42" + }, + { + input: "' -042'", + output: "-42" + }] + }, + { + title: "9. Palindrome Number", + acceptance: "56.9%", difficulty: "Easy", - acceptance: "54.9%" + description: "Given an integer x, return true if x is a palindrome, and false otherwise.", + examples: [{ + input: "x = 131", + output: "true" + }, + { + input: "x = 19087", + output: "false" + }] + }, + { + title: "10. Regular Expression Matching", + acceptance: "28.3%", + difficulty: "Hard", + description: "Given an input string s and a pattern p, implement regular expression matching with support for '.' and '*' where: '.' means any character & '*' matches zero or more preceding elements", + examples: [{ + input: "s = 'aa', p = 'a'", + output: "false" + }, + { + input: "s = 'aa', p = 'a*'", + output: "true" + }] + }], + + [{ + title: "11. Trapping Rain Water", + acceptance: "62.5%", + difficulty: "Hard", + description: "Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining.", + examples: [{ + input: "height = [0,1,0,2,1,0,1,3,2,1,2,1]", + output: "6" + }, + { + input: "height = [4,2,0,3,2,5]", + output: "9" + }] }, { - title: "203. Remove Linked List Elements", + title: "12. First Missing Positive", + acceptance: "13.3%", difficulty: "Hard", - acceptance: "42%" - }]; + description: "Given an unsorted integer array nums. Return the smallest positive integer that is not present in nums", + examples: [{ + input: "nums = [1,2,0]", + output: "3" + }, + { + input: "nums = [3,4,-1,1]", + output: "2" + }] + }, + { + title: "13. Sqrt(x)", + acceptance: "39.1%", + difficulty: "Easy", + description: "Given a non-negative integer x, return the square root of x rounded down to the nearest integer. The returned integer should be non-negative as well.", + examples: [{ + input: "x = 4", + output: "2" + }, + { + input: "x = 8", + output: "2" + }] + }, + { + title: "14. Partition List", + acceptance: "56.7%", + difficulty: "Medium", + description: "Given the head of a linked list and a value x, partition it such that all nodes less than x come before nodes greater than or equal to x. You should preserve the original relative order of the nodes in each of the two partitions", + examples: [{ + input: "head = [1,4,3,2,5,2], x = 3", + output: "[1,2,2,4,3,5]" + }, + { + input: "head = [2,1], x = 2", + output: "[1,2]" + }] + }, + { + title: "15. Binary Tree Inorder Traversal", + acceptance: "76.6%", + difficulty: "Easy", + description: "Given the root of a binary tree, return the inorder traversal of its nodes' values.", + examples: [{ + input: "root = [1,null,2,3]", + output: "[1,3,2]" + }, + { + input: "root = []", + output: "[]" + }] + }] + ]; function App() { + const [problems, setProblems] = useState(problemSet[0]); + const location = useLocation(); + + const handleButtonClick = (index) => { + setProblems(problemSet[index]); + } - /* Add routing here, routes look like - + /* Added the routing here, routes look like - /login - Login page /signup - Signup page - /problemset/all/ - All problems (see problems array above) + /problemset/all/ - All problems /problems/:problem_slug - A single problem page */ return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point +
+
+ {location.pathname === '/problemset/all' && ( +
+ + + + + + + + + + + + + + {problems.map(problem => ( + {problem.title}} + acceptance = {problem.acceptance} + difficulty = {problem.difficulty} + />))} + +
TitleAcceptanceDifficulty
+
+ )} +
+ + } /> + } /> + } /> + +
+ ); + +} + +function Signup() { + return ( +
+ + + +
+ ); +} + +function Login() { + return ( +
+ + +
- ) + ); } -// A demo component function ProblemStatement(props) { const title = props.title; const acceptance = props.acceptance; @@ -51,9 +302,41 @@ function ProblemStatement(props) { {acceptance} - + {difficulty} } + +function ProblemDetails() { + const { problem_slug } = useParams(); + console.log(problem_slug); + const problem = problemSet.flat().find(problem => problem.title.slice(3).toLowerCase().replace(/\s+/g, '-') === problem_slug); + console.log(problem); + if(!problem) { + return

Problem Not Found.

+ } + + return ( +
+

{problem.title}

+
+
+

Description:

+

{problem.description}

+
+
+

Example 1:

+

Input: {problem.examples[0].input}

+

Output: {problem.examples[0].output}

+
+
+

Example 2:

+

Input: {problem.examples[1].input}

+

Output: {problem.examples[1].output}

+
+
+
+ ) +} export default App diff --git a/src/index.css b/src/index.css index e69de29b..2be919f6 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,37 @@ +body { + background-color: rgb(31, 30, 30); + color: whitesmoke; +} + +.easy { + color: green; +} + +.medium { + color: rgb(255, 174, 0); +} + +.hard { + color: red; +} + +table th, +table td { + padding: 0.75rem 2rem; + vertical-align: middle; +} + +.centre { + margin: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + margin: auto; + padding-left: 15px; + padding-right: 15px; + text-align: left; + width: 90%; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..b03a3bbd 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,9 +2,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' +import { BrowserRouter as Router } from 'react-router-dom'; ReactDOM.createRoot(document.getElementById('root')).render( - + + + , )