diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx index 2f0edf42..59f44bb6 100644 --- a/src/discussions/discussions-home/DiscussionsHome.jsx +++ b/src/discussions/discussions-home/DiscussionsHome.jsx @@ -1,15 +1,18 @@ import React from 'react'; +import { useSelector } from 'react-redux'; import { Route, Switch } from 'react-router'; import { PostActionsBar } from '../../components'; import { Routes } from '../../data/constants'; import { CommentsView } from '../comments'; import { BreadcrumbMenu, NavigationBar } from '../navigation'; -import { PostsView } from '../posts'; +import { PostEditor, PostsView } from '../posts'; import { TopicsView } from '../topics'; export default function DiscussionsHome() { + const postEditorVisible = useSelector(state => state.threads.postEditorVisible); + return (
@@ -34,9 +37,14 @@ export default function DiscussionsHome() {
- - - + { + postEditorVisible ? + : ( + + + + ) + }
); diff --git a/src/discussions/posts/data/slices.js b/src/discussions/posts/data/slices.js index 555c4141..fb053f26 100644 --- a/src/discussions/posts/data/slices.js +++ b/src/discussions/posts/data/slices.js @@ -55,6 +55,7 @@ const threadsSlice = createSlice({ myPosts: MyPostsFilter.MY_POSTS, search: '', }, + postEditorVisible: false, sortedBy: ThreadOrdering.BY_LAST_ACTIVITY, }, reducers: { @@ -150,6 +151,12 @@ const threadsSlice = createSlice({ setSearchQuery: (state, { payload }) => { state.filters.search = payload; }, + showPostEditor: (state) => { + state.postEditorVisible = true; + }, + hidePostEditor: (state) => { + state.postEditorVisible = false; + }, }, }); @@ -179,6 +186,8 @@ export const { setSortedBy, setStatusFilter, setSearchQuery, + showPostEditor, + hidePostEditor, } = threadsSlice.actions; export const threadsReducer = threadsSlice.reducer; diff --git a/src/discussions/posts/index.js b/src/discussions/posts/index.js index 0d94283b..0e1c9b50 100644 --- a/src/discussions/posts/index.js +++ b/src/discussions/posts/index.js @@ -1,2 +1,3 @@ /* eslint-disable import/prefer-default-export */ export { default as PostsView } from './PostsView'; +export { default as PostEditor } from './post-editor/PostEditor'; diff --git a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx index ca457d45..735d6f57 100644 --- a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx +++ b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { Button, SearchField } from '@edx/paragon'; -import { setSearchQuery } from '../data'; +import { setSearchQuery, showPostEditor } from '../data'; import messages from './messages'; function PostActionsBar({ intl }) { @@ -17,7 +17,11 @@ function PostActionsBar({ intl }) { onSubmit={(value) => dispatch(setSearchQuery(value))} placeholder={intl.formatMessage(messages.searchAllPosts)} /> - diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx new file mode 100644 index 00000000..7c247442 --- /dev/null +++ b/src/discussions/posts/post-editor/PostEditor.jsx @@ -0,0 +1,110 @@ +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import React from 'react'; +import { useDispatch } from 'react-redux'; +import { Button, Form } from '@edx/paragon'; +import { faComments, faQuestion, faStar } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { hidePostEditor } from '../data'; + +import messages from './messages'; + +function PostEditor({ intl }) { + const dispatch = useDispatch(); + const cancelAdding = () => dispatch(hidePostEditor()); + + return ( +
+
+ + + {intl.formatMessage(messages.type)} + + + {intl.formatMessage(messages.typeDescription)} ({intl.formatMessage(messages.required)}) + + + + + + + {intl.formatMessage(messages.questionType)} + + + + + + + + {intl.formatMessage(messages.discussionType)} + + + + + + + {intl.formatMessage(messages.topicArea)} + + + {intl.formatMessage(messages.topicAreaDescription)} ({intl.formatMessage(messages.required)}) + + + {/* TODO: topics has to be filled in another PR */} + + + + + + + {intl.formatMessage(messages.title)} + + + {intl.formatMessage(messages.titleDescription)} ({intl.formatMessage(messages.required)}) + + + + + + + {intl.formatMessage(messages.questionText)} + + + + + + + + + + {intl.formatMessage(messages.followPost)} + + + + + + + {intl.formatMessage(messages.anonymousPost)} + + + + + + +
+
+ ); +} + +PostEditor.propTypes = { + intl: intlShape.isRequired, +}; + +export default injectIntl(PostEditor); diff --git a/src/discussions/posts/post-editor/messages.js b/src/discussions/posts/post-editor/messages.js new file mode 100644 index 00000000..7d590637 --- /dev/null +++ b/src/discussions/posts/post-editor/messages.js @@ -0,0 +1,66 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + type: { + id: 'discussions.post.editor.type', + defaultMessage: 'Post type', + }, + typeDescription: { + id: 'discussions.post.editor.typeDescription', + defaultMessage: 'Questions raise issues that need answers. Discussions share ideas and start conversations.', + }, + required: { + id: 'discussions.post.editor.required', + defaultMessage: 'Required', + }, + questionType: { + id: 'discussions.post.editor.questionType', + defaultMessage: 'Question', + }, + discussionType: { + id: 'discussions.post.editor.discussionType', + defaultMessage: 'Discussion', + }, + topicArea: { + id: 'discussions.post.editor.topicArea', + defaultMessage: 'Topic area', + }, + topicAreaDescription: { + id: 'discussions.post.editor.topicAreaDescription', + defaultMessage: 'Add your post to a relevant topic to help others find it.', + }, + title: { + id: 'discussions.post.editor.title', + defaultMessage: 'Title', + }, + titleDescription: { + id: 'discussions.post.editor.titleDescription', + defaultMessage: 'Add a clear and descriptive title to encourage participation.', + }, + questionText: { + id: 'discussions.post.editor.questionText', + defaultMessage: 'Your question or idea (required)', + }, + preview: { + id: 'discussions.post.editor.preview', + defaultMessage: 'Preview', + }, + followPost: { + id: 'discussions.post.editor.followPost', + defaultMessage: 'follow this post', + }, + anonymousPost: { + id: 'discussions.post.editor.anonymousPost', + defaultMessage: 'post anonymously', + }, + submit: { + id: 'discussions.post.editor.submit', + defaultMessage: 'Submit', + }, + cancel: { + id: 'discussions.post.editor.cancel', + defaultMessage: 'Cancel', + }, +}); + +export default messages;