From 4a9cf28660ed3b7e02952d02035978d1d4ad3e7e Mon Sep 17 00:00:00 2001
From: Piotr Russ <mail@pruss.it>
Date: Wed, 9 Dec 2020 23:26:30 +0100
Subject: add creator 2nd step & onKeyPress helper

---
 client/src/admin/jsx/MainScreen.jsx      | 22 ++++++++++++--
 client/src/admin/jsx/creator/Creator.jsx |  6 ++--
 client/src/admin/jsx/creator/Step1.jsx   | 51 ++++++++++++++++++++++++++------
 client/src/admin/jsx/creator/Step2.jsx   | 32 ++++++++++++++++++++
 4 files changed, 97 insertions(+), 14 deletions(-)
 create mode 100644 client/src/admin/jsx/creator/Step2.jsx

(limited to 'client/src/admin/jsx')

diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index ea2def5..8808dc5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { WithHover, t, goTo } from '../hocs';
+import { onKeyPress } from '../helpers'
 
 const MainScreen = ({ projects }) => (
   <div className="main-screen">
@@ -7,16 +8,31 @@ const MainScreen = ({ projects }) => (
     <div className="main-screen__list">
       { !projects.length && (
         <WithHover message="edit-current-project-hover">
-          <p className="main-screen__item">{ t('edit-current-project') }</p>
+          <p
+            className="main-screen__item"
+            tabIndex="0"
+          >
+            { t('edit-current-project') }
+          </p>
         </WithHover>
       )}
       { !projects.length && (
         <WithHover message="show-saved-projects-hover">
-          <p className="main-screen__item">{ t('show-saved-projects') }</p>
+          <p
+            className="main-screen__item"
+            tabIndex="0"
+          >
+            { t('show-saved-projects') }
+          </p>
         </WithHover>
       )}
       <WithHover message="create-new-project-hover">
-        <p className="main-screen__item" onClick={ goTo('creator') }>
+        <p
+          className="main-screen__item"
+          onClick={ goTo('creator') }
+          onKeyPress={onKeyPress}
+          tabIndex="0"
+        >
           { t('create-new-project') }
         </p>
       </WithHover>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
index 896235e..fa552b3 100644
--- a/client/src/admin/jsx/creator/Creator.jsx
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import Step1 from './Step1';
+import Step2 from './Step2';
 import { t, goTo } from '../../hocs';
 
 const Creator = ({projects}) => {
   const [step, setStep] = useState('step1');
+  const [data, setData] = useState({});
 
   switch(step) {
     case 'step1':
-      return <Step1 setStep={setStep} />;
+      return <Step1 setStep={setStep} data={data} setData={setData} />;
     case 'step2':
-      return null;
+      return <Step2 setStep={setStep} data={data} setData={setData} />;
     default:
       return null;
   }
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>
diff --git a/client/src/admin/jsx/creator/Step2.jsx b/client/src/admin/jsx/creator/Step2.jsx
new file mode 100644
index 0000000..d8ce009
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step2.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { WithHover, t } from '../../hocs';
+
+const Step2 = ({ setStep, data, setData }) => {
+  console.log(data)
+  const isNextActive = () => {}
+  const handleNext = () => {}
+
+  return (
+    <div className="creator">
+      <div className="creator__header">{ t('website-sections') }</div>
+        
+      <div className="creator__btns">
+        <WithHover message="creator-cancel-hover">
+          <div onClick={() => setStep('step1')} className="creator__btns-cancel">
+            {t('back')}
+          </div>
+        </WithHover>
+        <WithHover message="creator-next-hover">
+          <div
+            className={`creator__btns-next ${isNextActive}`}
+            onClick={handleNext}
+          >
+            {t('next')}
+          </div>
+        </WithHover>
+      </div>
+    </div>
+  )
+}
+
+export default Step2;
-- 
cgit v1.2.3