fix(stores): refactor and fixes saving invalid settings

Refactors stores and fixes invalid settings being saved when saving site_id_requested, pwa_active or amp_active. fixes #85
wp-pwa · Jan 4, 2019 · fe2111b · fe2111b
1 parent c6b4849
commit fe2111b
Show file tree

Hide file tree

Showing 14 changed files with 407 additions and 364 deletions.
diff --git a/admin/components/Home/RequestForm.js b/admin/components/Home/RequestForm.js
@@ -12,21 +12,21 @@ import {
 } from "grommet";
 
 const RequestForm = ({
-  requestFormName,
-  requestFormEmail,
-  requestFormUrl,
-  requestFormType,
-  requestFormTraffic,
-  requestFormNameStatus,
-  requestFormEmailStatus,
-  requestFormUrlStatus,
-  requestFormTypeStatus,
-  requestFormTrafficStatus,
-  setRequestFormName,
-  setRequestFormEmail,
-  setRequestFormUrl,
-  setRequestFormType,
-  setRequestFormTraffic,
+  name,
+  email,
+  url,
+  type,
+  traffic,
+  nameValidation,
+  emailValidation,
+  urlValidation,
+  typeValidation,
+  trafficValidation,
+  setName,
+  setEmail,
+  setUrl,
+  setType,
+  setTraffic,
   requestTitleText,
   requestContentText,
   requestFieldName,
@@ -45,50 +45,50 @@ const RequestForm = ({
       </Comment>
       <FormField label={requestFieldName.label}>
         <StyledTextInput
-          status={requestFormNameStatus}
+          status={nameValidation}
           placeholder={requestFieldName.placeholder}
-          value={requestFormName}
-          onChange={setRequestFormName}
+          value={name}
+          onChange={setName}
         />
       </FormField>
       <FormField label={requestFieldEmail.label}>
         <StyledTextInput
-          status={requestFormEmailStatus}
+          status={emailValidation}
           placeholder={requestFieldEmail.placeholder}
-          value={requestFormEmail}
-          onChange={setRequestFormEmail}
+          value={email}
+          onChange={setEmail}
         />
       </FormField>
       <FormField label={requestFieldUrl.label}>
         <StyledTextInput
-          status={requestFormUrlStatus}
+          status={urlValidation}
           placeholder={requestFieldUrl.placeholder}
-          value={requestFormUrl}
-          onChange={setRequestFormUrl}
+          value={url}
+          onChange={setUrl}
         />
       </FormField>
       <Box margin={{ top: "24px" }} direction="row" justify="between">
-        <RadioBox status={requestFormTypeStatus}>
+        <RadioBox status={typeValidation}>
           <RadioHead>{requestFieldType.label}</RadioHead>
           {requestFieldType.options.map(value => (
             <RadioButton
               key={value}
               label={value}
               name={value}
-              checked={requestFormType === value}
-              onChange={setRequestFormType}
+              checked={type === value}
+              onChange={setType}
             />
           ))}
         </RadioBox>
-        <RadioBox status={requestFormTrafficStatus}>
+        <RadioBox status={trafficValidation}>
           <RadioHead>{requestFieldTraffic.label}</RadioHead>
           {requestFieldTraffic.options.map(option => (
             <RadioButton
               key={option}
               label={option}
               name={option}
-              checked={requestFormTraffic === option}
-              onChange={setRequestFormTraffic}
+              checked={traffic === option}
+              onChange={setTraffic}
             />
           ))}
         </RadioBox>
@@ -98,21 +98,21 @@ const RequestForm = ({
 );
 
 RequestForm.propTypes = {
-  requestFormName: string.isRequired,
-  requestFormEmail: string.isRequired,
-  requestFormUrl: string.isRequired,
-  requestFormType: string.isRequired,
-  requestFormTraffic: string.isRequired,
-  requestFormNameStatus: string,
-  requestFormEmailStatus: string,
-  requestFormUrlStatus: string,
-  requestFormTypeStatus: string,
-  requestFormTrafficStatus: string,
-  setRequestFormName: func.isRequired,
-  setRequestFormEmail: func.isRequired,
-  setRequestFormUrl: func.isRequired,
-  setRequestFormType: func.isRequired,
-  setRequestFormTraffic: func.isRequired,
+  name: string.isRequired,
+  email: string.isRequired,
+  url: string.isRequired,
+  type: string.isRequired,
+  traffic: string.isRequired,
+  nameValidation: string,
+  emailValidation: string,
+  urlValidation: string,
+  typeValidation: string,
+  trafficValidation: string,
+  setName: func.isRequired,
+  setEmail: func.isRequired,
+  setUrl: func.isRequired,
+  setType: func.isRequired,
+  setTraffic: func.isRequired,
   requestTitleText: string.isRequired,
   requestContentText: string.isRequired,
   requestFieldName: shape({ label: string, placeholder: string }).isRequired,
@@ -125,47 +125,32 @@ RequestForm.propTypes = {
 };
 
 RequestForm.defaultProps = {
-  requestFormNameStatus: undefined,
-  requestFormEmailStatus: undefined,
-  requestFormUrlStatus: undefined,
-  requestFormTypeStatus: undefined,
-  requestFormTrafficStatus: undefined,
+  nameValidation: undefined,
+  emailValidation: undefined,
+  urlValidation: undefined,
+  typeValidation: undefined,
+  trafficValidation: undefined,
 };
 
-export default inject(({ stores: { ui, languages } }) => {
+export default inject(({ stores: { request, validations, languages } }) => {
   const requestForm = "home.withoutSiteId.requestForm";
 
   return {
-    requestFormName: ui.requestFormName,
-    requestFormEmail: ui.requestFormEmail,
-    requestFormUrl: ui.requestFormUrl,
-    requestFormType: ui.requestFormType,
-    requestFormTraffic: ui.requestFormTraffic,
-    requestFormNameStatus: ui.requestFormNameStatus,
-    requestFormEmailStatus: ui.requestFormEmailStatus,
-    requestFormUrlStatus: ui.requestFormUrlStatus,
-    requestFormTypeStatus: ui.requestFormTypeStatus,
-    requestFormTrafficStatus: ui.requestFormTrafficStatus,
-    setRequestFormName: event => {
-      ui.setRequestFormNameStatus();
-      ui.setRequestFormName(event);
-    },
-    setRequestFormEmail: event => {
-      ui.setRequestFormEmailStatus();
-      ui.setRequestFormEmail(event);
-    },
-    setRequestFormUrl: event => {
-      ui.setRequestFormUrlStatus();
-      ui.setRequestFormUrl(event);
-    },
-    setRequestFormType: event => {
-      ui.setRequestFormTypeStatus();
-      ui.setRequestFormType(event);
-    },
-    setRequestFormTraffic: event => {
-      ui.setRequestFormTrafficStatus();
-      ui.setRequestFormTraffic(event);
-    },
+    name: request.name,
+    email: request.email,
+    url: request.url,
+    type: request.type,
+    traffic: request.traffic,
+    nameValidation: validations.request.name,
+    emailValidation: validations.request.email,
+    urlValidation: validations.request.url,
+    typeValidation: validations.request.type,
+    trafficValidation: validations.request.traffic,
+    setName: request.setName,
+    setEmail: request.setEmail,
+    setUrl: request.setUrl,
+    setType: request.setType,
+    setTraffic: request.setTraffic,
     requestTitleText: languages.get(`${requestForm}.title`),
     requestContentText: languages.get(`${requestForm}.content`),
     requestFieldName: languages.get(`${requestForm}.fieldName`),

diff --git a/admin/components/Home/SiteIdJustRequested.js b/admin/components/Home/SiteIdJustRequested.js
@@ -38,17 +38,17 @@ SiteIdJustRequested.propTypes = {
   setSiteIdJustRequested: func.isRequired,
 };
 
-export default inject(({ stores: { ui, languages } }) => {
+export default inject(({ stores: { general, languages } }) => {
   const siteIdJustRequested = "home.siteIdJustRequested";
 
   return {
+    setSiteIdJustRequested: () => {
+      general.setSiteIdJustRequested(false);
+    },
     emojiText: languages.get(`${siteIdJustRequested}.emoji`),
     titleText: languages.get(`${siteIdJustRequested}.title`),
     contentText: languages.get(`${siteIdJustRequested}.content`),
     linkText: languages.get(`${siteIdJustRequested}.link`),
-    setSiteIdJustRequested: () => {
-      ui.setSiteIdJustRequested(false);
-    },
   };
 })(SiteIdJustRequested);
 

diff --git a/admin/components/Home/SiteIdRequested.js b/admin/components/Home/SiteIdRequested.js
@@ -15,7 +15,7 @@ const SiteIdRequested = ({
   fieldSiteId,
   linkText,
   confirmButtonText,
-  siteIdStatus,
+  siteIdValidation,
 }) => (
   <form onSubmit={saveSettings}>
     <Container margin={{ top: "40px", bottom: "24px" }}>
@@ -24,7 +24,7 @@ const SiteIdRequested = ({
         <Comment>{contentText}</Comment>
         <FormField label={fieldSiteId.label}>
           <StyledTextInput
-            status={siteIdStatus}
+            status={siteIdValidation}
             placeholder={fieldSiteId.placeholder}
             value={siteId}
             onChange={setSiteId}
@@ -49,37 +49,27 @@ SiteIdRequested.propTypes = {
   fieldSiteId: shape({ label: string, placeholder: string }).isRequired,
   linkText: string.isRequired,
   confirmButtonText: string.isRequired,
-  siteIdStatus: string,
+  siteIdValidation: string,
 };
 
 SiteIdRequested.defaultProps = {
-  siteIdStatus: undefined,
+  siteIdValidation: undefined,
 };
 
-export default inject(({ stores: { settings, languages, ui } }) => {
+export default inject(({ stores: { settings, validations, languages } }) => {
   const siteIdRequested = "home.siteIdRequested";
 
   return {
     siteId: settings.site_id,
-    setSiteId: event => {
-      ui.setSiteIdStatus();
-      settings.setSiteId(event);
-    },
-    saveSettings: event => {
-      event.preventDefault();
-      ui.validateSettings();
-      settings.saveSettings();
-    },
-    setSiteIdRequested: () => {
-      settings.setSiteIdRequested(false);
-      settings.saveSettings();
-    },
+    setSiteId: settings.setSiteId,
+    saveSettings: settings.saveSettings,
+    setSiteIdRequested: () => settings.setSiteIdRequested(false),
     titleText: languages.get(`${siteIdRequested}.title`),
     contentText: languages.get(`${siteIdRequested}.content`),
     fieldSiteId: languages.get(`${siteIdRequested}.fieldSiteId`),
     linkText: languages.get(`${siteIdRequested}.link`),
     confirmButtonText: languages.get(`${siteIdRequested}.confirmButton`),
-    siteIdStatus: ui.siteIdStatus,
+    siteIdValidation: validations.settings.site_id,
   };
 })(SiteIdRequested);
 

diff --git a/admin/components/Home/WithoutSiteId.js b/admin/components/Home/WithoutSiteId.js
@@ -11,6 +11,7 @@ import RequestForm from "./RequestForm";
 import frontityThemeImage from "../../assets/frontity-theme.png";
 
 const WithoutSiteId = ({
+  siteUrl,
   siteIdRequested,
   siteIdJustRequested,
   sendRequest,
@@ -23,7 +24,6 @@ const WithoutSiteId = ({
   notifications,
   requestAlreadyLinkText,
   requestButtonText,
-  siteUrl,
 }) => {
   if (siteIdRequested)
     return siteIdJustRequested ? <SiteIdJustRequested /> : <SiteIdRequested />;
@@ -87,6 +87,7 @@ const WithoutSiteId = ({
 };
 
 WithoutSiteId.propTypes = {
+  siteUrl: string.isRequired,
   siteIdRequested: bool.isRequired,
   siteIdJustRequested: bool.isRequired,
   sendRequest: func.isRequired,
@@ -101,39 +102,30 @@ WithoutSiteId.propTypes = {
     .isRequired,
   requestAlreadyLinkText: string.isRequired,
   requestButtonText: string.isRequired,
-  siteUrl: string.isRequired,
 };
 
-export default inject(({ stores: { general, settings, ui, languages } }) => {
-  const description = "home.withoutSiteId.description";
-  const requestForm = "home.withoutSiteId.requestForm";
-
-  return {
-    siteIdRequested: settings.site_id_requested,
-    siteIdJustRequested: ui.siteIdJustRequested,
-    sendRequest: async () => {
-      if (ui.validateRequestForm()) {
-        await ui.sendRequest();
-        settings.setSiteIdRequested(true);
-        ui.setSiteIdJustRequested(true);
-        settings.saveSettings();
-      }
-    },
-    setSiteIdRequested: () => {
-      settings.setSiteIdRequested(true);
-      settings.saveSettings();
-    },
-    descriptionTitleText: languages.get(`${description}.title`),
-    descriptionContentText: languages.get(`${description}.content`),
-    descriptionFeatures: languages.get(`${description}.features`),
-    descriptionImageFooterText: languages.get(`${description}.imageFooter`),
-    descriptionButtonText: languages.get(`${description}.viewDemoButton`),
-    notifications: languages.get("home.withoutSiteId.notifications"),
-    requestAlreadyLinkText: languages.get(`${requestForm}.alreadyLink`),
-    requestButtonText: languages.get(`${requestForm}.requestButton`),
-    siteUrl: general.site,
-  };
-})(WithoutSiteId);
+export default inject(
+  ({ stores: { general, settings, request, languages } }) => {
+    const description = "home.withoutSiteId.description";
+    const requestForm = "home.withoutSiteId.requestForm";
+
+    return {
+      siteUrl: general.site,
+      siteIdRequested: settings.site_id_requested,
+      siteIdJustRequested: general.siteIdJustRequested,
+      sendRequest: request.sendRequest,
+      setSiteIdRequested: () => settings.setSiteIdRequested(true),
+      descriptionTitleText: languages.get(`${description}.title`),
+      descriptionContentText: languages.get(`${description}.content`),
+      descriptionFeatures: languages.get(`${description}.features`),
+      descriptionImageFooterText: languages.get(`${description}.imageFooter`),
+      descriptionButtonText: languages.get(`${description}.viewDemoButton`),
+      notifications: languages.get("home.withoutSiteId.notifications"),
+      requestAlreadyLinkText: languages.get(`${requestForm}.alreadyLink`),
+      requestButtonText: languages.get(`${requestForm}.requestButton`),
+    };
+  }
+)(WithoutSiteId);
 
 const Notification = styled(Box)`
   border-radius: 4px;