|
@ -1,22 +1,43 @@ |
|
|
import React, { useMemo } from 'react'; |
|
|
import React, { useMemo } from 'react'; |
|
|
import { Header } from 'semantic-ui-react'; |
|
|
import { Button, Header } from 'semantic-ui-react'; |
|
|
|
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
|
import { useHistory } from 'react-router'; |
|
|
import _ from 'lodash'; |
|
|
import _ from 'lodash'; |
|
|
import { useTranslation } from 'react-i18next'; |
|
|
import { useTranslation } from 'react-i18next'; |
|
|
import { useSelector } from 'react-redux'; |
|
|
|
|
|
import PropTypes from 'prop-types'; |
|
|
import PropTypes from 'prop-types'; |
|
|
|
|
|
|
|
|
import TopicList from '../../../components/TopicList'; |
|
|
import TopicList from '../../../components/TopicList'; |
|
|
|
|
|
|
|
|
|
|
|
import './styles.css'; |
|
|
|
|
|
|
|
|
const Board = (props) => { |
|
|
const Board = (props) => { |
|
|
const { numberOfTopics } = props; |
|
|
const { numberOfTopics } = props; |
|
|
const userHasSignedUp = useSelector((state) => state.user.hasSignedUp); |
|
|
const hasSignedUp = useSelector((state) => state.user.hasSignedUp); |
|
|
|
|
|
const history = useHistory(); |
|
|
const { t } = useTranslation(); |
|
|
const { t } = useTranslation(); |
|
|
|
|
|
|
|
|
const boardContents = useMemo(() => { |
|
|
const boardContents = useMemo(() => { |
|
|
if (numberOfTopics > 0) { |
|
|
if (numberOfTopics > 0) { |
|
|
return (<TopicList topicIds={_.rangeRight(0, numberOfTopics)} />); |
|
|
|
|
|
} if (!userHasSignedUp) { |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className="vertical-center-in-parent"> |
|
|
<> |
|
|
|
|
|
{hasSignedUp |
|
|
|
|
|
? ( |
|
|
|
|
|
<Button |
|
|
|
|
|
content="New Topic" |
|
|
|
|
|
icon="plus" |
|
|
|
|
|
labelPosition="left" |
|
|
|
|
|
positive |
|
|
|
|
|
id="new-topic-button" |
|
|
|
|
|
onClick={() => history.push('/topics/new')} |
|
|
|
|
|
/> |
|
|
|
|
|
) |
|
|
|
|
|
: null} |
|
|
|
|
|
<TopicList topicIds={_.rangeRight(0, numberOfTopics)} /> |
|
|
|
|
|
</> |
|
|
|
|
|
); |
|
|
|
|
|
} if (!hasSignedUp) { |
|
|
|
|
|
return ( |
|
|
|
|
|
<div id="no-topic-message" className="vertical-center-in-parent"> |
|
|
<Header textAlign="center" as="h2"> |
|
|
<Header textAlign="center" as="h2"> |
|
|
{t('board.header.no.topics.message')} |
|
|
{t('board.header.no.topics.message')} |
|
|
</Header> |
|
|
</Header> |
|
@ -28,7 +49,16 @@ const Board = (props) => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className="vertical-center-in-parent"> |
|
|
<> |
|
|
|
|
|
<Button |
|
|
|
|
|
content="New Topic" |
|
|
|
|
|
icon="plus" |
|
|
|
|
|
labelPosition="left" |
|
|
|
|
|
positive |
|
|
|
|
|
id="new-topic-button" |
|
|
|
|
|
onClick={() => history.push('/topics/new')} |
|
|
|
|
|
/> |
|
|
|
|
|
<div id="no-topic-message" className="vertical-center-in-parent"> |
|
|
<Header textAlign="center" as="h2"> |
|
|
<Header textAlign="center" as="h2"> |
|
|
{t('board.header.no.topics.message')} |
|
|
{t('board.header.no.topics.message')} |
|
|
</Header> |
|
|
</Header> |
|
@ -36,8 +66,10 @@ const Board = (props) => { |
|
|
{t('board.sub.header.no.topics.user')} |
|
|
{t('board.sub.header.no.topics.user')} |
|
|
</Header> |
|
|
</Header> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</> |
|
|
|
|
|
|
|
|
); |
|
|
); |
|
|
}, [numberOfTopics, userHasSignedUp, t]); |
|
|
}, [numberOfTopics, hasSignedUp, t, history]); |
|
|
|
|
|
|
|
|
return (boardContents); |
|
|
return (boardContents); |
|
|
}; |
|
|
}; |
|
|