diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/components/Forms/HandleForm.js b/components/Forms/HandleForm.js new file mode 100644 index 0000000..c8951fc --- /dev/null +++ b/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 ( + + {({ isSubmitting }) => ( +
+
+
+ + + + +
+
+
+ )} + + ); +} diff --git a/components/Hooks/useFileGetRequestWithoutAuth.js b/components/Hooks/useFileGetRequestWithoutAuth.js index 3ff15bf..f66f908 100644 --- a/components/Hooks/useFileGetRequestWithoutAuth.js +++ b/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); diff --git a/components/Hooks/useGetRequestWithoutAuth.js b/components/Hooks/useGetRequestWithoutAuth.js index 962b999..f5759a0 100644 --- a/components/Hooks/useGetRequestWithoutAuth.js +++ b/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); diff --git a/components/Hooks/useLazyGetRequestWithoutAuth.js b/components/Hooks/useLazyGetRequestWithoutAuth.js index 574d168..1213e28 100644 --- a/components/Hooks/useLazyGetRequestWithoutAuth.js +++ b/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) { diff --git a/components/UI/Files/ShowFiles.js b/components/UI/Files/ShowFiles.js index c32a44b..6b77701 100644 --- a/components/UI/Files/ShowFiles.js +++ b/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 }) {

) : null} { + 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 ( +
+
+ +
+
+ ); +}; + +export default ProgressBar; diff --git a/components/UI/Todo/DeleteIcon.js b/components/UI/Todo/DeleteIcon.js new file mode 100644 index 0000000..b84acc9 --- /dev/null +++ b/components/UI/Todo/DeleteIcon.js @@ -0,0 +1,10 @@ +const EditIcon = props=>{ + return( + + + + + ) +} + +export default EditIcon; diff --git a/components/UI/Todo/EditIcon.js b/components/UI/Todo/EditIcon.js new file mode 100644 index 0000000..b84acc9 --- /dev/null +++ b/components/UI/Todo/EditIcon.js @@ -0,0 +1,10 @@ +const EditIcon = props=>{ + return( + + + + + ) +} + +export default EditIcon; diff --git a/components/UI/Todo/Todo.js b/components/UI/Todo/Todo.js new file mode 100644 index 0000000..d24cc56 --- /dev/null +++ b/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 ( +
+
+ + {editMode ? ( +
+ {" "} + setEditVal(e.target.value)} + /> +
+ ) : ( +
{text}
+ )} +
+ +
+ setEditMode(true)} + /> + +
+
+ ); +}; + +export default Todo; diff --git a/components/UI/buttons.js b/components/UI/buttons.js index a1db27a..154c0a5 100644 --- a/components/UI/buttons.js +++ b/components/UI/buttons.js @@ -2,7 +2,38 @@ import router from "next/router"; export function FormSubmitBtn({ children, type, disabled }) { return ( - + ); +} + +export function DashboardSidebarButton({ children, linkTo, highlight }) { + return ( + + ); +} + +export function DashboardSelectionButton({ children, linkTo, highlight }) { + return ( + ); diff --git a/components/UI/carousel.js b/components/UI/carousel.js new file mode 100644 index 0000000..6baca17 --- /dev/null +++ b/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 ( +
+ +
+ Analyse your performance +
+ analytics +
+ Are you a competitive programmer? Do you want to improve yourself + by comapring your performance with different users. +
+
+
+ Upload and view your files +
+ file uploader +
+ Manage all your documents at one place. Upload your files to a + secured cloud storage. +
+
+
+ Manage your daily work +
+ todo-list +
+ Manage your daya to day work by preparing a todo list. +
+
+ +
+ ); + } +} + +export default MyCarousel; diff --git a/components/utils/requests.js b/components/utils/requests.js index 2c6d87c..86d18ad 100644 --- a/components/utils/requests.js +++ b/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); } diff --git a/lib/Dashboards/Analytics/AnalyticsSelection.js b/lib/Dashboards/Analytics/AnalyticsSelection.js new file mode 100644 index 0000000..b230a10 --- /dev/null +++ b/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 ; + else if (tab === "leetcode") return ; + else return ; + } + return ( + <> + + + CodeForces + + + Leetcode + + +
{getSection(tab)}
+ + ); +} diff --git a/lib/Dashboards/Analytics/Codeforces/CodeforcesCompare.js b/lib/Dashboards/Analytics/Codeforces/CodeforcesCompare.js new file mode 100644 index 0000000..3aa6a64 --- /dev/null +++ b/lib/Dashboards/Analytics/Codeforces/CodeforcesCompare.js @@ -0,0 +1 @@ +export default function CodeforcesCompare() {} diff --git a/lib/Dashboards/Analytics/Codeforces/CodeforcesPersonalProfile.js b/lib/Dashboards/Analytics/Codeforces/CodeforcesPersonalProfile.js new file mode 100644 index 0000000..9815747 --- /dev/null +++ b/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; +} diff --git a/lib/Dashboards/Analytics/Leetcode.js b/lib/Dashboards/Analytics/Leetcode.js new file mode 100644 index 0000000..499d47a --- /dev/null +++ b/lib/Dashboards/Analytics/Leetcode.js @@ -0,0 +1,156 @@ +import Head from "next/head"; +import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"; +import { Doughnut } from "react-chartjs-2"; +ChartJS.register(ArcElement, Tooltip, Legend); +import { getRequestWithAuth } from "../../../components/utils/requests"; +import { useState } from "react"; +import HandleForm from "../../../components/Forms/HandleForm"; +import ProgressBar from "../../../components/UI/ProgressBar"; + +const progressData = {}; +const data = { + labels: [], + datasets: [ + { + label: "# of Votes", + backgroundColor: ["rgba(255, 161, 23, 1)", "rgb(211,211,211)"], + borderColor: ["rgba(255, 161, 23, 1)", "rgb(211,211,211)"], + borderWidth: 10, + }, + ], +}; +const options = { + elements: { + arc: { + weight: 0.5, + borderWidth: 3, + }, + }, + cutout: 150, +}; + +export default function LeetcodeProfile() { + const [error, setError] = useState(null); + const [handle, setHandle] = useState(false); + const [loading, setLoading] = useState(false); + + // const value = await getRequestWithAuth(`ananalytics/leetcode/${username}`) + async function submitHandler(username) { + console.log(username); + setHandle(false); + setLoading(true); + if (error) { + setError(null); + } + + try { + console.log(username); + const value = await getRequestWithAuth( + `/analytics/leetcode/${username.handle}` + ); + console.log(value); + data.datasets[0].data = [ + value.getLeetcodeProfile.totalSolved, + value.getLeetcodeProfile.totalQuestions, + ]; + console.log(data.datasets[0].data); + progressData.easyPerc = + (value.getLeetcodeProfile.easySolved / + value.getLeetcodeProfile.totalEasy) * + 100; + progressData.mediumPerc = + (value.getLeetcodeProfile.mediumSolved / + value.getLeetcodeProfile.totalMedium) * + 100; + progressData.hardPerc = + (value.getLeetcodeProfile.hardSolved / + value.getLeetcodeProfile.totalHard) * + 100; + progressData.easy = + value.getLeetcodeProfile.easySolved + + "/" + + value.getLeetcodeProfile.totalEasy; + progressData.medium = + value.getLeetcodeProfile.mediumSolved + + "/" + + value.getLeetcodeProfile.totalMedium; + progressData.hard = + value.getLeetcodeProfile.hardSolved + + "/" + + value.getLeetcodeProfile.totalHard; + setHandle(true); + console.log(value); + } catch (err) { + setError(err); + setLoading(false); + } + } + return ( + <> + + Analytics - Dashboard | CodeSpace + +

