resources/js/components/twitch-bot/GuessingSettingsForm.js

   1 import { withFormik } from 'formik';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import { Button, Col, Form, Row } from 'react-bootstrap';
   5 import { useTranslation } from 'react-i18next';
   6
   7 import laravelErrorsToFormik from '../../helpers/laravelErrorsToFormik';
   8 import i18n from '../../i18n';
   9 import yup from '../../schema/yup';
  10
  11 const GuessingSettingsForm = ({
  12         errors,
  13         handleBlur,
  14         handleChange,
  15         handleSubmit,
  16         onCancel,
  17         touched,
  18         values,
  19 }) => {
  20         const { t } = useTranslation();
  21
  22         return <Form noValidate onSubmit={handleSubmit}>
  23                 <Row>
  24                         <Form.Group as={Col} controlId="gg.points_exact_first" md={6}>
  25                                 <Form.Label>{t('twitchBot.guessingGame.pointsExactFirst')}</Form.Label>
  26                                 <Form.Control
  27                                         isInvalid={!!(touched.points_exact_first && errors.points_exact_first)}
  28                                         max="5"
  29                                         min="1"
  30                                         name="points_exact_first"
  31                                         onBlur={handleBlur}
  32                                         onChange={handleChange}
  33                                         step="1"
  34                                         type="number"
  35                                         value={values.points_exact_first || 0}
  36                                 />
  37                                 {touched.points_exact_first && errors.points_exact_first ?
  38                                         <Form.Control.Feedback type="invalid">
  39                                                 {t(errors.points_exact_first)}
  40                                         </Form.Control.Feedback>
  41                                 : null}
  42                         </Form.Group>
  43                         <Form.Group as={Col} controlId="gg.points_exact_other" md={6}>
  44                                 <Form.Label>{t('twitchBot.guessingGame.pointsExactOther')}</Form.Label>
  45                                 <Form.Control
  46                                         isInvalid={!!(touched.points_exact_other && errors.points_exact_other)}
  47                                         max="5"
  48                                         min="0"
  49                                         name="points_exact_other"
  50                                         onBlur={handleBlur}
  51                                         onChange={handleChange}
  52                                         step="1"
  53                                         type="number"
  54                                         value={values.points_exact_other || 0}
  55                                 />
  56                                 {touched.points_exact_other && errors.points_exact_other ?
  57                                         <Form.Control.Feedback type="invalid">
  58                                                 {t(errors.points_exact_other)}
  59                                         </Form.Control.Feedback>
  60                                 : null}
  61                         </Form.Group>
  62                         <Form.Group as={Col} controlId="gg.points_close_first" md={6}>
  63                                 <Form.Label>{t('twitchBot.guessingGame.pointsCloseFirst')}</Form.Label>
  64                                 <Form.Control
  65                                         isInvalid={!!(touched.points_close_first && errors.points_close_first)}
  66                                         max="5"
  67                                         min="0"
  68                                         name="points_close_first"
  69                                         onBlur={handleBlur}
  70                                         onChange={handleChange}
  71                                         step="0.5"
  72                                         type="number"
  73                                         value={values.points_close_first || 0}
  74                                 />
  75                                 {touched.points_close_first && errors.points_close_first ?
  76                                         <Form.Control.Feedback type="invalid">
  77                                                 {t(errors.points_close_first)}
  78                                         </Form.Control.Feedback>
  79                                 : null}
  80                         </Form.Group>
  81                         <Form.Group as={Col} controlId="gg.points_close_other" md={6}>
  82                                 <Form.Label>{t('twitchBot.guessingGame.pointsCloseOther')}</Form.Label>
  83                                 <Form.Control
  84                                         isInvalid={!!(touched.points_close_other && errors.points_close_other)}
  85                                         max="5"
  86                                         min="0"
  87                                         name="points_close_other"
  88                                         onBlur={handleBlur}
  89                                         onChange={handleChange}
  90                                         step="0.5"
  91                                         type="number"
  92                                         value={values.points_close_other || 0}
  93                                 />
  94                                 {touched.points_close_other && errors.points_close_other ?
  95                                         <Form.Control.Feedback type="invalid">
  96                                                 {t(errors.points_close_other)}
  97                                         </Form.Control.Feedback>
  98                                 : null}
  99                         </Form.Group>
 100                         <Form.Group as={Col} controlId="gg.points_close_max" md={6}>
 101                                 <Form.Label>{t('twitchBot.guessingGame.pointsCloseMax')}</Form.Label>
 102                                 <Form.Control
 103                                         isInvalid={!!(touched.points_close_max && errors.points_close_max)}
 104                                         min="0"
 105                                         name="points_close_max"
 106                                         onBlur={handleBlur}
 107                                         onChange={handleChange}
 108                                         step="1"
 109                                         type="number"
 110                                         value={values.points_close_max || 0}
 111                                 />
 112                                 {touched.points_close_max && errors.points_close_max ?
 113                                         <Form.Control.Feedback type="invalid">
 114                                                 {t(errors.points_close_max)}
 115                                         </Form.Control.Feedback>
 116                                 : null}
 117                         </Form.Group>
 118                 </Row>
 119                 <Form.Group controlId="gg.start_message">
 120                         <Form.Label>{t('twitchBot.guessingGame.startMessage')}</Form.Label>
 121                         <Form.Control
 122                                 isInvalid={!!(touched.start_message && errors.start_message)}
 123                                 name="start_message"
 124                                 onBlur={handleBlur}
 125                                 onChange={handleChange}
 126                                 type="text"
 127                                 value={values.start_message || ''}
 128                         />
 129                         {touched.start_message && errors.start_message ?
 130                                 <Form.Control.Feedback type="invalid">
 131                                         {t(errors.start_message)}
 132                                 </Form.Control.Feedback>
 133                         : null}
 134                 </Form.Group>
 135                 <Form.Group controlId="gg.stop_message">
 136                         <Form.Label>{t('twitchBot.guessingGame.stopMessage')}</Form.Label>
 137                         <Form.Control
 138                                 isInvalid={!!(touched.stop_message && errors.stop_message)}
 139                                 name="stop_message"
 140                                 onBlur={handleBlur}
 141                                 onChange={handleChange}
 142                                 type="text"
 143                                 value={values.stop_message || ''}
 144                         />
 145                         {touched.stop_message && errors.stop_message ?
 146                                 <Form.Control.Feedback type="invalid">
 147                                         {t(errors.stop_message)}
 148                                 </Form.Control.Feedback>
 149                         : null}
 150                 </Form.Group>
 151                 <Form.Group controlId="gg.winners_message">
 152                         <Form.Label>{t('twitchBot.guessingGame.winnersMessage')}</Form.Label>
 153                         <Form.Control
 154                                 isInvalid={!!(touched.winners_message && errors.winners_message)}
 155                                 name="winners_message"
 156                                 onBlur={handleBlur}
 157                                 onChange={handleChange}
 158                                 type="text"
 159                                 value={values.winners_message || ''}
 160                         />
 161                         {touched.winners_message && errors.winners_message ?
 162                                 <Form.Control.Feedback type="invalid">
 163                                         {t(errors.winners_message)}
 164                                 </Form.Control.Feedback>
 165                         :
 166                                 <Form.Text muted>
 167                                         {t('twitchBot.guessingGame.winnersMessageHint')}
 168                                 </Form.Text>
 169                         }
 170                 </Form.Group>
 171                 <Form.Group controlId="gg.no_winners_message">
 172                         <Form.Label>{t('twitchBot.guessingGame.noWinnersMessage')}</Form.Label>
 173                         <Form.Control
 174                                 isInvalid={!!(touched.no_winners_message && errors.no_winners_message)}
 175                                 name="no_winners_message"
 176                                 onBlur={handleBlur}
 177                                 onChange={handleChange}
 178                                 type="text"
 179                                 value={values.no_winners_message || ''}
 180                         />
 181                         {touched.no_winners_message && errors.no_winners_message ?
 182                                 <Form.Control.Feedback type="invalid">
 183                                         {t(errors.no_winners_message)}
 184                                 </Form.Control.Feedback>
 185                         : null}
 186                 </Form.Group>
 187                 <Form.Group controlId="gg.cancel_message">
 188                         <Form.Label>{t('twitchBot.guessingGame.cancelMessage')}</Form.Label>
 189                         <Form.Control
 190                                 isInvalid={!!(touched.cancel_message && errors.cancel_message)}
 191                                 name="cancel_message"
 192                                 onBlur={handleBlur}
 193                                 onChange={handleChange}
 194                                 type="text"
 195                                 value={values.cancel_message || ''}
 196                         />
 197                         {touched.cancel_message && errors.cancel_message ?
 198                                 <Form.Control.Feedback type="invalid">
 199                                         {t(errors.cancel_message)}
 200                                 </Form.Control.Feedback>
 201                         : null}
 202                 </Form.Group>
 203                 <Form.Group controlId="gg.invalid_solution_message">
 204                         <Form.Label>{t('twitchBot.guessingGame.invalidSolutionMessage')}</Form.Label>
 205                         <Form.Control
 206                                 isInvalid={!!(touched.invalid_solution_message && errors.invalid_solution_message)}
 207                                 name="invalid_solution_message"
 208                                 onBlur={handleBlur}
 209                                 onChange={handleChange}
 210                                 type="text"
 211                                 value={values.invalid_solution_message || ''}
 212                         />
 213                         {touched.invalid_solution_message && errors.invalid_solution_message ?
 214                                 <Form.Control.Feedback type="invalid">
 215                                         {t(errors.invalid_solution_message)}
 216                                 </Form.Control.Feedback>
 217                         : null}
 218                 </Form.Group>
 219                 <Form.Group controlId="gg.active_message">
 220                         <Form.Label>{t('twitchBot.guessingGame.activeMessage')}</Form.Label>
 221                         <Form.Control
 222                                 isInvalid={!!(touched.active_message && errors.active_message)}
 223                                 name="active_message"
 224                                 onBlur={handleBlur}
 225                                 onChange={handleChange}
 226                                 type="text"
 227                                 value={values.active_message || ''}
 228                         />
 229                         {touched.active_message && errors.active_message ?
 230                                 <Form.Control.Feedback type="invalid">
 231                                         {t(errors.active_message)}
 232                                 </Form.Control.Feedback>
 233                         : null}
 234                 </Form.Group>
 235                 <Form.Group controlId="gg.not_active_message">
 236                         <Form.Label>{t('twitchBot.guessingGame.notActiveMessage')}</Form.Label>
 237                         <Form.Control
 238                                 isInvalid={!!(touched.not_active_message && errors.not_active_message)}
 239                                 name="not_active_message"
 240                                 onBlur={handleBlur}
 241                                 onChange={handleChange}
 242                                 type="text"
 243                                 value={values.not_active_message || ''}
 244                         />
 245                         {touched.not_active_message && errors.not_active_message ?
 246                                 <Form.Control.Feedback type="invalid">
 247                                         {t(errors.not_active_message)}
 248                                 </Form.Control.Feedback>
 249                         : null}
 250                 </Form.Group>
 251                 <div className="button-bar mt-3">
 252                         {onCancel ?
 253                                 <Button onClick={onCancel} variant="secondary">
 254                                         {t('button.cancel')}
 255                                 </Button>
 256                         : null}
 257                         <Button type="submit" variant="primary">
 258                                 {t('button.save')}
 259                         </Button>
 260                 </div>
 261         </Form>;
 262 };
 263
 264 GuessingSettingsForm.propTypes = {
 265         errors: PropTypes.shape({
 266                 active_message: PropTypes.string,
 267                 cancel_message: PropTypes.string,
 268                 invalid_solution_message: PropTypes.string,
 269                 name: PropTypes.string,
 270                 no_winners_message: PropTypes.string,
 271                 not_active_message: PropTypes.string,
 272                 points_close_first: PropTypes.string,
 273                 points_close_max: PropTypes.string,
 274                 points_close_other: PropTypes.string,
 275                 points_exact_first: PropTypes.string,
 276                 points_exact_other: PropTypes.string,
 277                 start_message: PropTypes.string,
 278                 stop_message: PropTypes.string,
 279                 winners_message: PropTypes.string,
 280         }),
 281         handleBlur: PropTypes.func,
 282         handleChange: PropTypes.func,
 283         handleSubmit: PropTypes.func,
 284         name: PropTypes.string,
 285         onCancel: PropTypes.func,
 286         touched: PropTypes.shape({
 287                 active_message: PropTypes.bool,
 288                 cancel_message: PropTypes.bool,
 289                 invalid_solution_message: PropTypes.bool,
 290                 name: PropTypes.bool,
 291                 no_winners_message: PropTypes.bool,
 292                 not_active_message: PropTypes.bool,
 293                 points_close_first: PropTypes.bool,
 294                 points_close_max: PropTypes.bool,
 295                 points_close_other: PropTypes.bool,
 296                 points_exact_first: PropTypes.bool,
 297                 points_exact_other: PropTypes.bool,
 298                 start_message: PropTypes.bool,
 299                 stop_message: PropTypes.bool,
 300                 winners_message: PropTypes.bool,
 301         }),
 302         values: PropTypes.shape({
 303                 active_message: PropTypes.string,
 304                 cancel_message: PropTypes.string,
 305                 invalid_solution_message: PropTypes.string,
 306                 name: PropTypes.string,
 307                 no_winners_message: PropTypes.string,
 308                 not_active_message: PropTypes.string,
 309                 points_close_first: PropTypes.number,
 310                 points_close_max: PropTypes.number,
 311                 points_close_other: PropTypes.number,
 312                 points_exact_first: PropTypes.number,
 313                 points_exact_other: PropTypes.number,
 314                 start_message: PropTypes.string,
 315                 stop_message: PropTypes.string,
 316                 winners_message: PropTypes.string,
 317         }),
 318 };
 319
 320 export default withFormik({
 321         displayName: 'GuessingSettingsForm',
 322         enableReinitialize: true,
 323         handleSubmit: async (values, actions) => {
 324                 const { setErrors } = actions;
 325                 const { onSubmit } = actions.props;
 326                 try {
 327                         await onSubmit(values);
 328                 } catch (e) {
 329                         if (e.response && e.response.data && e.response.data.errors) {
 330                                 setErrors(laravelErrorsToFormik(e.response.data.errors));
 331                         }
 332                 }
 333         },
 334         mapPropsToValues: ({ name, settings }) => {
 335                 const getNumericValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
 336                         ? s[n] : d;
 337                 const getStringValue = (s, n, d) => s && Object.prototype.hasOwnProperty.call(s, n)
 338                         ? s[n] : i18n.t(`twitchBot.guessingGame.default${d}`);
 339                 return {
 340                         active_message: getStringValue(settings, 'active_message', 'ActiveMessage'),
 341                         cancel_message: getStringValue(settings, 'cancel_message', 'CancelMessage'),
 342                         invalid_solution_message:
 343                                 getStringValue(settings, 'invalid_solution_message', 'InvalidSolutionMessage'),
 344                         name: name || '',
 345                         no_winners_message: getStringValue(settings, 'no_winners_message', 'NoWinnersMessage'),
 346                         not_active_message: getStringValue(settings, 'not_active_message', 'NotActiveMessage'),
 347                         points_close_first: getNumericValue(settings, 'points_close_first', 1),
 348                         points_close_max: getNumericValue(settings, 'points_close_max', 3),
 349                         points_close_other: getNumericValue(settings, 'points_close_other', 1),
 350                         points_exact_first: getNumericValue(settings, 'points_exact_first', 1),
 351                         points_exact_other: getNumericValue(settings, 'points_exact_other', 1),
 352                         start_message: getStringValue(settings, 'start_message', 'StartMessage'),
 353                         stop_message: getStringValue(settings, 'stop_message', 'StopMessage'),
 354                         winners_message: getStringValue(settings, 'winners_message', 'WinnersMessage'),
 355                 };
 356         },
 357         validationSchema: yup.object().shape({
 358                 active_message: yup.string(),
 359                 cancel_message: yup.string(),
 360                 invalid_solution_message: yup.string(),
 361                 name: yup.string().required(),
 362                 no_winners_message: yup.string(),
 363                 not_active_message: yup.string(),
 364                 points_close_first: yup.number(),
 365                 points_close_max: yup.number(),
 366                 points_close_other: yup.number(),
 367                 points_exact_first: yup.number(),
 368                 points_exact_other: yup.number(),
 369                 start_message: yup.string(),
 370                 stop_message: yup.string(),
 371                 winners_message: yup.string(),
 372         }),
 373 })(GuessingSettingsForm);