From 61654a815944fb5750aa6e227fc11b60d4578904 Mon Sep 17 00:00:00 2001
From: Wilson <wwc4618@ic.ac.uk>
Date: Wed, 12 Aug 2020 13:21:11 +0800
Subject: [PATCH] Implement calling resources endpoint, and add Materials setup
instructions to README
---
frontend/README.md | 25 ++++++++---
.../src/components/pages/ModuleList/index.tsx | 18 ++++----
.../pages/ModuleResources/index.tsx | 42 ++++++++-----------
.../components/pages/StandardView/index.tsx | 14 ++++---
frontend/src/constants/routes.tsx | 6 +--
frontend/src/utils/api.tsx | 15 +++++--
frontend/src/utils/auth.tsx | 6 +--
7 files changed, 72 insertions(+), 54 deletions(-)
diff --git a/frontend/README.md b/frontend/README.md
index 8eb638b4c..176c1cdc3 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,11 +2,26 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
## Setup
-First, run
-
-### `yarn install`
-
-to install the node modules used for the frontend. In order for the API links to work, the following repository branches need to be cloned and run (separately):
+First, run `yarn install` to install the node modules used for the frontend.
+
+In order for the API links to work, the following repository branches need to be cloned and run separately:
+
+### 1. materials@scientia-integration
+```shell
+# Clone the repository and checkout to the relevant branch
+git clone https://gitlab.doc.ic.ac.uk/edtech/materials.git
+git checkout scientia-integration
+
+# Setup and run the development server on port 5000
+python3 -m venv venv
+source venv/bin/activate
+pip install --upgrade pip && pip install -r requirements.txt
+export FLASK_ENV=development
+export FLASK_APP=materials
+flask create_all
+flask populate -r materials/mocks/resources.json
+flask run
+```
## To run
diff --git a/frontend/src/components/pages/ModuleList/index.tsx b/frontend/src/components/pages/ModuleList/index.tsx
index 0a4fde6f4..5c8a92bd1 100644
--- a/frontend/src/components/pages/ModuleList/index.tsx
+++ b/frontend/src/components/pages/ModuleList/index.tsx
@@ -20,7 +20,7 @@ const ModuleList: React.FC = () => {
let modules = [
{
title: "Introduction to Logic",
- code: "CO140",
+ code: "140",
image: logicIllustration,
terms: [Term.AUTUMN],
progressStatus: ProgressStatus.IN_PROGRESS,
@@ -29,7 +29,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Discrete Mathematics",
- code: "CO142",
+ code: "142",
image: discreteIllustration,
terms: [Term.AUTUMN],
progressStatus: ProgressStatus.IN_PROGRESS,
@@ -38,7 +38,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Introduction to Computer Systems",
- code: "CO112",
+ code: "112",
image: systemsIllustration,
terms: [Term.AUTUMN],
progressStatus: ProgressStatus.IN_PROGRESS,
@@ -47,7 +47,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Mathematical Methods",
- code: "CO145",
+ code: "145",
terms: [Term.AUTUMN],
image: methodsIllustration,
progressStatus: ProgressStatus.IN_PROGRESS,
@@ -56,7 +56,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Java",
- code: "CO120.2",
+ code: "120.2",
image: javaIllustration,
terms: [Term.AUTUMN, Term.SPRING, Term.SUMMER],
progressStatus: ProgressStatus.IN_PROGRESS,
@@ -65,7 +65,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Graphs and Algorithms",
- code: "CO150",
+ code: "150",
image: graphIllustration,
terms: [Term.SPRING],
progressStatus: ProgressStatus.NOT_STARTED,
@@ -74,7 +74,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Introduction to Computer Architecture",
- code: "CO113",
+ code: "113",
image: architectureIllustration,
terms: [Term.SPRING],
progressStatus: ProgressStatus.NOT_STARTED,
@@ -83,7 +83,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Reasoning About Programs",
- code: "CO141",
+ code: "141",
image: reasoningIllustration,
terms: [Term.SPRING],
progressStatus: ProgressStatus.NOT_STARTED,
@@ -92,7 +92,7 @@ const ModuleList: React.FC = () => {
},
{
title: "Introduction to Databases",
- code: "CO130",
+ code: "130",
image: databaseIllustration,
terms: [Term.SPRING],
progressStatus: ProgressStatus.NOT_STARTED,
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 921e1d160..6d79f369b 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import styles from "./style.module.scss";
import classNames from "classnames";
@@ -22,22 +22,29 @@ import {
faFolder
} from "@fortawesome/free-solid-svg-icons";
-const ModuleResources: React.FC = () => {
-<<<<<<< Updated upstream
-=======
+const ModuleResources: React.FC<{ year: string, module_code: string }> = ({ year, module_code }) => {
+ // TODO: Use these state variables in component
+ const [error, setError] = useState(null);
+ const [isLoaded, setIsLoaded] = useState(false);
+ const [resources, setResources] = useState([]);
+
useEffect(() => {
- //@ts-ignore
- window.Holder.run();
+ setIsLoaded(false);
const onSuccess = (data: any) => {
- console.log(data);
+ setIsLoaded(true);
+ setResources(data.json());
}
const onFailure = (error: any) => {
- console.log(error);
+ setIsLoaded(true);
+ setError(error);
}
- request(api.MATERIALS_COURSES, "GET", onSuccess, onFailure)
- }, []);
->>>>>>> Stashed changes
+ request(api.MATERIALS_RESOURCES, "GET", onSuccess, onFailure, {
+ "year": year,
+ "course": module_code
+ })
+ }, [year, module_code]);
+
return (
<>
<MyBreadcrumbs />
@@ -56,7 +63,6 @@ const ModuleResources: React.FC = () => {
<h5 className={classNames(styles.moduleSectionHeader)}>Quick Access</h5>
-<<<<<<< Updated upstream
{/* TODO: add scroll listener once code is refactored */}
<Container className={classNames(styles.quickAccessRow)}>
{[...Array(6)].map((e, i) => (
@@ -81,18 +87,6 @@ const ModuleResources: React.FC = () => {
</Badge>
</Card.Footer>
</Card>
-=======
- <Row>
- {[...Array(4)].map((e, i) => (
- <Col xs={6} sm={6} md={3} key={i}>
- <Card style={{ marginTop: "1rem" }}>
- <Card.Img variant="top" src="holder.js/100px100" />
- <Card.Body>
- <Card.Title>Document :( {i}</Card.Title>
- </Card.Body>
- </Card>
- </Col>
->>>>>>> Stashed changes
))}
</Container>
diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx
index 2c4ad1245..c79b69679 100644
--- a/frontend/src/components/pages/StandardView/index.tsx
+++ b/frontend/src/components/pages/StandardView/index.tsx
@@ -66,13 +66,15 @@ const StandardView: React.FC<StandardViewProps> = ({
<ModuleOverview />
</Route>
- <Route path="/modules/:id/resources">
- <ModuleResources />
- </Route>
+ <Route
+ path="/modules/:id/resources"
+ render={(props) => <ModuleResources
+ year="1819"
+ module_code={props.match.params.id}
+ />}
+ />
- <Route path="/modules/:id/feedback">
- <ModuleFeedback />
- </Route>
+ <Route path="/modules/:id/feedback" component={ModuleFeedback} />
<Route path="/timeline">
<ExamplePage name="Timeline" />
diff --git a/frontend/src/constants/routes.tsx b/frontend/src/constants/routes.tsx
index d17cf9bf7..dd37f6e24 100644
--- a/frontend/src/constants/routes.tsx
+++ b/frontend/src/constants/routes.tsx
@@ -6,10 +6,10 @@ const prod = {
MATERIALS_URL: "https://materials.doc.ic.ac.uk",
}
-const LOGIN = "/auth/login"
const config = process.env.NODE_ENV === "development" ? dev : prod;
export const api = {
- MATERIALS_LOGIN: config.MATERIALS_URL + LOGIN,
- MATERIALS_COURSES: config.MATERIALS_URL + "/courses/1819"
+ MATERIALS_LOGIN: config.MATERIALS_URL + "/auth/login",
+ MATERIALS_COURSES: config.MATERIALS_URL + "/courses/1819",
+ MATERIALS_RESOURCES: config.MATERIALS_URL + "/resources"
}
\ No newline at end of file
diff --git a/frontend/src/utils/api.tsx b/frontend/src/utils/api.tsx
index 84c2a38c8..b21d81177 100644
--- a/frontend/src/utils/api.tsx
+++ b/frontend/src/utils/api.tsx
@@ -1,13 +1,20 @@
import authConstants from "../constants/auth";
import authenticationService from "../utils/auth";
+import { api } from "../constants/routes"
interface RequestOptions {
[key: string]: any
}
+// API calling interface. onSuccess and onError are functions that take in data
+// and error parameters respectively. Body is process as query parameters if
+// method is GET
+// Note: will trigger CORS OPTIONS preflight due to the Authorization header
export async function request(url: string, method: string, onSuccess: any, onError: any, body?: any) {
if (!authenticationService.userIsLoggedIn()) {
- await authenticationService.login("abc123", "a");
+ // TODO: Credentials should be handled elsewhere
+ // TODO: Specific endpoint login route should be passed in
+ await authenticationService.login("abc123", "a", api.MATERIALS_LOGIN);
}
var options: RequestOptions = {
@@ -19,8 +26,10 @@ export async function request(url: string, method: string, onSuccess: any, onErr
},
};
- if (method !== "GET") {
- options.body = JSON.stringify(body);
+ if (method === "GET") {
+ url = url + "?" + new URLSearchParams(body);
+ } else {
+ options.body = JSON.stringify(body);
}
return fetch(url, options)
diff --git a/frontend/src/utils/auth.tsx b/frontend/src/utils/auth.tsx
index 3ff22f085..b0e19a20f 100644
--- a/frontend/src/utils/auth.tsx
+++ b/frontend/src/utils/auth.tsx
@@ -1,5 +1,4 @@
import authConstants from "../constants/auth";
-import { api } from "../constants/routes";
function storeDataInStorage(data: { access_token: string; user_info: any; }) {
sessionStorage.setItem(authConstants.ACCESS_TOKEN, data.access_token);
@@ -22,9 +21,8 @@ function getUserInfo() {
return {}
}
-async function login(username: string, password: string) {
- // TODO: endpoint route should be passed in
- const response = await fetch(api.MATERIALS_LOGIN, {
+async function login(username: string, password: string, login_url: string) {
+ const response = await fetch(login_url, {
method: "POST",
mode: "cors",
headers: {
--
GitLab