diff --git a/package-lock.json b/package-lock.json index cd606935..4a36cfa9 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.11.2" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "engines": { + "node": ">=14" + } + }, "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.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "dependencies": { + "@remix-run/router": "1.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "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.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@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.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "requires": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + } + }, "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..208323e3 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.11.2" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.jsx b/src/App.jsx index 7743965b..8982e1c8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,59 +1,32 @@ -/* - * 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 { Routes, Route } from "react-router-dom"; +import Login from "./elements/login"; +import SignUp from "./elements/signup"; +import SingleProblem from "./elements/singleproblem"; +import Problems from "./elements/problems"; +import NavBar from "./elements/navbar"; +import Explorer from "./elements/explorer"; 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 - */ - - 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/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/elements/explorer.css b/src/elements/explorer.css new file mode 100644 index 00000000..6e8ca947 --- /dev/null +++ b/src/elements/explorer.css @@ -0,0 +1,31 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + + } + + +h1{ + font-size: 50px; + color: rgba(139, 131, 17, 0.805); + text-align: center; + } + .questions-intro{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } + .questions-intro p{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } + .questions-intro{ + text-align: left; + margin-left: 1em; + padding:10px; + font-size: 20px; + } \ No newline at end of file diff --git a/src/elements/explorer.jsx b/src/elements/explorer.jsx new file mode 100644 index 00000000..c124da68 --- /dev/null +++ b/src/elements/explorer.jsx @@ -0,0 +1,25 @@ +import "./explorer.css"; + +function Explorer() { + return ( + <> + {/* Finish the assignment! Look at the comments in App.jsx as a starting point */} + +

Welcome to PeetCode

+
+

Some Questions-:

+

What do we do here?

+

Here we Prectice interview questions

+
+ +
+

What do i get if i practice Questions

+

+ You will get some practice when solving questions in the interview +

+
+ + ); +} + +export default Explorer; diff --git a/src/elements/login.css b/src/elements/login.css new file mode 100644 index 00000000..6a2bf4e9 --- /dev/null +++ b/src/elements/login.css @@ -0,0 +1,45 @@ +#login { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + + #login h2 { + text-align: center; + margin-bottom: 20px; + } + + #login #form { + display: flex; + flex-direction: column; + } + + #login input { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + } + + #login button[type="submit"] { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + #login button[type="submit"]:hover { + background-color: #45a049; + } + + \ No newline at end of file diff --git a/src/elements/login.jsx b/src/elements/login.jsx new file mode 100644 index 00000000..7e665a7c --- /dev/null +++ b/src/elements/login.jsx @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import "./login.css"; +import { useNavigate } from "react-router-dom"; + +function Login() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const navigate = useNavigate(); + return ( +
+

Login

