summaryrefslogtreecommitdiffstats
path: root/client/src/admin/jsx/creator/Step1.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/admin/jsx/creator/Step1.jsx')
-rw-r--r--client/src/admin/jsx/creator/Step1.jsx51
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>