diff --git a/frontend/app/components/Session_/Issues/ActiveIssueClose.js b/frontend/app/components/Session_/Issues/ActiveIssueClose.js deleted file mode 100644 index c51bd326e..000000000 --- a/frontend/app/components/Session_/Issues/ActiveIssueClose.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Button } from 'UI'; -import { resetActiveIsue } from 'Duck/issues'; - -const ActiveIssueClose = ({ resetActiveIsue }) => { - return ( -
- -
- ); -}; - -export default connect(null, { - resetActiveIsue -})(ActiveIssueClose); diff --git a/frontend/app/components/Session_/Issues/ActivityList.js b/frontend/app/components/Session_/Issues/ActivityList.js deleted file mode 100644 index 361477d54..000000000 --- a/frontend/app/components/Session_/Issues/ActivityList.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -class ActivityList extends React.Component { - render() { - return ( -
- Hello -
- ); - } -} - -export default ActivityList; diff --git a/frontend/app/components/Session_/Issues/AuthoAvatar.js b/frontend/app/components/Session_/Issues/AuthoAvatar.js deleted file mode 100644 index 59ce52864..000000000 --- a/frontend/app/components/Session_/Issues/AuthoAvatar.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import cn from 'classnames'; - -const AuthorAvatar = ({ className, imgUrl, width = 32, height = 32 }) => { - return ( -
- -
- ); -}; - -export default AuthorAvatar; diff --git a/frontend/app/components/Session_/Issues/ContentRender.js b/frontend/app/components/Session_/Issues/ContentRender.js deleted file mode 100644 index c09b0b517..000000000 --- a/frontend/app/components/Session_/Issues/ContentRender.js +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; - -import { CodeBlock } from 'UI'; - -import stl from './contentRender.module.css'; - -const elType = { - PARAGRAPH: 'paragraph', - TEXT: 'text', - QUOTE: 'blockquote', - CODE_BLOCK: 'codeBlock', - MENTION: 'mention', - RULE: 'rule', - HARD_BREAK: 'hardBreak', -}; - -const renderElement = (el, provider) => { - if (provider === 'github') return el; - - switch (el.type) { - case elType.PARAGRAPH: - return ( -

- -

- ); - case elType.QUOTE: - return ( -
- -
- ); - case elType.CODE_BLOCK: - return ( - - ); - // return - case elType.MENTION: - return {`@${el.attrs.text}`}; - case elType.RULE: - return
; - case elType.HARD_BREAK: - return
; - case elType.RULE: - return
; - case elType.TEXT: - return el.text; - } - return ; -}; - -const codeRender = (content) => content.map((el) => el.text); - -const ContentRender = (props) => { - const { message, provider } = props; - return ( - - {provider === 'github' - ? message - : message && - message.content && - message.content.map((el) => ( - {renderElement(el, provider)} - ))} - - ); -}; - -export default ContentRender; diff --git a/frontend/app/components/Session_/Issues/IssueComment.js b/frontend/app/components/Session_/Issues/IssueComment.js deleted file mode 100644 index a3071ff82..000000000 --- a/frontend/app/components/Session_/Issues/IssueComment.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { checkRecentTime } from 'App/date'; -import AuthorAvatar from './AuthoAvatar'; -import ContentRender from './ContentRender'; - -const IssueComment = ({ activity, provider }) => { - return ( -
- -
-
- { activity.user && activity.user.name } - { activity.createdAt && checkRecentTime(activity.createdAt) } -
-
{ }
-
-
- ); -}; - -export default IssueComment; diff --git a/frontend/app/components/Session_/Issues/IssueCommentForm.js b/frontend/app/components/Session_/Issues/IssueCommentForm.js deleted file mode 100644 index ac688205b..000000000 --- a/frontend/app/components/Session_/Issues/IssueCommentForm.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Input, Button, Form } from 'UI'; -import { addMessage } from 'Duck/assignments'; - -class IssueCommentForm extends React.PureComponent { - state = { comment: '' } - - write = (e) => { - e.stopPropagation(); - const { target: { name, value } } = e - this.setState({ comment: value }); - } - - addComment = () => { - const { comment } = this.state; - const { sessionId, issueId, addMessage, loading } = this.props; - if (loading) return; - - addMessage(sessionId, issueId, { message: comment, type: 'message' }).then(() => { - this.setState({comment: ''}); - }) - } - - render() { - const { comment } = this.state; - const { loading } = this.props; - - return ( -
-
Add Comment
-
-
- - -
-
-
- ); - } -}; - -export default connect(state => ({ - loading: state.getIn(['assignments', 'addMessage', 'loading']) -}), { addMessage })(IssueCommentForm) diff --git a/frontend/app/components/Session_/Issues/IssueDescription.js b/frontend/app/components/Session_/Issues/IssueDescription.js deleted file mode 100644 index 9087df233..000000000 --- a/frontend/app/components/Session_/Issues/IssueDescription.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import ContentRender from './ContentRender'; - -const IssueDescription = ({ className, description, provider }) => { - return ( -
-
Description
- -
- ); -}; - -export default IssueDescription; diff --git a/frontend/app/components/Session_/Issues/IssueDetails.js b/frontend/app/components/Session_/Issues/IssueDetails.js deleted file mode 100644 index f2f8f5d0c..000000000 --- a/frontend/app/components/Session_/Issues/IssueDetails.js +++ /dev/null @@ -1,57 +0,0 @@ -import { connect } from 'react-redux'; -import React from 'react'; -import cn from 'classnames'; -import { Loader } from 'UI'; -import IssueHeader from './IssueHeader'; -import IssueCommentForm from './IssueCommentForm'; -import IssueComment from './IssueComment'; -import stl from './issueDetails.module.css'; -import IssueDescription from './IssueDescription'; - -class IssueDetails extends React.PureComponent { - state = { searchQuery: ''} - - write = (e, { name, value }) => this.setState({ [ name ]: value }); - - render() { - const { sessionId, issue, loading, users, issueTypeIcons, issuesIntegration } = this.props; - const activities = issue.activities; - const provider = issuesIntegration.provider; - const assignee = users.filter(({id}) => issue.assignee === id).first(); - - return ( -
- -
- -
- - - { activities.size > 0 &&
Comments
} - { activities.map(activity => ( - - ))} -
- -
- -
- ); - } -} - -export default connect(state => ({ - users: state.getIn(['assignments', 'users']), - loading: state.getIn(['assignments', 'fetchAssignment', 'loading']), - issueTypeIcons: state.getIn(['assignments', 'issueTypeIcons']), - issuesIntegration: state.getIn([ 'issues', 'list'])[0] || {}, -}))(IssueDetails); diff --git a/frontend/app/components/Session_/Issues/IssueForm.js b/frontend/app/components/Session_/Issues/IssueForm.js index 248fd478c..d9ec41e39 100644 --- a/frontend/app/components/Session_/Issues/IssueForm.js +++ b/frontend/app/components/Session_/Issues/IssueForm.js @@ -1,182 +1,178 @@ +import { observer } from 'mobx-react-lite'; import React from 'react'; -import { connect } from 'react-redux'; -import { Form, Input, Button, CircularLoader, Loader } from 'UI'; -import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assignments'; + +import { useStore } from 'App/mstore'; +import { Button, CircularLoader, Form, Input, Loader } from 'UI'; + import Select from 'Shared/Select'; const SelectedValue = ({ icon, text }) => { return (
- {/* */} {icon} {text}
); }; -class IssueForm extends React.PureComponent { - componentDidMount() { - const { projects, issueTypes } = this.props; - this.props.init({ +function IssueForm(props) { + const { closeHandler } = props; + const { issueReportingStore } = useStore(); + const creating = issueReportingStore.createLoading; + const projects = issueReportingStore.projects; + const projectsLoading = issueReportingStore.projectsLoading; + const users = issueReportingStore.users; + const instance = issueReportingStore.instance; + const metaLoading = issueReportingStore.metaLoading; + const issueTypes = issueReportingStore.issueTypes; + const addActivity = issueReportingStore.saveIssue; + const init = issueReportingStore.init; + const edit = issueReportingStore.editInstance; + const fetchMeta = issueReportingStore.fetchMeta; + + console.log(users, instance, projects, issueTypes) + React.useEffect(() => { + init({ projectId: projects[0] ? projects[0].id : '', issueType: issueTypes[0] ? issueTypes[0].id : '', }); - } + }, []); - componentWillReceiveProps(newProps) { - const { instance } = this.props; - if (newProps.instance.projectId && newProps.instance.projectId != instance.projectId) { - this.props.fetchMeta(newProps.instance.projectId).then(() => { - this.props.edit({ issueType: '', assignee: '', projectId: newProps.instance.projectId }); + React.useEffect(() => { + if (instance?.projectId) { + fetchMeta(instance?.projectId).then(() => { + edit({ + issueType: '', + assignee: '', + projectId: instance?.projectId, + }); }); } - } + }, [instance?.projectId]); - onSubmit = () => { - const { sessionId, addActivity } = this.props; - const { instance } = this.props; - - addActivity(sessionId, instance.toJS()).then(() => { - const { errors } = this.props; + const onSubmit = () => { + const { sessionId } = props; + addActivity(sessionId, instance).then(() => { + const { errors } = props; if (!errors || errors.length === 0) { - this.props.init({ projectId: instance.projectId }); - this.props.fetchAssignments(sessionId); - this.props.closeHandler(); + init({ projectId: instance?.projectId }); + closeHandler(); } }); }; - write = (e) => { + const write = (e) => { const { target: { name, value }, } = e; - this.props.edit({ [name]: value }); + edit({ [name]: value }); }; - writeOption = ({ name, value }) => this.props.edit({ [name]: value.value }); - render() { - const { - creating, - projects, - users, - issueTypes, - instance, - closeHandler, - metaLoading, - projectsLoading, - } = this.props; - const projectOptions = projects.map(({ name, id }) => ({ label: name, value: id })).toArray(); - const userOptions = users.map(({ name, id }) => ({ label: name, value: id })).toArray(); + const writeOption = ({ name, value }) => edit({ [name]: value.value }); + const projectOptions = projects.map(({ name, id }) => ({ + label: name, + value: id, + })); + const userOptions = users.map(({ name, id }) => ({ label: name, value: id })); - const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => { - return { label: name, value: id, iconUrl, color }; - }); + const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => { + return { label: name, value: id, iconUrl, color }; + }); - const selectedIssueType = issueTypes.filter((issue) => issue.id == instance.issueType)[0]; + const selectedIssueType = issueTypes.filter( + (issue) => issue.id == instance?.issueType + )[0]; - return ( - -
- - - - ) : ( - '' - ) - } - /> - + return ( + + + + + + ) : ( + '' + ) + } + /> + - - - + - - - - + + + + - - -