+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
+ ); +} + +export default Login; diff --git a/src/elements/logo.png b/src/elements/logo.png new file mode 100644 index 00000000..c673d855 Binary files /dev/null and b/src/elements/logo.png differ diff --git a/src/elements/navbar.css b/src/elements/navbar.css new file mode 100644 index 00000000..01bf10c7 --- /dev/null +++ b/src/elements/navbar.css @@ -0,0 +1,34 @@ +#root { + margin: 0; + padding: 0; + } + +header{ + margin: 0; + padding: 0; + box-sizing: border-box; + + } +#nav-bar{ + padding: 0.5em; + background-color: antiquewhite; + border: 1px solid black; + text-align: center; + /* border-radius: 5px; */ + } + #logo-beside-explorer{ + display: inline-block; + padding: 0; + } + #nav-bar li{ + display: inline-block; + padding: 0.8em; + } + + #nav-bar ul{ + margin: 0; + list-style-type: none; + display: inline-block; + } + + \ No newline at end of file diff --git a/src/elements/navbar.jsx b/src/elements/navbar.jsx new file mode 100644 index 00000000..6a7417b8 --- /dev/null +++ b/src/elements/navbar.jsx @@ -0,0 +1,34 @@ +import "./navbar.css"; +import { Link, Outlet } from "react-router-dom"; + +function NavBar() { + return ( + <> +
+ + +
+ + ); +} + +export default NavBar; diff --git a/src/elements/problems.css b/src/elements/problems.css new file mode 100644 index 00000000..58b7ec31 --- /dev/null +++ b/src/elements/problems.css @@ -0,0 +1,46 @@ +#problems-table table{ + margin: 2em auto 2em; + border-collapse: collapse; + width: 100%; + +} + +#problems-table thead th{ + padding: 0.5em 1em; + border: 3px solid black; + +} +#problems-table tr{ + border: 0.0009px solid black; + +} +#problems-table td{ + padding: 1em; + margin: 0.2 auto; + +} +.Easy{ + color: rgb(0 184 163); +} +.Medium{ + color: rgb(255 192 30);; +} +.Hard{ + color: rgb(255, 0, 0); +} + +.page{ + margin: 3px; + padding: 1em 2em; + border: 0.8px solid rgb(0, 0, 0); + border-radius: 5px; +} +.page:hover{ + margin: 4px; + padding: 1.3em 2.6em; + border: 1px solid rgb(50, 50, 50); +} +#page-buttons{ + margin: 0 auto; + text-align: center; +} \ No newline at end of file diff --git a/src/elements/problems.jsx b/src/elements/problems.jsx new file mode 100644 index 00000000..79dc4d4b --- /dev/null +++ b/src/elements/problems.jsx @@ -0,0 +1,70 @@ +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; +import "./problems.css"; + +function Problems() { + const [problems, setProblems] = useState([]); + + const Fetching = async () => { + const response = await fetch("http://localhost:3000/problems", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const json = await response.json(); + setProblems(json.problems); + }; + + useEffect(() => { + Fetching(); + }, []); + + return ( + <> +
+ + + + + + + + + + + {problems.map((problem) => ( + + ))} + +
SI/NoTitleAcceptanceDifficulty
+
+ + ); +} + +function ProblemStatement(props) { + const id = props.id; + const title = props.title; + const acceptance = props.acceptance; + const difficulty = props.difficulty; + + return ( + + {id} + + {title} + + + {acceptance} + {difficulty} + + ); +} +export default Problems; diff --git a/src/elements/signup.css b/src/elements/signup.css new file mode 100644 index 00000000..92925c4c --- /dev/null +++ b/src/elements/signup.css @@ -0,0 +1,67 @@ +#signup { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + + #signup h2 { + text-align: center; + margin-bottom: 20px; + } + + #signup #form { + display: flex; + flex-direction: column; + } + + #signup input { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 3px; + } + + #signup button[type="submit"] { + padding: 10px 20px; + background-color: #4caf50; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + #signup button[type="submit"]:hover { + background-color: #45a049; + } + + #signup div { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + } + + #signup h5 { + margin-right: 10px; + } + + #signup button { + padding: 5px 10px; + background-color: #f2f2f2; + border: none; + color: #007bff; + cursor: pointer; + } + + #signup button:hover { + text-decoration: underline; + } + \ No newline at end of file diff --git a/src/elements/signup.jsx b/src/elements/signup.jsx new file mode 100644 index 00000000..f5b82991 --- /dev/null +++ b/src/elements/signup.jsx @@ -0,0 +1,67 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import "./signup.css"; +function SignUp() { + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + + const navigate = useNavigate(); + return ( +
+

Signup

