add creator 2nd step & onKeyPress helpermain

1 files changed, 42 insertions, 9 deletions

diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
index 647661e..3e2e05d 100644
--- a/client/src/admin/jsx/creator/Step1.jsx
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -1,11 +1,23 @@
 import React, { useState } from 'react';
 import { WithHover, t, goTo } from '../../hocs';
+import { onKeyPress } from '../../helpers'
 
-const Step1 = () => {
-  const [websiteTitle, setWebsiteTitle] = useState('');
-  const [websiteDescription, setWebsiteDescription] = useState('');
+const Step1 = ({ setStep, data, setData }) => {
+  const [websiteTitle, setWebsiteTitle] = useState(data.websiteTitle || '');
+  const [websiteDescription, setWebsiteDescription] = useState(data.websiteDescription || '');
   const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
 
+  const uploadFavicon = () => (
+    console.log('this will upload favicon')
+  )
+
+  const handleNext = () => {
+    if (isNextActive) {
+      setData({ ...data, websiteTitle, websiteDescription });
+      setStep('step2');
+    }
+  }
+
   return (
     <div className="creator">
       <div className="creator__header">{ t('main-information') }</div>
@@ -21,7 +33,9 @@ const Step1 = () => {
               className="text-input-field"
               value={websiteTitle}
             />
-            <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+            <label htmlFor="website-title" className="text-input-label">
+              {`${t('website-title')} (${websiteTitle.length})`}
+            </label>
           </div>
         </WithHover>
       </div>
@@ -32,16 +46,25 @@ const Step1 = () => {
               onChange={e => setWebsiteDescription(e.target.value)}
               id="website-description"
               name="website-description"
-              placeholder={t('website-description')}>
+              placeholder={t('website-description')}
+              value={websiteDescription}
+            >
             </textarea>
-            <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+            <label htmlFor="website-description" className="text-area-label">
+              {`${t('website-description')} (${websiteDescription.length})`}
+            </label>
           </div>
         </WithHover>
       </div>
       <div className="creator__input-line">
         <div className='creator__favicon'>
           <WithHover message="upload-favicon-hover">
-            <div className="creator__favicon-ico">+</div>
+            <div
+              className="creator__favicon-ico"
+              onKeyPress={onKeyPress}
+              onClick={uploadFavicon}
+              tabIndex="0"
+            >+</div>
           </WithHover>
           <span className="creator__favicon-text">
             {t('upload-favicon')}
@@ -50,12 +73,22 @@ const Step1 = () => {
       </div>
       <div className="creator__btns">
         <WithHover message="creator-cancel-hover">
-          <div onClick={goTo('main')} className="creator__btns-cancel">
+          <div
+            onClick={goTo('main')}
+            onKeyPress={onKeyPress}
+            className="creator__btns-cancel"
+            tabIndex="0"
+          >
             {t('cancel')}
           </div>
         </WithHover>
         <WithHover message="creator-next-hover">
-          <div className={`creator__btns-next ${isNextActive}`}>
+          <div
+            className={`creator__btns-next ${isNextActive}`}
+            onClick={handleNext}
+            onKeyPress={onKeyPress}
+            tabIndex={isNextActive ? "0" : "-1"}
+          >
             {t('next')}
           </div>
         </WithHover>