- {username == ""
+ {isLoggingOut
+ ? `Till next time, ${username} ...`
+ : username == ""
? "Wake up, Neo..."
: `Welcome, ${username}!`}
@@ -68,7 +78,7 @@ const NavBar = ({ message, timer = 0 }) => {
);
};
-NavBar.propTypes = {
+Header.propTypes = {
message: propTypes.shape({
username: propTypes.string.isRequired,
isLoading: propTypes.bool.isRequired,
@@ -78,6 +88,7 @@ NavBar.propTypes = {
wasCookieSent: propTypes.bool.isRequired,
}),
timer: propTypes.number,
+ isLoggingOut: propTypes.bool
};
-export default NavBar;
+export default Header;
diff --git a/src/components/LogOut.js b/src/components/LogOut.js
new file mode 100644
index 0000000..9e5ee8e
--- /dev/null
+++ b/src/components/LogOut.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { LogOutButton } from '../styles/logout-button'
+import propTypes from "prop-types";
+
+const LogOut = ({ handleLogOutClick }) => {
+
+ const handleLogout = () => { //Called when LogOut button is clicked
+ handleLogOutClick();
+ }
+
+ return (
+
+
+ LogOut
+
+
+ )
+
+}
+
+LogOut.propTypes = {
+ handleLogOutClick: propTypes.func
+}
+
+export default LogOut;
diff --git a/src/components/NotAcQuestionsTable.js b/src/components/NotAcQuestionsTable.js
new file mode 100644
index 0000000..71a3713
--- /dev/null
+++ b/src/components/NotAcQuestionsTable.js
@@ -0,0 +1,99 @@
+import React from "react";
+import propTypes, { array } from "prop-types";
+
+import {
+ TableContainer,
+ Table,
+ TBody,
+ THead,
+ Tr,
+ Th,
+ Td,
+} from "../styles/table";
+import { Scrollable } from "../styles/scrollbar";
+
+const NotAcQuestionsTable = ({ data }) => {
+ console.log("DATA:", data);
+ return (
+
+
+
+
+
+
+
+
+
+ | Title |
+ Level |
+ Status |
+
+
+
+
+
+
+
+
+
+
+
+
+ {data["stat_status_pairs"].map((que, index) => {
+ if (!(que["status"] === "notac")) {
+ //if not notac then return null
+ return null;
+ }
+ //if notac then return as a row for the table
+ return (
+
+ |
+
+ {que["stat"]["question__title"]}
+
+ |
+
+ {que["difficulty"]["level"] == 1
+ ? "Easy"
+ : que["difficulty"]["level"] == 2
+ ? "Medium"
+ : "Hard"}
+ |
+
+ {que["status"] === "ac"
+ ? "AC"
+ : que["status"] === "notac"
+ ? "Not-AC"
+ : "Not-Attempted"}
+ |
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+NotAcQuestionsTable.propTypes = {
+ data: propTypes.shape({
+ stat_status_pairs: propTypes.arrayOf(
+ propTypes.shape({
+ difficulty: propTypes.shape({ level: propTypes.number }),
+ stat: propTypes.shape({
+ question__title: propTypes.string,
+ question__title_slug: propTypes.string,
+ }),
+ level: propTypes.number,
+ status: propTypes.string,
+ })
+ ),
+ }),
+};
+
+export default NotAcQuestionsTable;
diff --git a/src/components/QuestionsTable.js b/src/components/QuestionsTable.js
index aae7758..5d84522 100644
--- a/src/components/QuestionsTable.js
+++ b/src/components/QuestionsTable.js
@@ -10,6 +10,7 @@ import {
Th,
Td,
} from "../styles/table";
+import { Scrollable } from "../styles/scrollbar";
const QuestionsTable = ({ data }) => {
console.log("DATA:", data);
@@ -17,57 +18,66 @@ const QuestionsTable = ({ data }) => {
-
+ {/* added new column for "question_id" */}
+
+
- | Title |
+ ID |
+ Title |
Level |
- Status |
+ Status |
-
-
-
-
-
-
-
- {data["stat_status_pairs"].map((que, index) => {
- return (
-
- |
-
- {que["stat"]["question__title"]}
-
- |
-
- {que["difficulty"]["level"] == 1
- ? "Easy"
- : que["difficulty"]["level"] == 2
- ? "Medium"
- : "Hard"}
- |
-
- {que["status"] === "ac"
- ? "AC"
- : que["status"] === "notac"
- ? "Not-AC"
- : "Not-Attempted"}
- |
-
- );
- })}
-
-
+
+
+
+
+
+
+
+
+
+ {data["stat_status_pairs"].map((que, index) => {
+ return (
+
+ |
+ {que["stat"]["frontend_question_id"]}
+ |
+
+
+ {que["stat"]["question__title"]}
+
+ |
+
+ {que["difficulty"]["level"] == 1
+ ? "Easy"
+ : que["difficulty"]["level"] == 2
+ ? "Medium"
+ : "Hard"}
+ |
+
+ {que["status"] === "ac"
+ ? "AC"
+ : que["status"] === "notac"
+ ? "Not-AC"
+ : "Not-Attempted"}
+ |
+
+ );
+ })}
+
+
+
);
};
diff --git a/src/components/TableContent.js b/src/components/TableContent.js
new file mode 100644
index 0000000..9b51839
--- /dev/null
+++ b/src/components/TableContent.js
@@ -0,0 +1,60 @@
+import React from "react";
+import QuestionsTable from "./QuestionsTable";
+import AttemptedQuestionsTable from "./AttemptedQuestionsTable";
+import AcQuestionsTable from "./AcQuestionsTable"
+import NotAcQuestionsTable from "./NotAcQuestionsTable"
+import propTypes from "prop-types";
+
+const TableContent = ({ data, category }) => {
+
+ // This component checks the category and returns the corresponding component accordingly
+
+ switch(category) {
+
+ case 'All Questions' :
+ return (
+
+ );
+
+ case 'Attempted' :
+ return (
+
+ );
+
+ case 'Accepted' :
+ return (
+
+ );
+
+ case 'Not Accepted' :
+ return (
+
+ );
+
+ default :
+ return (
+ null
+ )
+
+ }
+
+};
+
+TableContent.propTypes = {
+ data: propTypes.shape({
+ stat_status_pairs: propTypes.arrayOf(
+ propTypes.shape({
+ difficulty: propTypes.shape({ level: propTypes.number }),
+ stat: propTypes.shape({
+ question__title: propTypes.string,
+ question__title_slug: propTypes.string,
+ }),
+ level: propTypes.number,
+ status: propTypes.string,
+ })
+ ),
+ }),
+ category: propTypes.string,
+};
+
+export default TableContent;
diff --git a/src/static/gifs/iDontBelieveThat.gif b/src/static/gifs/iDontBelieveThat.gif
new file mode 100644
index 0000000..518255b
Binary files /dev/null and b/src/static/gifs/iDontBelieveThat.gif differ
diff --git a/src/static/gifs/iDontBelieveThat.mp4 b/src/static/gifs/iDontBelieveThat.mp4
new file mode 100644
index 0000000..966a393
Binary files /dev/null and b/src/static/gifs/iDontBelieveThat.mp4 differ
diff --git a/src/styles/cookie-form.js b/src/styles/cookie-form.js
index 6c19aa8..0043817 100644
--- a/src/styles/cookie-form.js
+++ b/src/styles/cookie-form.js
@@ -1,6 +1,6 @@
import styled, { keyframes } from "styled-components";
import { backgroundImageProperty } from "./constants";
-import { greetingAnimation } from "./navbar";
+import { greetingAnimation } from "./header";
export const Div = styled.div`
display: flex;
diff --git a/src/styles/navbar.js b/src/styles/header.js
similarity index 97%
rename from src/styles/navbar.js
rename to src/styles/header.js
index 21f8f1c..ec362df 100644
--- a/src/styles/navbar.js
+++ b/src/styles/header.js
@@ -28,6 +28,7 @@ export const Div = styled.div`
? css`
font-family: "Tetris Font";
margin: 0 0 0 10px;
+ cursor: pointer;
`
: css`
flex-basis: 20%;
diff --git a/src/styles/logout-button.js b/src/styles/logout-button.js
new file mode 100644
index 0000000..49c46b6
--- /dev/null
+++ b/src/styles/logout-button.js
@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components";
+
+//Styled component for LogOut button
+
+export const LogOutButton = styled.button`
+ background: transparent;
+ border-radius: 3px;
+ border: 2px solid #ff00e0;
+ color: white;
+ font-family: "Cool Font";
+ padding: 0.25em 1em;
+ margin: 0 10px 0 10px;
+ position: absolute;
+ right: 20px;
+ ${(props) =>
+ props &&
+ props.isLogOutButton &&
+ css`
+ color: #ff0000;
+ `}
+`;
diff --git a/src/styles/scrollbar.js b/src/styles/scrollbar.js
new file mode 100644
index 0000000..b51c774
--- /dev/null
+++ b/src/styles/scrollbar.js
@@ -0,0 +1,11 @@
+import styled, { css } from "styled-components";
+
+export const Scrollable = styled.div`
+ overflow: auto;
+ ${(props) =>
+ props &&
+ props.maxHeight &&
+ css`
+ max-height: ${props.maxHeight};
+ `}
+`;
