From d561f7d0803205ffded9e374be60853fa90438bd Mon Sep 17 00:00:00 2001 From: Sophie Zhang Date: Mon, 17 Jul 2023 22:09:00 -0400 Subject: starting component integration --- src/client/util/reportManager/ReportManager.tsx | 106 ++++++++++++--------- .../util/reportManager/ReportManagerComponents.tsx | 19 +++- 2 files changed, 78 insertions(+), 47 deletions(-) (limited to 'src') 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<{}> {
{`Preview
- this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn"> - - +
+ } onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} /> +
); } else if (mimeType.startsWith('video/')) { @@ -319,18 +344,18 @@ export class ReportManager extends React.Component<{}> { Your browser does not support the video tag. - this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} className="close-btn"> - - +
+ } onClick={() => this.setMediaFiles(this.mediaFiles.filter(f => f._id !== fileData._id))} /> +
); } else if (mimeType.startsWith('audio/')) { return (
); } @@ -347,12 +372,12 @@ export class ReportManager extends React.Component<{}> {

Open Issues

+ }} + />
{ )} -
{this.selectedIssue ? :
No issue selected
}
+
{this.selectedIssue ? :
No issue selected
}
- - { - e.stopPropagation(); - this.setRightExpanded(!this.rightExpanded); - }}> - {this.rightExpanded ? : } - - - - - + : } + onClick={e => { + e.stopPropagation(); + this.setRightExpanded(!this.rightExpanded); + }} + /> + } onClick={this.close} />
); @@ -471,14 +493,13 @@ export class ReportManager extends React.Component<{}> {
+ />

Report an Issue

@@ -537,17 +558,16 @@ export class ReportManager extends React.Component<{}> { {this.mediaFiles.length > 0 &&
    {this.mediaFiles.map(file => this.getMediaPreview(file))}
} - - - + }} + /> +
+ } onClick={this.close} /> +
); }; 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 => { + const imgElement = document.createElement('img'); const validPromise: Promise = 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 => { const videoElement = document.createElement('video'); const validPromise: Promise = 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 => { const audioElement = document.createElement('audio'); const validPromise: Promise = 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]); -- cgit v1.2.3-70-g09d2