Add unique URL for each solution

Author: temanisparsh

src/App.css

@@ -41,6 +41,7 @@
 }
 
 .problem-card {
+    display: block;
     background-color: #282a36;
     border-radius: 5px;
     padding: 20px 20px;
@@ -52,6 +53,8 @@
 }
 
 .problem-card:hover {
+    color: white;
+    text-decoration: none;
     background-color: #1a1c27;
 }
 

src/App.js

@@ -83,13 +83,14 @@ const Main = ({ updateProblem }) => {
             </div>
             <div className="problems">
                 {_.map(problems, (problem) => (
-                    <div
-                        className="problem-card"
+                    <a
                         onClick={() => updateProblem(problem.number)}
+                        href={"#" + problem.number}
                         key={problem.number}
+                        className="problem-card"
                     >
                         {problem["number"] + ".   " + problem["name"]}
-                    </div>
+                    </a>
                 ))}
             </div>
             {!problems.length && difficulty !== "All" && (
@@ -178,6 +179,11 @@ const Problem = ({ problem, updateProblem }) => {
 const App = () => {
     const [problem, updateProblem] = useState(null);
 
+    useEffect(() => {
+        const problemId = window.location.hash.substring(1);
+        if (data[problemId]) updateProblem(problemId);
+    }, [window.location]);
+
     return (
         <div className="app">
             <Main {...{ updateProblem }} />