Give appropriate cursors to sortable table headers

package.json

@@ -1,61 +1,54 @@
 {
  "name": "la-feedback-system",
- "version": "2.0.2",
+ "version": "2.0.3",
  "private": true,
  "license": "Apache-2.0",
  "description": "A website to gather feedback from students after interactions with LAs",
  "homepage": ".",
  "dependencies": {
- "bootstrap": "^4.5.2",
- "easymde": "^2.11.0",
- "react": "^16.13.1",
- "react-bootstrap": "^1.3.0",
+ "bootstrap": "^4.6.0",
+ "react": "^17.0.1",
+ "react-bootstrap": "^1.5.0",
  "react-bootstrap-typeahead": "^5.1.4",
- "react-dom": "^16.13.1",
+ "react-dom": "^17.0.1",
  "react-markdown": "^4.3.1",
- "react-modal": "^3.11.2",
- "react-scripts": "^3.4.3",
- "react-simplemde-editor": "^4.1.3",
+ "react-modal": "^3.12.1",
  "zustand": "^2.2.3"
  },
  "devDependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
- "@types/node": "^12.12.47",
- "@types/nodemailer": "^6.4.0",
- "@types/nodemailer-smtp-transport": "^2.7.4",
- "@types/react": "^16.9.41",
+ "@types/node": "^14.14.28",
+ "@types/react": "^17.0.1",
  "@types/react-bootstrap": "^1.0.1",
- "@types/react-bootstrap-typeahead": "^5.1.1",
- "@types/react-dom": "^16.9.8",
- "@types/react-modal": "^3.10.6",
- "@types/react-transition-group": "^4.4.0",
- "@types/webpack": "^4.41.21",
- "@types/webpack-dev-server": "^3.11.0",
+ "@types/react-bootstrap-typeahead": "^5.1.2",
+ "@types/react-dom": "^17.0.1",
+ "@types/react-modal": "^3.12.0",
+ "@types/webpack": "^4.41.26",
+ "@types/webpack-dev-server": "^3.11.1",
  "@typescript-eslint/eslint-plugin": "^2.34.0",
  "@typescript-eslint/parser": "^2.34.0",
- "css-loader": "^4.2.1",
- "eslint": "^6.8.0",
- "eslint-config-airbnb": "^18.2.0",
- "eslint-config-prettier": "^6.11.0",
- "eslint-import-resolver-typescript": "^2.2.0",
+ "css-loader": "^4.3.0",
+ "eslint": "^7.20.0",
+ "eslint-config-airbnb": "^18.2.1",
+ "eslint-config-prettier": "^7.2.0",
+ "eslint-import-resolver-typescript": "^2.4.0",
  "eslint-plugin-button-label-required": "^1.0.1",
- "eslint-plugin-import": "^2.22.0",
- "eslint-plugin-jsx-a11y": "^6.3.1",
- "eslint-plugin-prettier": "^3.1.4",
- "eslint-plugin-react": "^7.20.3",
+ "eslint-plugin-import": "^2.22.1",
+ "eslint-plugin-jsx-a11y": "^6.4.1",
+ "eslint-plugin-prettier": "^3.3.1",
+ "eslint-plugin-react": "^7.22.0",
  "eslint-plugin-react-hooks": "^2.5.1",
- "eslint-plugin-typescript-sort-keys": "^1.3.0",
- "prettier": "^2.0.5",
- "prettier-eslint": "^11.0.0",
- "react-app-rewired": "^2.1.6",
- "ts-loader": "^8.0.2",
+ "eslint-plugin-typescript-sort-keys": "^1.5.0",
+ "prettier": "^2.2.1",
+ "prettier-eslint": "^12.0.0",
+ "ts-loader": "^8.0.17",
  "ts-node": "^8.10.2",
  "tsconfig-paths-webpack-plugin": "^3.3.0",
- "typescript": "^3.9.7",
- "webpack": "^4.44.2",
- "webpack-cli": "^3.3.12"
+ "typescript": "^4.1.5",
+ "webpack": "^4.46.0",
+ "webpack-cli": "^4.5.0"
  },
  "scripts": {
  "start": "react-scripts start",

src/CHANGELOG.json

@@ -1,5 +1,6 @@
 {
  "changes": [
+ "## 2.0.3\n- Add appropriate cursors to sortable table headers",
  "## 2.0.2\n- Shows the number of interactions with each student to the expended interaction section\n- Adds weekly interactions to the admin table",
  "## 2.0.1\n- Change session interaction count button style and disable requirements\n- Fix un-removable student bug\n- Clear students on course selection change",
  "## 2.0.0\n- Auto-suggest students registered in the course\n- Use a typeahead input field for students\n- Prevent logging student interactions with a student that doesn't exist.",

src/components/AnnouncementEditor.tsx

@@ -1,7 +1,5 @@
 import React, { ChangeEvent, useCallback, useState } from 'react';
 
-import SimpleMDE from 'react-simplemde-editor';
-
 import ReactMarkdown from 'react-markdown';
 
 import Alert from 'react-bootstrap/Alert';
@@ -21,6 +19,8 @@ import Redux, { AppReduxState } from 'redux/modules';
 
 const ALL_COURSE_OPTION = 'all';
 
+const CONTENT_ID = 'AnnouncementContentEditorTextArea';
+
 const COURSE_ID = 'AnnouncementCourseSelectionDropdown';
 const COURSE_LABEL = 'Course';
 
@@ -46,10 +46,17 @@ const AnnouncementEditor = () => {
  const [heading, setHeading] = useState<string | null>(null);
 
  const handleChange = useCallback(
- (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+ (
+ event: ChangeEvent<
+ HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+ >
+ ) => {
  setHeading(null);
  const { id, value } = event.target;
  switch (id) {
+ case CONTENT_ID:
+ setCurrentBody(value);
+ break;
  case CLASS_ID:
  setAlertType(value === 'choose' ? null : (value as ResponseClass));
  break;
@@ -89,28 +96,7 @@ const AnnouncementEditor = () => {
  </Alert>
  </Collapse>
 
- <SimpleMDE
- onChange={setCurrentBody}
- options={{
- toolbar: [
- 'bold',
- 'italic',
- 'heading',
- '|',
- 'code',
- 'quote',
- 'ordered-list',
- 'unordered-list',
- '|',
- 'link',
- 'image',
- 'table',
- 'horizontal-rule',
- '|',
- 'guide',
- ],
- }}
- />
+ <textarea id={CONTENT_ID} onChange={handleChange} value={currentBody} />
  <FormGroup as={Row} controlId={COURSE_ID}>
  <Form.Label className="col-sm-5">{COURSE_LABEL}</Form.Label>
  <div className="col-sm-7">

src/components/BreakdownTable.tsx

@@ -123,18 +123,34 @@ const BreakdownTable = ({ style }: Props) => {
  <Table hover style={{ width: '100%', cursor: 'default' }}>
  <thead className="thead-dark">
  <tr>
- <th id={NAME_ID} onClick={handleSortClick}>
+ <th
+ id={NAME_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Name ${column === NAME_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
- <th id={COURSE_ID} onClick={handleSortClick}>
+ <th
+ id={COURSE_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
- <th id={COUNT_ID} onClick={handleSortClick}>
+ <th
+ id={COUNT_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Interactions ${
  column === COUNT_ID ? SORT_CHARS.get(order) : ' '
  }`}
  </th>
- <th id={WEEK_COUNT_ID} onClick={handleSortClick}>
+ <th
+ id={WEEK_COUNT_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Interactions (Last 7 Days) ${
  column === WEEK_COUNT_ID ? SORT_CHARS.get(order) : ' '
  }`}

src/components/CountsTable.tsx

@@ -100,10 +100,18 @@ const CountsTable = () => {
  <Table hover style={{ width: '100%', cursor: 'default' }}>
  <thead className="thead-dark">
  <tr>
- <th id={COURSE_ID} onClick={handleSortClick}>
+ <th
+ id={COURSE_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
- <th id={COUNT_ID} onClick={handleSortClick}>
+ <th
+ id={COUNT_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Interactions ${
  column === COUNT_ID ? SORT_CHARS.get(order) : ' '
  }`}

src/components/LADetailTable.tsx

@@ -126,23 +126,39 @@ const LADetailTable = () => {
  <Table hover style={{ width: '100%', cursor: 'default' }}>
  <thead className="thead-dark">
  <tr>
- <th id={RATING_ID} onClick={handleSortClick}>
+ <th
+ id={RATING_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Rating (Avg: ${avg.toFixed(2)}) ${
  column === RATING_ID ? SORT_CHARS.get(order) : ' '
  }`}
  </th>
- <th id={TIME_ID} onClick={handleSortClick}>
+ <th
+ id={TIME_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Time of Interaction ${
  column === TIME_ID ? SORT_CHARS.get(order) : ' '
  }`}
  </th>
- <th id={SENTIMENT_ID} onClick={handleSortClick}>
+ <th
+ id={SENTIMENT_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Sentiment ${
  column === SENTIMENT_ID ? SORT_CHARS.get(order) : ' '
  }`}
  </th>
  {isMultiCourseLA && (
- <th id={COURSE_ID} onClick={handleSortClick}>
+ <th
+ id={COURSE_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
  )}

src/components/LASummaryTable.tsx

@@ -180,16 +180,27 @@ const LASummaryTable = ({ showLA }: Props) => {
  <Table hover style={{ width: '100%', cursor: 'default' }} role="table">
  <thead className="thead-dark">
  <tr>
- <th role="columnheader" id={LA_ID} onClick={handleSortClick}>
+ <th
+ role="columnheader"
+ id={LA_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`LA ${column === LA_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
- <th role="columnheader" id={COURSE_ID} onClick={handleSortClick}>
+ <th
+ role="columnheader"
+ id={COURSE_ID}
+ onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
+ >
  {`Course ${column === COURSE_ID ? SORT_CHARS.get(order) : ' '}`}
  </th>
  <th
  role="columnheader"
  id={INTERACTION_COUNT_ID}
  onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
  >
  {`Interactions ${
  column === INTERACTION_COUNT_ID ? SORT_CHARS.get(order) : ' '
@@ -199,6 +210,7 @@ const LASummaryTable = ({ showLA }: Props) => {
  role="columnheader"
  id={WEEKLY_INTERACTION_COUNT_ID}
  onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
  >
  {`Weekly Interactions ${
  column === WEEKLY_INTERACTION_COUNT_ID
@@ -210,6 +222,7 @@ const LASummaryTable = ({ showLA }: Props) => {
  role="columnheader"
  id={AVERAGE_RATING_ID}
  onClick={handleSortClick}
+ style={{ cursor: 'pointer' }}
  >
  {`Average Rating ${
  column === AVERAGE_RATING_ID ? SORT_CHARS.get(order) : ' '