Skip to content

Commit

Permalink
add lessons straight to site
Browse files Browse the repository at this point in the history
  • Loading branch information
@cidneyweng
cidneyweng committed Mar 13, 2021
1 parent 42e4455 commit 63dce42
Show file tree
Hide file tree
Showing 18 changed files with 388 additions and 337 deletions.
2 changes: 1 addition & 1 deletion client/src/components/AuthComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const AuthComponent = props => {
} else {
return (
<div>
<NavBar isMentor={mentor} />
<NavBar isMentor={mentor} match={match} />
<Component ismentor={mentor} id={match.params.id} />
</div>
);
Expand Down
177 changes: 67 additions & 110 deletions client/src/components/LessonCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
import React, { useState } from 'react';
import { Popconfirm, Button, Modal, Row, Col, Input } from 'antd';
import { Popconfirm, Button, Modal, Row, DatePicker, Input } from 'antd';
import { GoTrashcan } from 'react-icons/go';
// import * as decode from 'jwt-decode';
import * as decode from 'jwt-decode';
import { Link } from 'react-router-dom';

import moment from 'moment';
import { handleErrors } from '../utils/helpers';
import '../stylesheets/LessonCard.css';

// const { TextArea } = Input;
const LessonCard = props => {
const { isMentor, lessonDetails, deleteHandler, pool } = props;
const { id, title, summary, date } = lessonDetails; // get notes here

const [showModal, setShowModal] = useState(false);
// const [showNotesModal, setShowNotesModal] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);
// const [editedNotes, setEditedNotes] = useState(notes);
const [shownTitle, setShownTitle] = useState(title);
const [shownSummary, setShownSummary] = useState(summary);
const [shownDate, setShownDate] = useState(date);
const [editedTitle, setEditedTitle] = useState(title);
const [editedSummary, setEditedSummary] = useState(summary);
const [editedDate, setEditedDate] = useState(date);

const deleteLesson = () => {
setShowModal(false);
deleteHandler(lessonDetails);
};

// const onChangeNotes = event => {
// setEditedNotes(event.target.value);
// };

const onChangeTitle = event => {
setEditedTitle(event.target.value);
};
Expand All @@ -36,38 +34,9 @@ const LessonCard = props => {
setEditedSummary(event.target.value);
};

// editLesson() {
// const tok = localStorage.getItem('anovaToken');
// const dTok = decode(tok);
// let userId;
// userId = dTok.id;
// const { editedNotes, lessonId } = this.state;
// if (editedNotes.length >= 255) {
// Modal.error({
// title: 'Exceeded maximum number of characters (255).',
// centered: true,
// });
// return;
// }
// fetch('/api/v1/lesson_site/update', {
// method: 'POST',
// body: JSON.stringify({
// editedNotes,
// userId,
// lessonId,
// }),
// headers: new Headers({
// 'Content-Type': 'application/json',
// }),
// })
// .then(res => res.json())
// .then(values => {
// this.setState({
// showNotesModal: false,
// notes: editedNotes,
// });
// });
// }
const onChangeDate = date => {
setEditedDate(date);
};

const editLessonDetails = () => {
if (editedSummary.length >= 255) {
Expand All @@ -88,54 +57,48 @@ const LessonCard = props => {
'Content-Type': 'application/json',
}),
})
.then(handleErrors)
.then(() => {
setShowEditModal(false);
setShownTitle(editedTitle);
setShownSummary(editedSummary);
})
.catch(err => {
.catch(() => {
Modal.error({
title: 'Unable to update lesson.',
title: 'Unable to update lesson details.',
centered: true,
});
});
};

// renderNotesButton() {
// const { isMentor } = this.state;
// const { showNotesModal, notes } = this.state;
// let notesButton;
// if (isMentor) {
// notesButton = (
// <div>
// <Button type="primary" onClick={() => this.setState({ showNotesModal: true })}>
// Notes
// </Button>
// <Modal
// visible={showNotesModal}
// title="Lesson Notes:"
// okText="Update"
// onCancel={() => this.setState({ showNotesModal: false })}
// onOk={this.editLesson}
// >
// <Row>
// <Col>
// <TextArea
// rows={4}
// id="notes"
// addonBefore="Notes:"
// autosize="true"
// defaultValue={notes}
// onChange={this.onChangeNotes}
// />
// </Col>
// </Row>
// </Modal>
// </div>
// );
// }
// return notesButton;
// }
if (!pool) {
const tok = localStorage.getItem('anovaToken');
const dTok = decode(tok);
let userId;
userId = dTok.id;

fetch('/api/v1/lesson_site/update', {
method: 'POST',
body: JSON.stringify({
editedDate,
userId,
id,
}),
headers: new Headers({
'Content-Type': 'application/json',
}),
})
.then(handleErrors)
.then(() => {
setShowEditModal(false);
setShownDate(editedDate);
})
.catch(() => {
Modal.error({
title: 'Unable to update lesson date.',
centered: true,
});
});
}
};

const renderEditButton = () => {
let editButton;
Expand All @@ -158,29 +121,30 @@ const LessonCard = props => {
>
<div className="addFields">
<Row>
<Col>
<Input
id="titleAdd"
allowClear
addonBefore="Title:"
autosize="true"
defaultValue={title}
onChange={onChangeTitle}
/>
</Col>
<Input
id="titleAdd"
allowClear
addonBefore="Title:"
autosize="true"
defaultValue={title}
onChange={onChangeTitle}
/>
</Row>
<Row>
<Col>
<Input
id="summaryAdd"
allowClear
addonBefore="Summary:"
autosize="true"
defaultValue={summary}
onChange={onChangeSummary}
/>
</Col>
<Input
id="summaryAdd"
allowClear
addonBefore="Summary:"
autosize="true"
defaultValue={summary}
onChange={onChangeSummary}
/>
</Row>
{!pool && (
<Row>
<DatePicker defaultValue={moment(date)} onChange={onChangeDate} />
</Row>
)}
</div>
</Modal>
</>
Expand All @@ -189,16 +153,9 @@ const LessonCard = props => {
return editButton;
};

// let maybeNotesButton;
let maybeEditButton;
if (!pool) {
// maybeNotesButton = this.renderNotesButton();
} else {
maybeEditButton = renderEditButton();
}
let readableDate = '';
if (date && !pool) {
readableDate = new Date(date).toLocaleDateString();
if (shownDate && !pool) {
readableDate = new Date(shownDate).toLocaleDateString();
}
let maybeDeleteButton;
if (isMentor) {
Expand Down Expand Up @@ -228,7 +185,7 @@ const LessonCard = props => {
<div className="description">{shownSummary}</div>
</div>
<div className="buttonContainer">
{maybeEditButton}
{renderEditButton()}
<Link to={'/LessonPage/' + id}>
<button className="lowerButton">View Assignment</button>
</Link>
Expand Down
33 changes: 22 additions & 11 deletions client/src/components/LessonPool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,28 @@ import { Modal, Input, Row, Col } from 'antd';
import { GoPlus } from 'react-icons/go';
import '../stylesheets/LessonPool.css';
import LessonCard from './LessonCard';
import { handleErrors } from '../utils/helpers';

const LessonPool = props => {
const { ismentor } = props;

const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [showModal, setShowModal] = useState(false);
const [allLessons, setAllLessons] = useState([]);

useEffect(() => {
fetch('/api/v1/lessons/all')
.then(res => res.json())
.then(handleErrors)
.then(allLessons => {
setAllLessons(allLessons);
setIsLoaded(true);
})
.catch(err => {
setError('Unable to fetch lessons.');
});
.catch(() =>
Modal.error({
title: 'Unable to fetch lessons.',
centered: true,
}),
);
}, []);

const deleteHandler = lessonDetails => {
Expand All @@ -32,11 +35,17 @@ const LessonPool = props => {
'Content-Type': 'application/json',
}),
})
.then(handleErrors)
.then(() => {
const newAllLessons = allLessons.filter(item => item.id !== lessonDetails.id);
setAllLessons(newAllLessons);
})
.catch(err => setError('Unable to delete lesson.'));
.catch(() =>
Modal.error({
title: 'Unable to delete lesson.',
centered: true,
}),
);
};

const addLessonToPool = () => {
Expand All @@ -60,19 +69,21 @@ const LessonPool = props => {
'Content-Type': 'application/json',
}),
})
.then(res => res.json())
.then(handleErrors)
.then(newLessonInfo => {
item['id'] = newLessonInfo.id;
setAllLessons([...allLessons, item]);
setShowModal(false);
})
.catch(err => setError('Unable to add lesson.'));
.catch(() =>
Modal.error({
title: 'Unable to add lesson.',
centered: true,
}),
);
}
};

if (error) {
return <div>Error:{error.message}</div>;
}
if (!isLoaded) {
return <div>Loading...</div>;
}
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ const Login = props => {
});
};

useEffect(() => {
console.log(localStorage);
}, []);

const onFailure = res => {
console.log('Login failed: res:', res);
};
Expand Down
Loading

0 comments on commit 63dce42

Please sign in to comment.