aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/reportManager/ReportManager.tsx106
-rw-r--r--src/client/util/reportManager/ReportManagerComponents.tsx19
2 files changed, 78 insertions, 47 deletions
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index d091e2a34..7d2d8d277 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -12,14 +12,13 @@ import { Doc } from '../../../fields/Doc';
import { Networking } from '../../Network';
import { MainViewModal } from '../../views/MainViewModal';
import { Octokit } from '@octokit/core';
-import { Button, IconButton, Tooltip } from '@mui/material';
+import { Button, IconButton, OrientationType, Type } from 'browndash-components';
import Dropzone from 'react-dropzone';
import { theme } from '../../theme';
import ReactLoading from 'react-loading';
import v4 = require('uuid/v4');
import { BugType, FileData, Priority, ViewState, inactiveBorderColor, inactiveColor } from './reportManagerUtils';
import { IssueCard, IssueView, Tag } from './ReportManagerComponents';
-// import { IconButton } from 'browndash-components';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -113,7 +112,6 @@ export class ReportManager extends React.Component<{}> {
try {
// load in the issues if not already loaded
const issues = (await this.getAllIssues()) as Issue[];
- console.log(issues);
// filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
} catch (err) {
@@ -163,6 +161,23 @@ export class ReportManager extends React.Component<{}> {
}
this.setSubmitting(true);
+ const body = {
+ email: 'aaa@gmail.com',
+ password: '1234',
+ };
+
+ //s%3A7pO_IijgvVbSaI3m2Tn6un4oQPHQYTBe.CsIRpBpvzy1AXbyQNXDz%2FCpo4M9A47aw%2F%2BQbCp9lXmc
+
+ const res = await fetch('http://10.38.71.246:1050/headlesslogin', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ });
+
+ console.log(res);
+
const links = await this.uploadFilesToServer();
console.log(links);
if (!links) {
@@ -192,6 +207,16 @@ export class ReportManager extends React.Component<{}> {
this.setBugType('');
this.setBugPriority('');
this.setSubmitting(false);
+ this.setFetchingIssues(true);
+ try {
+ // load in the issues if not already loaded
+ const issues = (await this.getAllIssues()) as Issue[];
+ // filtering to include only open issues and exclude pull requests, maybe add a separate tab for pr's?
+ this.setShownIssues(issues.filter(issue => issue.state === 'open' && !issue.pull_request));
+ } catch (err) {
+ console.log(err);
+ }
+ this.setFetchingIssues(false);
alert('Successfully submitted issue.');
// this.close();
}
@@ -305,9 +330,9 @@ export class ReportManager extends React.Component<{}> {
<div className="report-media-content">
<img height={100} alt={`Preview of ${file.name}`} src={preview} style={{ display: 'block' }} />
</div>
- <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
- <BsX color="#ffffff" />
- </IconButton>
+ <div className="close-btn">
+ <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+ </div>
</div>
);
} else if (mimeType.startsWith('video/')) {
@@ -319,18 +344,18 @@ export class ReportManager extends React.Component<{}> {
Your browser does not support the video tag.
</video>
</div>
- <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
- <BsX color="#ffffff" />
- </IconButton>
+ <div className="close-btn">
+ <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+ </div>
</div>
);
} else if (mimeType.startsWith('audio/')) {
return (
<div key={fileData._id} className="report-audio-wrapper">
<audio src={preview} controls />
- <IconButton onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn">
- <BsX />
- </IconButton>
+ <div className="close-btn">
+ <IconButton icon={<BsX color="#ffffff" />} onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} />
+ </div>
</div>
);
}
@@ -347,12 +372,12 @@ export class ReportManager extends React.Component<{}> {
<div className="report-header">
<h2>Open Issues</h2>
<Button
- variant="contained"
+ type={Type.PRIM}
+ text="report issue"
onClick={() => {
this.setViewState(ViewState.CREATE);
- }}>
- report issue
- </Button>
+ }}
+ />
</div>
<input
className="report-input"
@@ -444,20 +469,17 @@ export class ReportManager extends React.Component<{}> {
)}
</div>
</div>
- <div className="right">{this.selectedIssue ? <IssueView issue={this.selectedIssue} /> : <div>No issue selected</div>} </div>
+ <div className="right">{this.selectedIssue ? <IssueView key={this.selectedIssue.number} issue={this.selectedIssue} /> : <div>No issue selected</div>} </div>
<div style={{ position: 'absolute', top: '8px', right: '8px', display: 'flex', gap: '16px' }}>
- <Tooltip title={this.rightExpanded ? 'Minimize right side' : 'Expand right side'}>
- <IconButton
- onClick={e => {
- e.stopPropagation();
- this.setRightExpanded(!this.rightExpanded);
- }}>
- {this.rightExpanded ? <BsArrowsAngleContract size="16px" /> : <BsArrowsAngleExpand size="16px" />}
- </IconButton>
- </Tooltip>
- <IconButton onClick={this.close}>
- <CgClose size="16px" />
- </IconButton>
+ <IconButton
+ tooltip={this.rightExpanded ? 'Minimize right side' : 'Expand right side'}
+ icon={this.rightExpanded ? <BsArrowsAngleContract size="16px" /> : <BsArrowsAngleExpand size="16px" />}
+ onClick={e => {
+ e.stopPropagation();
+ this.setRightExpanded(!this.rightExpanded);
+ }}
+ />
+ <IconButton tooltip="close" icon={<CgClose size="16px" />} onClick={this.close} />
</div>
</div>
);
@@ -471,14 +493,13 @@ export class ReportManager extends React.Component<{}> {
<div className="report-issue">
<div className="report-header-vertical">
<Button
- variant="text"
+ text="back to view"
+ icon={<HiOutlineArrowLeft color={theme.palette.primary.main} />}
+ iconPosition={OrientationType.LEFT}
onClick={() => {
this.setViewState(ViewState.VIEW);
}}
- sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
- <HiOutlineArrowLeft color={theme.palette.primary.main} />
- back to view
- </Button>
+ />
<h2>Report an Issue</h2>
</div>
<div className="report-section">
@@ -537,17 +558,16 @@ export class ReportManager extends React.Component<{}> {
</Dropzone>
{this.mediaFiles.length > 0 && <ul className="file-list">{this.mediaFiles.map(file => this.getMediaPreview(file))}</ul>}
<Button
- variant="contained"
- sx={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '1rem' }}
+ text="submit"
+ icon={this.submitting ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <></>}
+ iconPosition={OrientationType.RIGHT}
onClick={() => {
this.reportIssue();
- }}>
- Submit
- {this.submitting && <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
- </Button>
- <IconButton onClick={this.close} sx={{ position: 'absolute', top: '4px', right: '4px' }}>
- <CgClose size={'16px'} />
- </IconButton>
+ }}
+ />
+ <div style={{ position: 'absolute', top: '4px', right: '4px' }}>
+ <IconButton tooltip="close" icon={<CgClose size={'16px'} />} onClick={this.close} />
+ </div>
</div>
);
};
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index 21c0cb43c..576c3c3a1 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -135,33 +135,43 @@ export const IssueView = ({ issue }: IssueViewProps) => {
};
// Loads an image and returns a promise that resolves as whether the image is valid or not
- const isImgValid = (src: string) => {
- const imgElement = document.createElement('video');
+ const isImgValid = (src: string): Promise<boolean> => {
+ const imgElement = document.createElement('img');
const validPromise: Promise<boolean> = new Promise(resolve => {
imgElement.addEventListener('load', () => resolve(true));
imgElement.addEventListener('error', () => resolve(false));
+ // if taking too long to load, return prematurely (when the browndash server is down)
+ // setTimeout(() => {
+ // resolve(false);
+ // }, 1500);
});
imgElement.src = src;
return validPromise;
};
// Loads a video and returns a promise that resolves as whether the video is valid or not
- const isVideoValid = (src: string) => {
+ const isVideoValid = (src: string): Promise<boolean> => {
const videoElement = document.createElement('video');
const validPromise: Promise<boolean> = new Promise(resolve => {
videoElement.addEventListener('loadeddata', () => resolve(true));
videoElement.addEventListener('error', () => resolve(false));
+ // setTimeout(() => {
+ // resolve(false);
+ // }, 1500);
});
videoElement.src = src;
return validPromise;
};
// Loads audio and returns a promise that resolves as whether the audio is valid or not
- const isAudioValid = (src: string) => {
+ const isAudioValid = (src: string): Promise<boolean> => {
const audioElement = document.createElement('audio');
const validPromise: Promise<boolean> = new Promise(resolve => {
audioElement.addEventListener('loadeddata', () => resolve(true));
audioElement.addEventListener('error', () => resolve(false));
+ // setTimeout(() => {
+ // resolve(false);
+ // }, 1500);
});
audioElement.src = src;
return validPromise;
@@ -169,6 +179,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
// Called on mount to parse the body
React.useEffect(() => {
+ setIssueBody('Loading...');
parseBody((issue.body as string) ?? '');
}, [issue]);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:05:25 +0000