Add anonymous to Puzzle Modal

react-boilerplate/app/components/PuzzlePanel/index.js

@@ -3,6 +3,7 @@
  * PuzzlePanel
  *
  */
+/* eslint-disable indent */
 
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -45,7 +46,11 @@ export class PuzzlePanel extends React.Component {
       <RoundedPanel my={10}>
         <Row mx={10} py={10}>
           <UserCol w={[1 / 4, 1 / 6]} px={10}>
-            <UserLabel user={node.user} break />
+            <UserLabel
+              user={node.user}
+              anonymous={node.anonymous && node.status === 0}
+              break
+            />
             {this.props.additional}
           </UserCol>
           <Box w={[3 / 4, 5 / 6]} px={10}>
@@ -97,7 +102,7 @@ export class PuzzlePanel extends React.Component {
 PuzzlePanel.propTypes = {
   node: PropTypes.object.isRequired,
   additional: PropTypes.any,
-  locale: PropTypes.string.isRequired,
+  locale: PropTypes.string,
 };
 
 PuzzlePanel.defaultProps = {

react-boilerplate/app/components/UserLabel/index.js

@@ -9,13 +9,17 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { pushWithLocale, from_global_id as f } from 'common';
-import { ImgXs } from 'style-store';
+import { ImgXs, ImgMd } from 'style-store';
 import { Tooltip } from 'react-tippy';
+import { FormattedMessage } from 'react-intl';
 
 import { openDirectChat } from 'containers/Chat/actions';
 import UserAwardPopover from 'components/UserAwardPopover';
 import chat from 'images/chat.svg';
 import home from 'images/home.svg';
+import anonymousIcon from 'images/anonymous.png';
+
+import messages from './messages';
 
 const Linked = styled.button`
   padding: 3px;
@@ -25,8 +29,22 @@ const Linked = styled.button`
   }
 `;
 
+const IconMd = ImgMd.extend`
+  border: 1px solid #333;
+  border-radius: 9999px;
+`;
+
 function UserLabel(props) {
-  const { user, break: needBreak, color } = props;
+  const { user, anonymous, break: needBreak, color } = props;
+  if (anonymous) {
+    return (
+      <span>
+        <IconMd alt="anonymous" src={anonymousIcon} />
+        <br />
+        <FormattedMessage {...messages.anonymous} />
+      </span>
+    );
+  }
   const popoverDetail = (
     <div>
       <button
@@ -74,6 +92,7 @@ UserLabel.propTypes = {
     nickname: PropTypes.string.isRequired,
     currentAward: PropTypes.object,
   }),
+  anonymous: PropTypes.bool,
   break: PropTypes.bool,
   openDirectChat: PropTypes.func.isRequired,
   goto: PropTypes.func.isRequired,
@@ -83,6 +102,7 @@ UserLabel.propTypes = {
 
 UserLabel.defaultProps = {
   color: '#23527c',
+  // anonymous: false,
 };
 
 const mapDispatchToProps = (dispatch) => ({

react-boilerplate/app/components/UserLabel/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  anonymous: {
+    id: 'components.UserLabel.anonymous',
+    defaultMessage: 'Anonymous',
+  },
+});

react-boilerplate/app/containers/PuzzleAddForm/index.js

@@ -38,6 +38,7 @@ export class PuzzleAddForm extends React.Component {
       puzzleTitle: '',
       puzzleGenre: 0,
       puzzleYami: 0,
+      puzzleAnonymous: false,
       loading: false,
     };
 
@@ -47,20 +48,28 @@ export class PuzzleAddForm extends React.Component {
   // }}}
   // {{{ handleChange
   handleChange(e) {
-    const target = e.target;
+    const { target } = e;
     if (target.id === 'formPuzzleAddTitle') {
       this.setState({ puzzleTitle: target.value });
     } else if (target.id === 'formPuzzleAddGenre') {
       this.setState({ puzzleGenre: target.value });
     } else if (target.id === 'formPuzzleAddYami') {
       this.setState({ puzzleYami: target.value });
+    } else if (target.id === 'formPuzzleAddAnonymous') {
+      this.setState({ puzzleAnonymous: target.value });
     }
   }
   // }}}
   // {{{ handleSubmit
   handleSubmit(e) {
     e.preventDefault();
-    const { loading, puzzleTitle, puzzleGenre, puzzleYami } = this.state;
+    const {
+      loading,
+      puzzleTitle,
+      puzzleGenre,
+      puzzleYami,
+      puzzleAnonymous,
+    } = this.state;
     const puzzleContent =
       this.contentTextarea && this.contentTextarea.getContent();
     const puzzleSolution =
@@ -76,6 +85,7 @@ export class PuzzleAddForm extends React.Component {
             puzzleYami,
             puzzleContent,
             puzzleSolution,
+            puzzleAnonymous,
           },
         },
       })
@@ -184,6 +194,14 @@ export class PuzzleAddForm extends React.Component {
             </Select>
           }
         />
+        <FieldGroup
+          id="formPuzzleAddAnonymous"
+          label={<FormattedMessage {...messages.anonymousLabel} />}
+          Ctl={Input}
+          type="checkbox"
+          value={this.state.puzzleAnonymous}
+          onChange={this.handleChange}
+        />
         <FieldGroup
           id="formPuzzleAddContent"
           label={
@@ -250,7 +268,7 @@ PuzzleAddForm.propTypes = {
 const mapStateToProps = createStructuredSelector({
   currentUserId: createSelector(
     makeSelectUserNavbar(),
-    (usernav) => usernav.user && usernav.user.userId
+    (usernav) => usernav.user && usernav.user.userId,
   ),
 });
 
@@ -261,7 +279,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 const withConnect = connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 );
 
 const withMutation = graphql(PuzzleAddFormMutation);
@@ -286,11 +304,11 @@ const withCurrentUser = graphql(
       const { user: currentUser } = data;
       return { currentUser };
     },
-  }
+  },
 );
 
 export default compose(
   withConnect,
   withCurrentUser,
-  withMutation
+  withMutation,
 )(PuzzleAddForm);

react-boilerplate/app/containers/PuzzleAddForm/messages.js

@@ -30,4 +30,8 @@ export default defineMessages({
     id: 'app.containers.PuzzleAddForm.submitLabel',
     defaultMessage: 'Submit',
   },
+  anonymousLabel: {
+    id: 'app.containers.PuzzleAddForm.anonymousLabel',
+    defaultMessage: 'Anonymous',
+  },
 });

react-boilerplate/app/containers/PuzzleShowPage/Frame.js

@@ -5,11 +5,13 @@ import { text2md } from 'common';
 import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { Box } from 'rebass';
-import { PuzzleFrame } from 'style-store';
+import { ImgSm, PuzzleFrame } from 'style-store';
 
 import Constrained from 'components/Constrained';
 import UserLabel from 'components/UserLabel';
+import anonymousIcon from 'images/anonymous.png';
 
+import userLabelMessages from 'components/UserLabel/messages';
 import messages from './messages';
 
 const Label = styled.span`
@@ -28,6 +30,12 @@ const ContentBox = styled(Box)`
   font-family: 'Dejavu Sans';
 `;
 
+const IconSm = ImgSm.extend`
+  border: 1px solid #333;
+  border-radius: 9999px;
+  margin: 5px;
+`;
+
 function Frame(props) {
   return (
     <Constrained mt={2} mb={2}>
@@ -37,7 +45,18 @@ function Frame(props) {
           dangerouslySetInnerHTML={{ __html: text2md(props.text, props.safe) }}
         />
         <br />
-        {props.user ? (
+        {props.anonymous && (
+          <FormattedMessage {...messages.creator}>
+            {(c) => (
+              <RightBox>
+                <Label>{c}:</Label>
+                <IconSm alt="anonymous" src={anonymousIcon} />
+                <FormattedMessage {...userLabelMessages.anonymous} />
+              </RightBox>
+            )}
+          </FormattedMessage>
+        )}
+        {props.user && !props.anonymous ? (
           <FormattedMessage {...messages.creator}>
             {(c) => (
               <RightBox>
@@ -76,6 +95,7 @@ function Frame(props) {
 
 Frame.propTypes = {
   text: PropTypes.string.isRequired,
+  anonymous: PropTypes.bool,
   user: PropTypes.object,
   created: PropTypes.string,
   solved: PropTypes.string,

react-boilerplate/app/containers/PuzzleShowPage/index.js

@@ -284,6 +284,7 @@ export class PuzzleShowPage extends React.Component {
         {(P.status <= 2 || P.user.id === U) && (
           <Frame
             user={P.user}
+            anonymous={P.anonymous && P.status === 0}
             text={P.content}
             created={P.created}
             safe={P.contentSafe}

react-boilerplate/app/graphql/PuzzleActiveList.js

@@ -14,6 +14,7 @@ export const PuzzleActiveList = gql`
           title
           status
           created
+          anonymous
           quesCount
           uaquesCount
           user {

react-boilerplate/app/graphql/PuzzlePanel.js

@@ -10,6 +10,7 @@ const PuzzlePanel = gql`
     title
     status
     created
+    anonymous
     quesCount
     uaquesCount
     starSet {

react-boilerplate/app/graphql/PuzzleShow.js

@@ -25,6 +25,7 @@ const PuzzleShow = gql`
       yami
       genre
       status
+      anonymous
       user {
         ...UserLabel_user
       }

react-boilerplate/app/translations/en.json

@@ -153,6 +153,7 @@
   "app.containers.ProfilePage.starStaticsCount": "Star Count",
   "app.containers.ProfilePage.title": "User Profile",
   "app.containers.ProfilePage.trueQuesCount": "True Answer Count",
+  "app.containers.PuzzleAddForm.anonymousLabel": "Anonymous",
   "app.containers.PuzzleAddForm.contentLabel": "Content",
   "app.containers.PuzzleAddForm.genreLabel": "Genre",
   "app.containers.PuzzleAddForm.solutionLabel": "Solution",
@@ -233,5 +234,6 @@
   "app.containers.UserNavbar.userlist": "User List",
   "app.containers.WikiPage.title": "Wiki",
   "app.containers.withModel.close": "Close",
-  "app.containers.withModel.confirm": "Confirm"
+  "app.containers.withModel.confirm": "Confirm",
+  "components.UserLabel.anonymous": "Anonymous"
 }

react-boilerplate/app/translations/ja.json

@@ -153,6 +153,7 @@
   "app.containers.ProfilePage.starStaticsCount": "スター投票数",
   "app.containers.ProfilePage.title": "ユーザープロフィール",
   "app.containers.ProfilePage.trueQuesCount": "正解数",
+  "app.containers.PuzzleAddForm.anonymousLabel": "匿名",
   "app.containers.PuzzleAddForm.contentLabel": "問題文",
   "app.containers.PuzzleAddForm.genreLabel": "ジャンル",
   "app.containers.PuzzleAddForm.solutionLabel": "解説文",
@@ -233,5 +234,6 @@
   "app.containers.UserNavbar.userlist": "ユーザー一覧",
   "app.containers.WikiPage.title": "Wiki",
   "app.containers.withModel.close": "閉じる",
-  "app.containers.withModel.confirm": "確認"
+  "app.containers.withModel.confirm": "確認",
+  "components.UserLabel.anonymous": "謎の料理人"
 }

sui_hei/models.py

@@ -148,6 +148,7 @@ class Puzzle(models.Model):
     modified = models.DateTimeField(_('modified'))
     status = models.IntegerField(_('status'), default=0)
     memo = models.TextField(_('memo'), blank=True)
+    anonymous = models.BooleanField(_('anonymous'), default=False)
 
     class Meta:
         verbose_name = _("Puzzle")

sui_hei/schema.py

@@ -635,6 +635,7 @@ class Input:
         puzzleYami = graphene.Int(required=True)
         puzzleContent = graphene.String(required=True)
         puzzleSolution = graphene.String(required=True)
+        puzzleAnonymous = graphene.Boolean(required=True)
 
     @classmethod
     def mutate_and_get_payload(cls, root, info, **input):
@@ -647,6 +648,7 @@ def mutate_and_get_payload(cls, root, info, **input):
         yami = input["puzzleYami"]
         content = input["puzzleContent"]
         solution = input["puzzleSolution"]
+        anonymous = input["puzzleAnonymous"]
 
         if not title:
             raise ValidationError(_("Title cannot be empty!"))
@@ -666,6 +668,7 @@ def mutate_and_get_payload(cls, root, info, **input):
             content_safe=user.credit > MIN_CONTENT_SAFE_CREDIT,
             solution=solution,
             created=created,
+            anonymous=anonymous,
             modified=created)
 
         # Delete messages in puzzle-[id] channel