Leetcode

+
+ + {handle == true ? ( +
+
+
+ +
+
+
+
+
+
Easy
+
{progressData.easy}
+
+ +
+
+
+
Medium
+
{progressData.medium}
+
+ +
+
+
+
Hard
+
{progressData.hard}
+
+ +
+
+
+
+
+
+
+ ) : null} +
+ + ); +} diff --git a/lib/Dashboards/Todo/TodoWindow.js b/lib/Dashboards/Todo/TodoWindow.js new file mode 100644 index 0000000..876ecfd --- /dev/null +++ b/lib/Dashboards/Todo/TodoWindow.js @@ -0,0 +1,58 @@ +import { useState } from "react"; +import uniqid from "uniqid"; +import Todo from "../../../components/UI/Todo/Todo"; + +const TodoWindow = (props) => { + const [value, setValue] = useState(""); + const [todos, setTodos] = useState([]); + const handleAddTodo = (e) => { + e.preventDefault(); + if (value === "") return; + const newTodos = [...todos]; + + newTodos.push({ + id: uniqid(), + completed: false, + text: value, + }); + setTodos(newTodos); + setValue(""); + }; + + return ( +
+
+

Todo List

+
+ setValue(e.target.value)} + /> + +
+
+ {todos.map(({ id, text, completed }) => { + return ( + + ); + })} +
+
+
+ ); +}; + +export default TodoWindow; diff --git a/lib/Dashboards/file/ViewFile.js b/lib/Dashboards/file/ViewFile.js index 8260944..edc5a6c 100644 --- a/lib/Dashboards/file/ViewFile.js +++ b/lib/Dashboards/file/ViewFile.js @@ -1,12 +1,37 @@ import useAuthContext from "../../../components/contexts/useAuthContext"; import useGetRequest from "../../../components/Hooks/useGetRequest"; + +import { getRequestWithAuth } from "../../../components/utils/requests"; import ShowFiles from "../../../components/UI/Files/ShowFiles"; +import { useEffect, useState } from "react"; + export default function ViewFile() { + const [profileData, setProfileData] = useState({}); const { userDetail } = useAuthContext(); - - const { data, error, loading } = useGetRequest(`/user/${userDetail.sub}`); + const { + data: user, + error, + loading, + } = useGetRequest(`/user/${userDetail.sub}`, { + initialDataState: { + user: {}, + }, + }); // const value = data.user; // console.log(data.user); - console.log(data); - return <>{/* */}; + useEffect(() => { + setProfileData(user); + }, [user]); + // console.log(profileData.user[0].files); + return ( + <> + {loading || error ? null : !Object.keys(profileData.user) + .length ? null : ( + + )} + + ); } diff --git a/lib/Hooks/useSignup.js b/lib/Hooks/useSignup.js index d1e9fcc..56b975c 100644 --- a/lib/Hooks/useSignup.js +++ b/lib/Hooks/useSignup.js @@ -28,9 +28,19 @@ export default function useSignup(options) { data.lastName ); console.log(response); - await postRequestWithAuth(`/user/${response.UserSub}`, { - name: data.firstName, - }); + const user = { + body: { + name: data.firstName + " " + data.lastName, + }, + }; + await postRequestWithAuth(`/user/${response.userSub}`, user); + // const res = await postRequestWithAuth(`/user/asus`, { + // body: { + // name: "abcdef", + // }, + // }); + // console.log(res); + if (isMounted.current) { setLoading(false); options.onSuccess(); diff --git a/next.config.js b/next.config.js index a843cbe..16c008a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,15 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, -} + async redirects() { + return [ + { + source: "/analytics/codeforces", + destination: "http://127.0.0.1:5501/pages/cfviz/index.html", + permanent: true, + }, + ]; + }, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package.json b/package.json index c8eb2ed..f698b40 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,19 @@ }, "dependencies": { "aws-amplify": "^4.3.16", + "chart.js": "^3.7.1", "filesize": "^8.0.7", "formik": "^2.2.9", "next": "12.1.0", "react": "17.0.2", + "react-card-carousel": "^1.1.3", + "react-chartjs-2": "^4.1.0", "react-dom": "17.0.2", "react-icons": "^4.3.1", "react-loader-spinner": "^6.0.0-0", + "react-multi-carousel": "^2.8.0", "react-phone-input-2": "^2.15.0", + "uniqid": "^5.4.0", "yup": "^0.32.11" }, "devDependencies": { diff --git a/pages/cfviz b/pages/cfviz new file mode 160000 index 0000000..b31e9fb --- /dev/null +++ b/pages/cfviz @@ -0,0 +1 @@ +Subproject commit b31e9fb1366873d6d719a0d276debc7d5ec74970 diff --git a/pages/dashboard/[type].js b/pages/dashboard/[type].js index 62b7c07..8d077a3 100644 --- a/pages/dashboard/[type].js +++ b/pages/dashboard/[type].js @@ -1,6 +1,7 @@ import { useRouter } from "next/router"; import Head from "next/head"; -import { FaFileAlt, FaUser, FaCode } from "react-icons/fa"; +import { FaFileAlt, FaUser, FaChartBar, FaList } from "react-icons/fa"; + import { DashboardSidebarButton } from "../../components/UI/buttons"; import Sidebar from "../../components/UI/Dashboard/Sidebar"; @@ -8,8 +9,10 @@ import DashboardSelection from "../../components/UI/Dashboard/DashboardSelection import Dashboard from "../../components/UI/Dashboard/Dashboard"; import ManageFile from "../../lib/Dashboards/file/ManageFile"; import ProfileSelection from "../../lib/Dashboards/profile/ProfileSelection"; -import OnlineCompiler from "../../lib/Dashboards/OnlineCompiler"; import PageDoesNotExist from "../../lib/Dashboards/PageNotExist"; +import Analytics from "../../lib/Dashboards/Analytics/AnalyticsSelection"; +import TodoWindow from "../../lib/Dashboards/Todo/TodoWindow"; + export default function DashboardPage() { const router = useRouter(); @@ -34,13 +37,23 @@ export default function DashboardPage() { ); - } else if (type === "compiler") { + + } else if (type === "analytics") { return ( <> - Online Compiler - Dashboard | CodeSpace + Analytics - Dashboard | CodeSpace - + + + ); + } else if (type === "todo") { + return ( + <> + + Todo - Dashboard | CodeSpace + + ); } else { @@ -66,11 +79,19 @@ export default function DashboardPage() { Profile + + Analytics + + - - Online compiler + + Todo + {getSelection(type)} diff --git a/pages/index.js b/pages/index.js index 080232f..0374baa 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ import Head from "next/head"; import Image from "next/image"; import styles from "../styles/Home.module.css"; +import MyCarousel from "../components/UI/carousel"; export default function Home() { return ( @@ -15,40 +16,8 @@ export default function Home() {

Welcome to CoderSpace!

+ -

- Get started by creating your account{" "} - Hello World! -

- -
- -

Login →

-

Login to continue using this app and manage your workspace

- - - -

Signup →

-

- Signup to create your profile and explore what features we have! -

- - - -

Compile and Run →

-

- Use our compiler to compile and run your code in any language. -

- - - -

Upload Files→

-

- Upload all your files to keep them at one place, using our cloud - storage. -

- -
); diff --git a/pages/login.js b/pages/login.js index 0b26afa..5106c55 100644 --- a/pages/login.js +++ b/pages/login.js @@ -27,6 +27,7 @@ export default function Login() { ctx.changeUserDetail(user.attributes); ctx.changeLoginState(true); setLoading(false); + router.push("/dashboard"); } catch (err) { let error = err; let errorMessage = "Something happened. Please try again."; diff --git a/public/images/analytics.png b/public/images/analytics.png new file mode 100644 index 0000000..f879d95 Binary files /dev/null and b/public/images/analytics.png differ diff --git a/public/images/file-upload.jpg b/public/images/file-upload.jpg new file mode 100644 index 0000000..e45d5b5 Binary files /dev/null and b/public/images/file-upload.jpg differ diff --git a/public/images/file.jpg b/public/images/file.jpg new file mode 100644 index 0000000..7112ac3 Binary files /dev/null and b/public/images/file.jpg differ diff --git a/public/images/todo.png b/public/images/todo.png new file mode 100644 index 0000000..af7a699 Binary files /dev/null and b/public/images/todo.png differ diff --git a/styles/Home.module.css b/styles/Home.module.css index 32a57d5..7b1aeee 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -29,7 +29,7 @@ } .title a { - color: #0070f3; + color: #334155; text-decoration: none; } diff --git a/styles/globals.css b/styles/globals.css index 4a8ae85..0cf6fb4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -12,6 +12,7 @@ body { font-family: "Raleway", sans-serif; position: relative; overflow-x: hidden; + background-color: rgb(246, 242, 242); } /* @@ -230,7 +231,7 @@ body { } .form-button { - @apply bg-gray-100 text-lg font-medium font-bold text-white w-96 rounded-lg h-12 my-2 hover:bg-hoverGreen focus:outline-none; + @apply bg-slate-700 text-lg font-medium font-bold text-white w-96 rounded-lg h-12 my-2 hover:bg-hoverGreen focus:outline-none; } .rfq-form-label { diff --git a/tailwind.config.js b/tailwind.config.js index 08b8449..3026209 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,6 +7,9 @@ module.exports = { ], theme: { extend: { + height: { + 128: "32rem", + }, colors: { green: { DEFAULT: "#2c4444", @@ -26,6 +29,9 @@ module.exports = { hoverGreen: { DEFAULT: "#243737", }, + blueGray: { + DEFAULT: "#64748B", + }, }, }, },