diff options
Diffstat (limited to 'src/client/util/reportManager/ReportManager.tsx')
| -rw-r--r-- | src/client/util/reportManager/ReportManager.tsx | 67 |
1 files changed, 38 insertions, 29 deletions
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx index 0c49aeed4..2224e642d 100644 --- a/src/client/util/reportManager/ReportManager.tsx +++ b/src/client/util/reportManager/ReportManager.tsx @@ -1,33 +1,39 @@ -import * as React from 'react'; -import * as uuid from 'uuid'; -import '.././SettingsManager.scss'; -import './ReportManager.scss'; -import ReactLoading from 'react-loading'; +/* eslint-disable jsx-a11y/label-has-associated-control */ +/* eslint-disable jsx-a11y/media-has-caption */ +/* eslint-disable react/no-unused-class-component-methods */ +import { Octokit } from '@octokit/core'; +import { Button, Dropdown, DropdownType, IconButton, Type } from 'browndash-components'; import { action, makeObservable, observable } from 'mobx'; -import { BsX, BsArrowsAngleExpand, BsArrowsAngleContract } from 'react-icons/bs'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { BsArrowsAngleContract, BsArrowsAngleExpand, BsX } from 'react-icons/bs'; import { CgClose } from 'react-icons/cg'; import { HiOutlineArrowLeft } from 'react-icons/hi'; -import { Issue } from './reportManagerSchema'; -import { observer } from 'mobx-react'; +import { MdRefresh } from 'react-icons/md'; +import ReactLoading from 'react-loading'; +import * as uuid from 'uuid'; +import { ClientUtils } from '../../../ClientUtils'; import { Doc } from '../../../fields/Doc'; -import { MainViewModal } from '../../views/MainViewModal'; -import { Octokit } from '@octokit/core'; -import { Button, Dropdown, DropdownType, IconButton, Type } from 'browndash-components'; -import { BugType, FileData, Priority, ReportForm, ViewState, bugDropdownItems, darkColors, emptyReportForm, formatTitle, getAllIssues, isDarkMode, lightColors, passesTagFilter, priorityDropdownItems, uploadFilesToServer } from './reportManagerUtils'; -import { Filter, FormInput, FormTextArea, IssueCard, IssueView, Tag } from './ReportManagerComponents'; import { StrCast } from '../../../fields/Types'; -import { MdRefresh } from 'react-icons/md'; +import { MainViewModal } from '../../views/MainViewModal'; +import '../SettingsManager.scss'; import { SettingsManager } from '../SettingsManager'; +import './ReportManager.scss'; +import { Filter, FormInput, FormTextArea, IssueCard, IssueView } from './ReportManagerComponents'; +import { Issue } from './reportManagerSchema'; +import { BugType, FileData, Priority, ReportForm, ViewState, bugDropdownItems, darkColors, emptyReportForm, formatTitle, getAllIssues, isDarkMode, lightColors, passesTagFilter, priorityDropdownItems, uploadFilesToServer } from './reportManagerUtils'; /** * Class for reporting and viewing Github issues within the app. */ @observer export class ReportManager extends React.Component<{}> { + // eslint-disable-next-line no-use-before-define public static Instance: ReportManager; @observable private isOpen = false; @observable private query = ''; + // eslint-disable-next-line react/sort-comp @action private setQuery = (q: string) => { this.query = q; }; @@ -82,7 +88,9 @@ export class ReportManager extends React.Component<{}> { this.formData = newData; }); - public close = action(() => (this.isOpen = false)); + public close = action(() => { + this.isOpen = false; + }); public open = action(async () => { this.isOpen = true; if (this.shownIssues.length === 0) { @@ -133,7 +141,7 @@ export class ReportManager extends React.Component<{}> { const req = await this.octokit.request('POST /repos/{owner}/{repo}/issues', { owner: 'brown-dash', repo: 'Dash-Web', - title: formatTitle(this.formData.title, Doc.CurrentUserEmail), + title: formatTitle(this.formData.title, ClientUtils.CurrentUserEmail()), body: `${this.formData.description} ${formattedLinks.length > 0 ? `\n\nFiles:\n${formattedLinks.join('\n')}` : ''}`, labels: ['from-dash-app', this.formData.type, this.formData.priority], }); @@ -164,7 +172,7 @@ export class ReportManager extends React.Component<{}> { * @returns JSX element of a piece of media (image, video, audio) */ private getMediaPreview = (fileData: FileData): JSX.Element => { - const file = fileData.file; + const { file } = fileData; const mimeType = file.type; const preview = URL.createObjectURL(file); @@ -179,7 +187,8 @@ export class ReportManager extends React.Component<{}> { </div> </div> ); - } else if (mimeType.startsWith('video/')) { + } + if (mimeType.startsWith('video/')) { return ( <div key={fileData._id} className="report-media-wrapper"> <div className="report-media-content"> @@ -193,7 +202,8 @@ export class ReportManager extends React.Component<{}> { </div> </div> ); - } else if (mimeType.startsWith('audio/')) { + } + if (mimeType.startsWith('audio/')) { return ( <div key={fileData._id} className="report-audio-wrapper"> <audio src={preview} controls /> @@ -203,7 +213,7 @@ export class ReportManager extends React.Component<{}> { </div> ); } - return <></>; + return <div />; }; /** @@ -306,8 +316,8 @@ export class ReportManager extends React.Component<{}> { <div className="report-selects"> <Dropdown color={StrCast(Doc.UserDoc().userColor)} - formLabel={'Type'} - closeOnSelect={true} + formLabel="Type" + closeOnSelect items={bugDropdownItems} selectedVal={this.formData.type} setSelectedVal={val => { @@ -319,8 +329,8 @@ export class ReportManager extends React.Component<{}> { /> <Dropdown color={StrCast(Doc.UserDoc().userColor)} - formLabel={'Priority'} - closeOnSelect={true} + formLabel="Priority" + closeOnSelect items={priorityDropdownItems} selectedVal={this.formData.priority} setSelectedVal={val => { @@ -346,7 +356,7 @@ export class ReportManager extends React.Component<{}> { text="Submit" type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} - icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />} + icon={<ReactLoading type="spin" color="#ffffff" width={20} height={20} />} iconPlacement="right" onClick={() => { this.reportIssue(); @@ -363,7 +373,7 @@ export class ReportManager extends React.Component<{}> { /> )} <div style={{ position: 'absolute', top: '4px', right: '4px' }}> - <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} /> + <IconButton color={StrCast(Doc.UserDoc().userColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} /> </div> </div> ); @@ -375,9 +385,8 @@ export class ReportManager extends React.Component<{}> { private reportComponent = () => { if (this.viewState === ViewState.VIEW) { return this.viewIssuesComponent(); - } else { - return this.reportIssueComponent(); } + return this.reportIssueComponent(); }; render() { @@ -385,7 +394,7 @@ export class ReportManager extends React.Component<{}> { <MainViewModal contents={this.reportComponent()} isDisplayed={this.isOpen} - interactive={true} + interactive closeOnExternalClick={this.close} dialogueBoxStyle={{ width: 'auto', minWidth: '300px', height: '85vh', maxHeight: '90vh', background: StrCast(Doc.UserDoc().userBackgroundColor), borderRadius: '8px' }} /> |