Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[cleanup] Bump dependency version and fix new linter errors #267

Merged
merged 1 commit into from Aug 29, 2019
Merged

[cleanup] Bump dependency version and fix new linter errors #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 6 additions & 1 deletion frontend/.eslintrc
View file
Open in desktop
Expand Up @@ -17,12 +17,17 @@
"ExportDeclaration": { "minProperties": 10, "multiline": true, "consistent": true }
}
],
"react/prop-types": "off",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have TS. This is unnecessary

"react/jsx-props-no-spreading": "warn",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it may become harmful in the future due to this React commit and we eventually want to fix it. Therefore, I change the level to warning.

"react/jsx-filename-extension": ["error", { "extensions": [".jsx", ".tsx"] }],
"import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"],
"react/state-in-constructor": "off",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't work well with

class A extends React.Component {
  state =  { foo: 'bar' };
}

"import/extensions": "off",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't like json extension

"indent": "off",
"@typescript-eslint/ban-ts-ignore": "warn",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to have warnings so we can fix it eventually.

"@typescript-eslint/indent": ["error", 2],
"@typescript-eslint/prefer-interface": "off",
"@typescript-eslint/explicit-function-return-type": ["error", { "allowExpressions": true }],
"@typescript-eslint/no-angle-bracket-type-assertion": "off",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deprecated in @typescript-eslint v2. Have to keep it and set to off since create-react-app still uses V1. There is a pull request that tries to fix it: facebook/create-react-app#7540

"@typescript-eslint/no-unused-vars": [
"error",
{ "vars": "all", "args": "after-used", "ignoreRestSiblings": true }
Expand Down
70 changes: 35 additions & 35 deletions frontend/package.json
View file
Open in desktop
Expand Up @@ -13,51 +13,51 @@
"check-all": "yarn tsc && yarn lint && yarn test"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"firebase": "^5.11.1",
"firebase": "^6.4.2",
"immutable": "^4.0.0-rc.12",
"react": "^16.8.6",
"react-beautiful-dnd": "^11.0.2",
"react-calendar": "^2.18.1",
"react": "^16.9.0",
"react-beautiful-dnd": "^11.0.5",
"react-calendar": "^2.19.1",
"react-color": "^2.17.3",
"react-dev-utils": "^9.0.0",
"react-dom": "^16.8.6",
"react-dom-confetti": "^0.1.0",
"react-firebaseui": "^3.1.2",
"react-ga": "^2.5.7",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-dom-confetti": "^0.1.1",
"react-firebaseui": "^4.0.0",
"react-ga": "^2.6.0",
"react-live-clock": "^3.1.0",
"react-modal": "^3.8.1",
"react-redux": "^7.0.3",
"react-modal": "^3.10.1",
"react-redux": "^7.1.1",
"react-search-box": "^2.0.1",
"react-toastify": "^5.1.0",
"redux": "^4.0.1",
"react-toastify": "^5.3.2",
"redux": "^4.0.4",
"reselect": "^4.0.0"
},
"devDependencies": {
"@types/jest": "^24.0.12",
"@types/node": "^11.13.9",
"@types/react": "^16.8.15",
"@types/react-beautiful-dnd": "^11.0.1",
"@types/react-color": "^3.0.0",
"@types/react-dom": "^16.8.4",
"@types/jest": "^24.0.18",
"@types/node": "^12.7.2",
"@types/react": "^16.9.2",
"@types/react-beautiful-dnd": "^11.0.3",
"@types/react-color": "^3.0.1",
"@types/react-dom": "^16.9.0",
"@types/react-modal": "^3.8.2",
"@types/react-redux": "^7.0.8",
"@typescript-eslint/eslint-plugin": "^1.7.0",
"@typescript-eslint/parser": "^1.6.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-react-app": "^4.0.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jest": "^22.5.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"firebase-tools": "^6.8.0",
"@types/react-redux": "^7.1.2",
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"eslint": "^6.2.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-react-app": "^5.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.15.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"firebase-tools": "^7.3.0",
"node-sass": "^4.12.0",
"react-scripts": "^3.0.0",
"svgo": "^1.2.2",
"typescript": "^3.4.5"
"react-scripts": "^3.1.1",
"svgo": "^1.3.0",
"typescript": "^3.6.2"
},
"browserslist": {
"production": [
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/TaskCreator/index.tsx
View file
Open in desktop
Expand Up @@ -54,6 +54,8 @@ const initialState = (): State => ({
export default class TaskCreator extends React.PureComponent<{}, State> {
public readonly state: State = initialState();

private addTask: HTMLInputElement | null | undefined;

/*
* --------------------------------------------------------------------------------
* Part 1: Openers & Closers
Expand Down Expand Up @@ -117,7 +119,7 @@ export default class TaskCreator extends React.PureComponent<{}, State> {
return;
}
const newSubTasks = subTasks
.filter(subTask => subTask.name !== '') // remove empty subtasks
.filter((subTask) => subTask.name !== '') // remove empty subtasks
// normalize orders: use current sequence as order;; remove useless id
.map(({ id, ...rest }, order) => ({ ...rest, order }));
const autoInFocus = inFocus || isToday(date); // Put task in focus is the due date is today.
Expand Down Expand Up @@ -274,7 +276,7 @@ export default class TaskCreator extends React.PureComponent<{}, State> {
private editSubTask = (subTaskId: string) => (e: SyntheticEvent<HTMLInputElement>) => {
const name = e.currentTarget.value;
this.setState(({ subTasks }: State) => ({
subTasks: subTasks.map(s => (s.id === subTaskId ? { ...s, name } : s)),
subTasks: subTasks.map((s) => (s.id === subTaskId ? { ...s, name } : s)),
}));
};

Expand All @@ -298,7 +300,7 @@ export default class TaskCreator extends React.PureComponent<{}, State> {
private deleteSubTask = (subtaskId: string) => (e: SyntheticEvent<HTMLButtonElement>) => {
e.preventDefault();
this.setState(({ subTasks }: State) => ({
subTasks: subTasks.filter(s => s.id !== subtaskId),
subTasks: subTasks.filter((s) => s.id !== subtaskId),
}));
};

Expand All @@ -307,8 +309,6 @@ export default class TaskCreator extends React.PureComponent<{}, State> {
*/
private resetTask = () => this.setState({ ...initialState() }, this.focusTaskName);

private addTask: HTMLInputElement | null | undefined;

/**
* Renders the editor for all the other info except main task name.
*
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TaskView/FocusView/FocusTask.tsx
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@ function FocusTask({ id, order, filterCompleted, original, filtered }: Props): R
}
return (
<Draggable draggableId={`${id}-${filterCompleted}`} index={order}>
{provided => (
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<InlineTaskEditor
className={styles.FocusTask}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/TaskView/FocusView/index.tsx
View file
Open in desktop
Expand Up @@ -88,7 +88,7 @@ function FocusView({ tasks, progress }: FocusViewProps): ReactElement {
}
return { ...t, inCompleteFocusView: true };
};
setLocalTasks(prevTasks => prevTasks.map(taskReplacer));
setLocalTasks((prevTasks) => prevTasks.map(taskReplacer));
completeTaskInFocus(completedTaskIdOrder, localCompletedList);
} else if (
source.droppableId === focusViewCompletedDroppableId
Expand All @@ -101,7 +101,7 @@ function FocusView({ tasks, progress }: FocusViewProps): ReactElement {
}
};

const onDoesShowCompletedTasksChange = (): void => setDoesShowCompletedTasks(prev => !prev);
const onDoesShowCompletedTasksChange = (): void => setDoesShowCompletedTasks((prev) => !prev);

return (
<div className={styles.FocusView}>
Expand All @@ -113,15 +113,15 @@ function FocusView({ tasks, progress }: FocusViewProps): ReactElement {
<div className={styles.FocusTaskContainer}>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={focusViewNotCompletedDroppableId}>
{provided => (
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{renderTaskList(localUncompletedList, false)}
{provided.placeholder}
</div>
)}
</Droppable>
<Droppable droppableId={focusViewCompletedDroppableId}>
{provided => (
{(provided) => (
<div
ref={provided.innerRef}
className={styles.Droppable}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TaskView/FutureView/FutureViewControl.tsx
View file
Open in desktop
Expand Up @@ -213,7 +213,7 @@ function DisplayOptionControl({ nDays, displayOption, offset, onChange }: Props)
);
};
return (
<React.Fragment>
<>
<SquareIconToggle
active={doesShowCompletedTasks}
iconNames={[faEyeSlash, faEye]}
Expand All @@ -224,7 +224,7 @@ function DisplayOptionControl({ nDays, displayOption, offset, onChange }: Props)
{renderContainerTypeSwitcherButton('BIWEEKLY', '2W')}
{renderContainerTypeSwitcherButton('MONTHLY', 'M')}
</div>
</React.Fragment>
</>
);
}

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/TaskView/FutureView/FutureViewTask.tsx
View file
Open in desktop
Expand Up @@ -100,7 +100,7 @@ function FutureViewTask(
);
};

const renderMainTaskInfo = (simplified: boolean = false): ReactElement => {
const renderMainTaskInfo = (simplified = false): ReactElement => {
if (simplified && isInMainList) {
const style = { backgroundColor: color, height: '25px' };
return <div className={styles.TaskMainWrapper} style={style} />;
Expand All @@ -115,7 +115,7 @@ function FutureViewTask(
);
};

const renderSubTasks = (): ReactNode => filteredSubTasks.map(s => (
const renderSubTasks = (): ReactNode => filteredSubTasks.map((s) => (
<FutureViewSubTask
key={s.id}
subTask={s}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/TaskView/index.tsx
View file
Open in desktop
Expand Up @@ -15,9 +15,9 @@ export default function TaskView(): ReactElement {
const [doesShowFutureViewInSmallScreen, setDoesShowFutureViewInSmallScreen] = useState(false);
const [config, setConfig] = useState<FutureViewConfig>(futureViewConfigProvider.initialValue);

const screenIsSmall = useMappedWindowSize(size => size.width <= 840);
const toggleFocusViewInWideScreen = (): void => setDoesShowFocusViewInWideScreen(prev => !prev);
const switchView = (): void => setDoesShowFutureViewInSmallScreen(prev => !prev);
const screenIsSmall = useMappedWindowSize((size) => size.width <= 840);
const toggleFocusViewInWideScreen = (): void => setDoesShowFocusViewInWideScreen((prev) => !prev);
const switchView = (): void => setDoesShowFutureViewInSmallScreen((prev) => !prev);

const FuturePanel = ({ children }: { readonly children?: ReactNode }): ReactElement => {
const onChange = (c: FutureViewConfig): void => { setConfig(c); };
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/TitleBar/Onboarding/Onboard.tsx
View file
Open in desktop
Expand Up @@ -76,7 +76,7 @@ function AddClassOnBoarding({ classTags, showNext }: AddClassProps): ReactElemen
<div className={styles.SettingsSection}>
<div className={styles.SettingsSectionContent}>
<ul className={styles.ColorConfigItemList}>
{classTags.map(tag => <TagItem key={tag.id} tag={tag} />)}
{classTags.map((tag) => <TagItem key={tag.id} tag={tag} />)}
</ul>
</div>
</div>
Expand Down Expand Up @@ -150,14 +150,14 @@ function Onboard({ classTags, completedOnboarding }: Props): ReactElement | null
return null;
}

const showNext = (): void => setProgress(prev => prev + 1);
const showNext = (): void => setProgress((prev) => prev + 1);
const showNextImport = (shouldImport: boolean): void => {
if (shouldImport) {
importCourseExams();
}
showNext();
};
const goBack = (): void => setProgress(prev => (prev > 1 ? prev - 1 : prev));
const goBack = (): void => setProgress((prev) => (prev > 1 ? prev - 1 : prev));
const skipTutorial = (): void => setProgress(100);

const onboardingContainerStyle: CSSProperties | undefined = progress > 0
Expand All @@ -180,7 +180,7 @@ function Onboard({ classTags, completedOnboarding }: Props): ReactElement | null

const Connected = connect(
({ tags, settings: { completedOnboarding } }: State): Props => {
const classTags: Tag[] = Array.from(tags.values()).filter(t => t.classId != null);
const classTags: Tag[] = Array.from(tags.values()).filter((t) => t.classId != null);
return { classTags, completedOnboarding };
},
)(Onboard);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/TitleBar/Tags/ClassTagAdder.tsx
View file
Open in desktop
Expand Up @@ -73,7 +73,7 @@ function ClassTagAdder({ courses }: Props): ReactElement | null {
name: value, color: getUnusedColor(), classId,
});
// force the react search box to rerender due to its bug.
setKey(prev => prev + 1);
setKey((prev) => prev + 1);
};
return (
<div className={`${styles.TagColorConfigItemAdder} ${styles.SearchClasses}`} title="Search for a class">
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/TitleBar/Tags/ColorEditor.tsx
View file
Open in desktop
Expand Up @@ -14,14 +14,14 @@ const colArray: string[] = Object.keys(colMap);
export default function ColorEditor({ color, onChange }: Props): ReactElement {
const [doesShowEditor, setDoesShowEditor] = React.useState(false);

const toggleEditor = (): void => setDoesShowEditor(s => !s);
const toggleEditor = (): void => setDoesShowEditor((s) => !s);
const onChangeComplete = (e: { hex: string }): void => {
onChange(e.hex);
setDoesShowEditor(false);
};

return (
<React.Fragment>
<>
<button type="button" className={styles.ColorEdit} onClick={toggleEditor} tabIndex={0}>
{colMap[color.toLowerCase()]}
<span className={styles.ColorDisplay} style={{ backgroundColor: color }} />
Expand All @@ -37,6 +37,6 @@ export default function ColorEditor({ color, onChange }: Props): ReactElement {
/>
</div>
)}
</React.Fragment>
</>
);
}
4 changes: 2 additions & 2 deletions frontend/src/components/TitleBar/Tags/rotation-color-picker.ts
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ const allAvailableColors = Object.keys(colorMap);

export default function getUnusedColor(): string {
const { tags } = store.getState();
const usedColorSet = new Set(Array.from(tags.values()).map(t => t.color));
const color = allAvailableColors.find(c => !usedColorSet.has(c));
const usedColorSet = new Set(Array.from(tags.values()).map((t) => t.color));
const color = allAvailableColors.find((c) => !usedColorSet.has(c));
return color == null ? allAvailableColors[0] : color;
}
2 changes: 1 addition & 1 deletion frontend/src/components/UI/CheckBox.test.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,7 @@ it('CheckBox can render', () => {

function StatefulCheckBox({ disabled }: { readonly disabled: boolean }): ReactElement {
const [checked, setChecked] = useState(false);
const onChange = (): void => setChecked(prev => !prev);
const onChange = (): void => setChecked((prev) => !prev);
return (
<CheckBox checked={checked} onChange={onChange} disabled={disabled} />
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/UI/samwise-icon-types.tsx
View file
Open in desktop
@@ -1,4 +1,4 @@
// eslint-disable-next-line import/prefer-default-export, reason: cannot export default type
// eslint-disable-next-line import/prefer-default-export
export type IconName =
| 'alert'
| 'calendar-dark'
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/Util/AppInit/LoginBarrier.tsx
View file
Open in desktop
Expand Up @@ -76,10 +76,10 @@ export default function LoginBarrier({ appRenderer }: Props): ReactElement {
}
const loadingOrLogin = loginStatus === false
? (
<React.Fragment>
<>
<FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<div className={styles.LoginPadding} />
</React.Fragment>
</>
)
: (<h3>Loading...</h3>);
return (
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/Util/ErrorBoundary/index.tsx
View file
Open in desktop
Expand Up @@ -12,13 +12,13 @@ export default class ErrorBoundary extends React.PureComponent<Props, State> {
return { hasError: true };
}

private ignoreError = (): void => this.setState({ hasError: false });

public componentDidCatch(error: Error | null, info: object): void {
// eslint-disable-next-line no-console
console.log({ error, info }); // necessary for error logging!
}

private ignoreError = (): void => this.setState({ hasError: false });

public render(): ReactElement {
const { children } = this.props;
const { hasError } = this.state;
Expand Down Expand Up @@ -54,7 +54,7 @@ export default class ErrorBoundary extends React.PureComponent<Props, State> {
style={{ color: 'white', textDecoration: 'underline' }}
href="https://goo.gl/forms/PZUZ1Ze6kN82EmcD2"
>
Send Feedback
Send Feedback
</a>
</p>
<button type="button" onClick={this.ignoreError}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Util/Modals/ChoiceModal.tsx
View file
Open in desktop
Expand Up @@ -41,7 +41,7 @@ export default function ChoiceModal<Choices extends ChoiceObj>(
<div className={styles.TextContainer}>{message}</div>
<div className={styles.ButtonContainer}>
<span className={styles.Filler} />
{Object.keys(choices).map(key => (
{Object.keys(choices).map((key) => (
<button
key={key}
type="button"
Expand Down