Create app

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

components/Forms/HandleForm.js

@@ -0,0 +1,36 @@
+import { Field, Form, Formik, ErrorMessage } from "formik";
+import { FormSubmitBtn } from "../UI/buttons";
+import { FormGroup } from "./Form";
+
+export default function HandleForm({ submitHandler }) {
+  return (
+    <Formik
+      initialValues={{
+        handle: "",
+      }}
+      onSubmit={submitHandler}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className="mt-20 w-screen flex justify-center">
+            <div className="w-1/2 h-20 flex bg-white justify-center items-center shadow-md rounded">
+              <label htmlFor="handle" className="mr-10 form-label">
+                Enter Handle
+              </label>
+              <Field
+                type="text"
+                name="handle"
+                id="handle"
+                className="p-2 border-2 focus:border-white mr-20"
+              />
+
+              <button className="border-2 p-2 w-50" type="submit">
+                submit
+              </button>
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+}

components/Hooks/useFileGetRequestWithoutAuth.js

@@ -16,7 +16,7 @@ export default function useFileGetRequestWithoutAuth(route, options = {}) {
   useEffect(() => {
     async function makeRequest() {
       try {
-        const response = await API.get("Diogenes", route);
+        const response = await API.get("CoderSpaceApi", route);
         if (isMounted.current) {
           setLoading(false);
           setData(response);

components/Hooks/useGetRequestWithoutAuth.js

@@ -13,7 +13,7 @@ export default function useGetRequestWithoutAuth(route, options = {}) {
   useEffect(() => {
     async function makeRequest() {
       try {
-        const response = await API.get("sourceQwik", route);
+        const response = await API.get("coderSpace", route);
         if (isMounted.current) {
           setLoading(false);
           setData(response);

components/Hooks/useLazyGetRequestWithoutAuth.js

@@ -18,7 +18,7 @@ export default function useLazyGetRequestWithoutAuth(options = {}) {
       }
       setLoading(true);
       try {
-        const response = await API.get("sourceQwik", route);
+        const response = await API.get("coderSpace", route);
         setLoading(false);
         setData(response);
         if (options.onSuccess) {

components/UI/Files/ShowFiles.js

@@ -1,6 +1,6 @@
 import Spinner from "../Spinner";
 import { ShowError } from "../errors";
-import useFileGetRequestWithoutAuth from "../../../components/Hooks/useFileGetRequestWithoutAuth";
+import useFileGetRequestWithoutAuth from "../../Hooks/useFileGetRequestWithoutAuth";
 
 export default function ShowFiles({ fileIds, additionalData }) {
   return (
@@ -43,7 +43,7 @@ function ShowFileData({ data, showAdditionalData = false }) {
         </p>
       ) : null}
       <a
-        className="  nav-btn block w-max mt-2"
+        className="nav-btn block w-max mt-2"
         href={data.fileAccessUrl}
         target="_blank"
         rel="noreferrer"

components/UI/ProgressBar.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+const ProgressBar = ({ bgcolor, progress, height }) => {
+  const Parentdiv = {
+    height: 15,
+    width: 500,
+    backgroundColor: "whitesmoke",
+    borderRadius: 20,
+    marginTop: 10,
+    marginBottom: 10,
+  };
+
+  const Childdiv = {
+    height: "100%",
+    width: `${progress}%`,
+    backgroundColor: bgcolor,
+    borderRadius: 10,
+    textAlign: "right",
+  };
+
+  const progresstext = {
+    padding: 10,
+    color: "black",
+    fontWeight: 900,
+  };
+
+  return (
+    <div style={Parentdiv}>
+      <div style={Childdiv}>
+        <span style={progresstext}></span>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

components/UI/Todo/DeleteIcon.js

@@ -0,0 +1,10 @@
+const EditIcon = props=>{
+    return(
+<svg {...props} viewBox="0 0 20 20" fill="currentColor">
+  <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+  <path fillRule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clipRule="evenodd" />
+</svg>
+    )
+}
+
+export default EditIcon;

components/UI/Todo/EditIcon.js

@@ -0,0 +1,10 @@
+const EditIcon = props=>{
+    return(
+<svg {...props} viewBox="0 0 20 20" fill="currentColor">
+  <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
+  <path fillRule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clipRule="evenodd" />
+</svg>
+    )
+}
+
+export default EditIcon;

components/UI/Todo/Todo.js

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { FaTrashAlt } from "react-icons/fa";
+import EditIcon from "./EditIcon";
+
+const Todo = ({ text, id, completed, todos, setTodos }) => {
+  const [editMode, setEditMode] = useState(false);
+  const [editVal, setEditVal] = useState(text);
+  const deleteTodo = (e) => {
+    let newTodos = [...todos];
+    newTodos = newTodos.filter((el) => el.id !== id);
+    setTodos(newTodos);
+  };
+  const handleEdit = (e) => {
+    e.preventDefault();
+    const newTodos = [...todos];
+    const index = newTodos.findIndex((el) => el.id === id);
+    newTodos[index] = {
+      ...newTodos[index],
+      text: editVal,
+    };
+    setTodos(newTodos);
+    setEditMode(false);
+  };
+  const handleCheckBoxToggle = (e) => {
+    const newTodos = [...todos];
+    const index = newTodos.findIndex((el) => el.id === id);
+    newTodos[index] = {
+      ...newTodos[index],
+      completed: e.currentTarget.checked,
+    };
+    setTodos(newTodos);
+    setEditMode(false);
+  };
+  return (
+    <div className="flex space-x-2 w-[100%] justify-between items-center ">
+      <div className="flex items-center space-x-2">
+        <input
+          type="checkbox"
+          className="rounded-[5px]"
+          checked={completed}
+          onChange={handleCheckBoxToggle}
+        />
+        {editMode ? (
+          <form onSubmit={handleEdit}>
+            {" "}
+            <input
+              className="text-[0.6em] bg-gray-800 outline-none"
+              value={editVal}
+              onChange={(e) => setEditVal(e.target.value)}
+            />
+          </form>
+        ) : (
+          <div className="text-[0.6em]">{text}</div>
+        )}
+      </div>
+
+      <div className="flex space-x-1">
+        <EditIcon
+          className="w-6 hover:cursor-pointer transition-all hover:opacity-80"
+          onClick={(e) => setEditMode(true)}
+        />
+        <FaTrashAlt
+          className="w-3 hover:cursor-pointer transition-all hover:opacity-80"
+          onClick={deleteTodo}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Todo;

components/UI/buttons.js

@@ -2,7 +2,38 @@ import router from "next/router";
 
 export function FormSubmitBtn({ children, type, disabled }) {
   return (
-    <button className="form-button" disabled={disabled} type={type}>
+    <button
+      className="bg-slate-700 text-lg font-medium font-bold text-white w-96 rounded-lg h-12 my-2 hover:bg-slate-900 focus:outline-none"
+      disabled={disabled}
+      type={type}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DashboardSidebarButton({ children, linkTo, highlight }) {
+  return (
+    <button
+      className={`
+        bg-transparent text-lg m-5 hover:text-white ${
+          highlight ? "text-white" : "text-gray-400"
+        } flex flex-col items-center gap-1`}
+      onClick={() => router.push(linkTo)}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DashboardSelectionButton({ children, linkTo, highlight }) {
+  return (
+    <button
+      className={`bg-transparent hover:text-gray-400   text-base-bold p-4 mr-2 ${
+        highlight ? "text-black" : "text-gray-500"
+      }`}
+      onClick={() => router.push(linkTo)}
+    >
       {children}
     </button>
   );

components/UI/carousel.js

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import ReactCardCarousel from "react-card-carousel";
+import { FaChartPie, FaChartLine, FaChartBar } from "react-icons/fa";
+import analytics from "../../public/images/analytics.png";
+import file from "../../public/images/file.jpg";
+import todo from "../../public/images/todo.png";
+
+import Image from "next/image";
+class MyCarousel extends Component {
+  static get CONTAINER_STYLE() {
+    return {
+      position: "relative",
+      height: "100vh",
+      width: "100%",
+      display: "flex",
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "middle",
+    };
+  }
+
+  static get CARD_STYLE() {
+    return {
+      height: "500px",
+      width: "500px",
+      paddingTop: "80px",
+      padding: "50px",
+      textAlign: "center",
+      background: "#334155",
+      color: "#FFF",
+      fontFamily: "sans-serif",
+      fontSize: "20px",
+      textTransform: "",
+      borderRadius: "10px",
+      boxSizing: "border-box",
+    };
+  }
+
+  render() {
+    console.log(analytics);
+
+    return (
+      <div style={MyCarousel.CONTAINER_STYLE}>
+        <ReactCardCarousel autoplay={true} autoplay_speed={2500}>
+          <div style={MyCarousel.CARD_STYLE}>
+            Analyse your performance
+            <div className="h-10"></div>
+            <Image src={analytics} alt="analytics" className="w-full h-30" />
+            <div className="mt-5">
+              Are you a competitive programmer? Do you want to improve yourself
+              by comapring your performance with different users.
+            </div>
+          </div>
+          <div style={MyCarousel.CARD_STYLE}>
+            Upload and view your files
+            <div className="h-10"></div>
+            <Image src={file} alt="file uploader" className="w-full " />
+            <div className="mt-5">
+              Manage all your documents at one place. Upload your files to a
+              secured cloud storage.
+            </div>
+          </div>
+          <div style={MyCarousel.CARD_STYLE}>
+            Manage your daily work
+            <div className="h-10"></div>
+            <Image src={todo} alt="todo-list" className="w-full h-30" />
+            <div className="mt-5">
+              Manage your daya to day work by preparing a todo list.
+            </div>
+          </div>
+        </ReactCardCarousel>
+      </div>
+    );
+  }
+}
+
+export default MyCarousel;

components/utils/requests.js

@@ -17,6 +17,7 @@ export async function postRequestWithAuth(path, data) {
   // data.headers = {
   //   Authorization: jwtToken,
   // };
+  console.log(data);
 
   return API.post("CoderSpaceApi", path, data);
 }

lib/Dashboards/Analytics/AnalyticsSelection.js

@@ -0,0 +1,33 @@
+import { Section } from "../../../components/UI/Dashboard/Section";
+import PageDoesNotExist from "../../../lib/Dashboards/PageNotExist";
+import LeetcodeProfile from "./Leetcode";
+import CodeforcesPersonalProfile from "./Codeforces/CodeforcesPersonalProfile";
+import { ButtonsContainer } from "../../../components/UI/Dashboard/Section";
+import { DashboardSelectionButton } from "../../../components/UI/buttons";
+
+export default function Analytics({ tab }) {
+  function getSection(tab) {
+    if (tab === "codeforces") return <CodeforcesPersonalProfile />;
+    else if (tab === "leetcode") return <LeetcodeProfile />;
+    else return <PageDoesNotExist />;
+  }
+  return (
+    <>
+      <ButtonsContainer>
+        <DashboardSelectionButton
+          linkTo="/dashboard/analytics?tab=codeforces"
+          highlight={tab === "codeforces"}
+        >
+          CodeForces
+        </DashboardSelectionButton>
+        <DashboardSelectionButton
+          linkTo="/dashboard/analytics?tab=leetcode"
+          highlight={tab === "leetcode"}
+        >
+          Leetcode
+        </DashboardSelectionButton>
+      </ButtonsContainer>
+      <Section>{getSection(tab)}</Section>
+    </>
+  );
+}

lib/Dashboards/Analytics/Codeforces/CodeforcesCompare.js

@@ -0,0 +1 @@
+export default function CodeforcesCompare() {}

lib/Dashboards/Analytics/Codeforces/CodeforcesPersonalProfile.js

@@ -0,0 +1,10 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+export default function CodeforcesPersonalProfile() {
+  const router = useRouter();
+  useEffect(() => {
+    router.push("/analytics/codeforces");
+  });
+  return null;
+}