+
+ setName(e.target.value)} + /> + setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
Already a member?
+ +
+
+
+ ); +} + +export default SignUp; diff --git a/src/elements/singleproblem.css b/src/elements/singleproblem.css new file mode 100644 index 00000000..129db97e --- /dev/null +++ b/src/elements/singleproblem.css @@ -0,0 +1,105 @@ + +#problem-solving-area{ + display: flex; + /* width: 100vh; + height: 100vh; */ + box-sizing: border-box; + +} +#left-section{ + margin: 0.3em 2rem; + flex: 1; + border: 0.6px double black; + height: 100vh; + width: 50vh; + text-align: left; +} + +#left-section *{ + margin: 0.5em; + padding: 0.5em; + font-size: 25px; +} +#right-section{ + margin: 0.3em 1.2rem; + flex: 1; + border: 0.6px double black; + height: 100vh; + width: 50vh; + padding-left: 50px; +} +#right-section *{ + padding: .5em; + +} +#button-submit{ + display: block; + margin-right: 1.8em; + padding: 1em 2em; + border: 2px solid black; + background-color: lightgreen; + border-radius: 10px; + font-size: medium; +} +#button-submit:hover{ + margin-right: 1.4em; + border: 3px solid black; + font-size: 17px; + font-weight: bold; +} +#button-submission{ + display: block; + margin-left: 1.8em; + margin-right: 0.3em; + padding: 1em 2em; + border: 2px solid black; + background-color: lightgreen; + border-radius: 10px; + font-size: medium; +} +#button-submission:hover{ + margin-left: 1.4em; + border: 3px solid black; + font-size: 17px; + font-weight: bold; +} + +.examples{ + display: flex; + text-align: left; + padding: 0.7em; + overflow: scroll; +} + +#solution-area{ + height: 75%; + width: 90%; + font-size: large; +} + +#singleproblem-buttons{ + display: flex; + justify-content: end; +} +#submission-display{ + margin-top: 6em; +} +#submission-display table{ + margin: 2em auto 2em; + border-collapse: collapse; + width: 100%; +} + +#submission-display thead th{ + padding: 0.5em 1em; + border: 3px solid black; +} +#submission-display tr{ + border: 0.0009px solid black; +} + +#submission-display td{ + padding: 1em; + margin: 0.2 auto; + +} \ No newline at end of file diff --git a/src/elements/singleproblem.jsx b/src/elements/singleproblem.jsx new file mode 100644 index 00000000..12fdf273 --- /dev/null +++ b/src/elements/singleproblem.jsx @@ -0,0 +1,152 @@ +import { useParams, useNavigate } from "react-router-dom"; +import "./singleproblem.css"; +import { useEffect, useState, useRef } from "react"; + +function SingleProblem() { + const [problem, setProblem] = useState({ + id: "", + title: "", + difficulty: "", + acceptance: "", + discription: "", + exampleInput: { + input: "", + output: "", + }, + }); + const [problemSubmissions, setProblemSubmissions] = useState([]); + const [userSubmission, setSubmission] = useState(""); + const [showSubmissions, setShowSubmissions] = useState(false); + const { id } = useParams(); + const navigate = useNavigate(); + const submissionsRef = useRef(null); + + const submission = async () => { + const response = await fetch("http://localhost:3000/submissions", { + method: "POST", + headers: { + "Content-Type": "application/json", + authorization: localStorage.getItem("token"), + }, + body: JSON.stringify({ + id: id, + submission: userSubmission, + }), + }); + const json = await response.json(); + if (json.status === "Ac") { + navigate("/problems"); + } else { + alert(json.status); + } + }; + + const Fetching = async () => { + const response = await fetch("http://localhost:3000/problem/" + id, { + method: "GET", + }); + const json = await response.json(); + setProblem(json.problem); + }; + + const submissionview = async () => { + const response = await fetch("http://localhost:3000/submission/" + id, { + method: "GET", + headers: { + "Content-Type": "application/json", + authorization: localStorage.getItem("token"), + }, + }); + const json = await response.json(); + if (json.submissions[0]) { + setProblemSubmissions(json.submissions); + setShowSubmissions(true); + scrollToSubmission(); + } else { + setShowSubmissions(false); + } + }; + const scrollToSubmission = () => { + if (submissionsRef.current) { + submissionsRef.current.scrollIntoView({ behavior: "smooth" }); + } + }; + + useEffect(() => { + Fetching(); + // submissionview(); + }, []); + + // const { title, discription, exampleInput } = problem; + // const { input, output } = exampleInput; + const title = problem.title; + const discription = problem.discription; + const exampleInput = problem.exampleInput; + const input = exampleInput.input; + const output = exampleInput.output; + + return ( + <> +
+
+

{title}

+ +
Description
+

{discription}

+ + +
+

Example

+ +
Input:
+

{input}

+ + +
Output:
+

{output}

+ +
+ {showSubmissions && ( +
+

Submissions

+
+ + + + + + + {problemSubmissions.map((submission, index) => ( + + + + + ))} + +
SInoSubmissions
{index + 1}{submission.submission}
+
+
+ )} +
+
+

Write Your Code Here

+ +
+ + +
+
+
+ + ); +} + +export default SingleProblem; diff --git a/src/index.css b/src/index.css index e69de29b..d0ada1fa 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,3 @@ +*{ + margin: 0; +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 5cc59919..9a01ed48 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,13 @@ -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 { BrowserRouter } from "react-router-dom"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +);