Merge pull request #3677 from webkom/survey-stuff

webkom · Mar 15, 2023 · 2908860 · 2908860
2 parents 93158ab + bee93d3
commit 2908860
Show file tree

Hide file tree

Showing 15 changed files with 345 additions and 357 deletions.
diff --git a/app/components/Content/ContentSidebar.tsx b/app/components/Content/ContentSidebar.tsx
@@ -15,7 +15,7 @@ type Props = {
  */
 function ContentSidebar({ children, className }: Props) {
   return (
-    <Flex column className={cx(styles.sidebar, className)}>
+    <Flex column gap={7} className={cx(styles.sidebar, className)}>
       {children}
     </Flex>
   );

diff --git a/app/components/Form/Field.tsx b/app/components/Form/Field.tsx
@@ -72,16 +72,15 @@ export type FormProps = {
   fieldClassName?: string;
   labelClassName?: string;
   showErrors?: boolean;
+  onChange?: (value: string) => void;
 };
 type Options = {
   // Removes the html <label> around the component
   noLabel?: boolean;
 };
 
 /**
- * Wraps Component, so it works with redux-form/react-final-form and add some
- * default field behaviour.
- *
+ * Wraps field component
  * http://redux-form.com/6.0.5/docs/api/Field.md/
  * https://final-form.org/docs/react-final-form/api/Field
  */
@@ -96,6 +95,7 @@ export function createField(Component: ComponentType<any>, options?: Options) {
       description,
       fieldClassName,
       labelClassName,
+      onChange,
       showErrors = true,
       className = null,
       ...props
@@ -132,6 +132,10 @@ export function createField(Component: ComponentType<any>, options?: Options) {
         <Component
           {...input}
           {...props}
+          onChange={(value) => {
+            input.onChange(value);
+            onChange?.(value);
+          }}
           className={cx(
             className,
             hasWarning && styles.inputWithWarning,

diff --git a/app/routes/events/components/EventDetail/EventDetail.css b/app/routes/events/components/EventDetail/EventDetail.css
@@ -52,7 +52,6 @@
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
-  margin-bottom: 10px;
 }
 
 .registeredBox {

diff --git a/app/routes/surveys/AddSurveyRoute.ts b/app/routes/surveys/AddSurveyRoute.ts
@@ -2,7 +2,6 @@ import { push } from 'connected-react-router';
 import qs from 'qs';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { formValueSelector } from 'redux-form';
 import { fetchEvent } from 'app/actions/EventActions';
 import { LoginPage } from 'app/components/LoginForm';
 import { selectEventById } from 'app/reducers/events';
@@ -69,7 +68,6 @@ const mapStateToProps = (state, props) => {
     }
   }
 
-  const formSelector = formValueSelector('surveyEditor');
   return {
     template,
     selectedTemplateType,
@@ -79,7 +77,6 @@ const mapStateToProps = (state, props) => {
       event: event && fullEvent,
     },
     notFetching,
-    activeFrom: formSelector(state, 'activeFrom') || defaultActiveFrom(12, 0),
   };
 };
 

diff --git a/app/routes/surveys/EditSurveyRoute.ts b/app/routes/surveys/EditSurveyRoute.ts
@@ -3,7 +3,6 @@ import moment from 'moment-timezone';
 import qs from 'qs';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { formValueSelector } from 'redux-form';
 import {
   editSurvey,
   fetchSurvey,
@@ -81,7 +80,6 @@ const mapStateToProps = (state, props) => {
   const surveyToSend = template
     ? { ...survey, questions: template.questions }
     : survey;
-  const formSelector = formValueSelector('surveyEditor');
   return {
     survey: surveyToSend,
     surveyId,
@@ -90,7 +88,6 @@ const mapStateToProps = (state, props) => {
     selectedTemplateType: templateType,
     initialValues,
     notFetching,
-    activeFrom: formSelector(state, 'activeFrom'),
   };
 };
 

diff --git a/app/routes/surveys/TemplatesRoute.ts b/app/routes/surveys/TemplatesRoute.ts
@@ -3,15 +3,14 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { LoginPage } from 'app/components/LoginForm';
 import { selectSurveyTemplates } from 'app/reducers/surveys';
-import loadingIndicator from 'app/utils/loadingIndicator';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
 import { addSurvey, fetchTemplates } from '../../actions/SurveyActions';
 import SurveyPage from './components/SurveyList/SurveyPage';
 
 const mapStateToProps = (state, props) => ({
   surveys: selectSurveyTemplates(state, props),
-  notFetching: !state.surveys.fetching,
+  fetching: state.surveys.fetching,
 });
 
 const mapDispatchToProps = {
@@ -23,6 +22,5 @@ export default compose(
   withPreparedDispatch('fetchTemplates', (props, dispatch) =>
     dispatch(fetchTemplates())
   ),
-  connect(mapStateToProps, mapDispatchToProps),
-  loadingIndicator(['notFetching'])
+  connect(mapStateToProps, mapDispatchToProps)
 )(SurveyPage);
diff --git a/app/routes/surveys/components/AdminSideBar.tsx b/app/routes/surveys/components/AdminSideBar.tsx
@@ -50,75 +50,76 @@ class AdminSideBar extends Component<Props, State> {
       : `${config.webUrl}/surveys/${surveyId}/results/?token=${token}`;
     return (
       canEdit && (
-        <ContentSidebar className={styles.adminSideBar}>
-          <strong>Admin</strong>
-          <ul>
-            <li>
-              <Link to="/surveys/add">Ny undersøkelse</Link>
-            </li>
-            <li>
-              <Link to={`/surveys/${surveyId}/edit`}>Endre undersøkelsen</Link>
-            </li>
-            {actionGrant && actionGrant.includes('edit') && shareSurvey && (
-              <CheckBox
-                id="shareSurvey"
-                label="Del spørreundersøkelsen"
-                onChange={() =>
-                  token ? hideSurvey(surveyId) : shareSurvey(surveyId)
-                }
-                value={!!token}
-              />
-            )}
-            {token && (
-              <li>
+        <ContentSidebar>
+          <h3>Admin</h3>
+
+          <Link to="/surveys/add">
+            <Button>
+              <Icon name="add" size={19} />
+              Ny undersøkelse
+            </Button>
+          </Link>
+
+          <Link to={`/surveys/${surveyId}/edit`}>
+            <Button>
+              <Icon name="create-outline" size={19} />
+              Rediger
+            </Button>
+          </Link>
+
+          {actionGrant && actionGrant.includes('csv') && exportSurvey && (
+            <div>
+              {generatedCSV ? (
+                <a href={generatedCSV.url} download={generatedCSV.filename}>
+                  Last ned
+                </a>
+              ) : (
                 <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(shareLink).then(() => {
-                      this.setState({
-                        copied: true,
-                      });
-                      setTimeout(
-                        () =>
-                          this.setState({
-                            copied: false,
-                          }),
-                        2000
-                      );
-                    });
-                  }}
-                  className={cx(this.state.copied && styles.copied)}
+                  onClick={async () =>
+                    this.setState({
+                      generatedCSV: await exportSurvey(surveyId),
+                    })
+                  }
                 >
-                  <Icon
-                    name={this.state.copied ? 'checkmark' : 'copy-outline'}
-                  />
-                  {this.state.copied ? 'Kopiert!' : 'Kopier delbar link'}
+                  Eksporter til CSV
                 </Button>
-              </li>
-            )}
-            {actionGrant && actionGrant.includes('csv') && exportSurvey && (
-              <div
-                style={{
-                  marginTop: '5px',
-                }}
-              >
-                {generatedCSV ? (
-                  <a href={generatedCSV.url} download={generatedCSV.filename}>
-                    Last ned
-                  </a>
-                ) : (
-                  <Button
-                    onClick={async () =>
+              )}
+            </div>
+          )}
+
+          {actionGrant && actionGrant.includes('edit') && shareSurvey && (
+            <CheckBox
+              id="shareSurvey"
+              label="Del spørreundersøkelsen"
+              onChange={() =>
+                token ? hideSurvey(surveyId) : shareSurvey(surveyId)
+              }
+              value={!!token}
+            />
+          )}
+
+          {token && (
+            <Button
+              onClick={() => {
+                navigator.clipboard.writeText(shareLink).then(() => {
+                  this.setState({
+                    copied: true,
+                  });
+                  setTimeout(
+                    () =>
                       this.setState({
-                        generatedCSV: await exportSurvey(surveyId),
-                      })
-                    }
-                  >
-                    Eksporter til CSV
-                  </Button>
-                )}
-              </div>
-            )}
-          </ul>
+                        copied: false,
+                      }),
+                    2000
+                  );
+                });
+              }}
+              success={this.state.copied}
+            >
+              <Icon name={this.state.copied ? 'checkmark' : 'copy-outline'} />
+              {this.state.copied ? 'Kopiert!' : 'Kopier delbar link'}
+            </Button>
+          )}
         </ContentSidebar>
       )
     );

diff --git a/app/routes/surveys/components/SubmissionEditor/SubmissionEditor.tsx b/app/routes/surveys/components/SubmissionEditor/SubmissionEditor.tsx
@@ -25,10 +25,8 @@ type Props = {
 
 const SubmissionEditor = ({
   survey,
-  fetching,
   submitting,
   handleSubmit,
-  submitFunction,
   error,
 }: Props) => {
   return (

diff --git a/app/routes/surveys/components/SurveyEditor/Option.tsx b/app/routes/surveys/components/SurveyEditor/Option.tsx
@@ -1,4 +1,4 @@
-import { Field } from 'redux-form';
+import { Field } from 'react-final-form';
 import Button from 'app/components/Button';
 import { RadioButton, TextInput, CheckBox } from 'app/components/Form';
 import { QuestionTypes } from 'app/routes/surveys/utils';
@@ -47,7 +47,7 @@ const MultipleChoice = (props: Props) => {
 const Checkbox = (props: Props) => {
   return (
     <li>
-      <CheckBox checked={false} className={styles.option} />
+      <CheckBox defaultChecked={false} className={styles.option} />
       <Field
         onChange={props.onChange}
         name={`${props.option}.optionText`}

diff --git a/app/routes/surveys/components/SurveyEditor/Question.tsx b/app/routes/surveys/components/SurveyEditor/Question.tsx
@@ -1,4 +1,5 @@
-import { Field, FieldArray } from 'redux-form';
+import { Field } from 'react-final-form';
+import { FieldArray } from 'react-final-form-arrays';
 import {
   TextInput,
   TextArea,
@@ -16,18 +17,15 @@ import {
 import styles from '../surveys.css';
 import Option from './Option';
 import type { ReactNode } from 'react';
-import type { FieldArrayProps } from 'redux-form';
-import type { $PropertyType } from 'utility-types';
 
-type Fields = $PropertyType<FieldArrayProps, 'fields'>;
 type Props = {
   deleteQuestion: (arg0: number) => Promise<any>;
   questionData: Record<string, any>;
   question: string;
   relativeIndex: number;
   numberOfQuestions: number;
-  updateRelativeIndexes: (arg0: number, arg1: number, arg2: Fields) => void;
-  fields: Fields;
+  updateRelativeIndexes: (arg0: number, arg1: number, arg2: any) => void;
+  fields: any;
   option?: string;
   value?: string;
 };
@@ -53,6 +51,7 @@ const Question = ({
   fields,
 }: Props) => {
   const indexOptions = questionIndexMappings(numberOfQuestions);
+
   return (
     <div className={styles.question}>
       <div className={styles.left}>
@@ -70,7 +69,7 @@ const Question = ({
         {questionData.questionType.value === QuestionTypes('text') ? (
           <TextArea
             className={styles.freeText}
-            placeholder="Fritekst - sånn vil den se ut :smile:"
+            placeholder="Fritekst - sånn her vil den se ut :smile:"
             value=""
             disabled
           />
@@ -174,7 +173,7 @@ const renderOptions = ({
   fields,
   questionType,
 }: {
-  fields: Fields;
+  fields: any;
   questionType: string;
 }): ReactNode => (
   <ul className={styles.options}>