Change Layout

src/App.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { RsvpReader } from './components/RsvpReader'
 import { SearchBar } from './components/SearchBar'
 
 import './App.css'
@@ -9,6 +8,11 @@ import { LangSelect } from './components/LangSelect'
 
 import { Container } from './styles/Container'
 import { Flex, FlexMain } from './styles/Flex'
+import { RsvpWidget } from 'components/RsvpWidget'
+import { Options } from 'components/Options'
+import { TextInput } from 'components/TextInput'
+import { TextOutput } from 'components/TextOutput'
+import { TotalTime } from 'components/TotalTime'
 
 export const App = () => {
   const { t } = useTranslation()
@@ -28,9 +32,21 @@ export const App = () => {
       <main>
         <Container>
           <h2>Widget</h2>
-          <RsvpReader></RsvpReader>
+          <RsvpWidget />
-          <h2>Text input</h2>
+          <Flex>
-          <h2>Options</h2>
+            <FlexMain padding="10px">
+              <h2>Options</h2>
+              <Options />
+            </FlexMain>
+            <FlexMain>
+              <h2>Text input</h2>
+              <TextInput />
+            </FlexMain>
+          </Flex>
+          <h2>Text Output</h2>
+          <TextOutput />
+          <h2>Time needed</h2>
+          <TotalTime />
         </Container>
       </main>
       <footer>

src/components/Offset.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'store'
+import { selectOffset } from 'store/selectors'
 
 /**
  * Wrapper that is of double width while hiding its overflow.
@@ -21,3 +23,8 @@ export const Offset = ({ offset = 0, children }) => {
 Offset.propTypes = {
   offset: PropTypes.number
 }
+
+export const RsvpOffset = ({ children }) => {
+  const offset = useSelector(selectOffset)
+  return <Offset offset={offset}>{children}</Offset>
+}

src/components/Options.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { debounce } from 'debounce'
 
 import { Slider } from './Slider'
 import { selectOffset, selectLang } from '../store/selectors'
@@ -17,20 +16,19 @@ export const Options = () => {
   const { setMaxLength, setWpm, setOffset, setLang } = useDispatch()
   return (
     <div>
-      <h2>{t('options.title')}</h2>
       <Slider
         title={t('options.maxLength')}
         min={3}
         max={15}
         value={maxLength}
-        onChange={debounce(val => setMaxLength(val), 100)}
+        onChange={val => setMaxLength(val)}
       />
       <Slider
         title={t('options.wpm')}
         min={100}
         max={1000}
         value={wpm}
-        onChange={debounce(val => setWpm(val), 50)}
+        onChange={val => setWpm(val)}
       />
       <Slider
         title={t('options.offset')}

src/components/RsvpReader.js

@@ -1,39 +1,20 @@
 import React from 'react'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
-import { SegmentControl } from './SegmentControl'
-import { Segment } from './Segment'
 import { Options } from './Options'
-import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
-import { Progress } from './Progress'
 import { TotalTime } from './TotalTime'
-import { Indicator } from './Indicator'
+import { RsvpWidget } from './RsvpWidget'
-import { Offset } from './Offset'
-import { useSelector } from '../store'
-import { selectCurrentSegment, selectOffset } from '../store/selectors'
 
 export const RsvpReader = () => {
-  const segment = useSelector(selectCurrentSegment)
-  const offset = useSelector(selectOffset)
   return (
     <div className={styles.container}>
       <div className={styles.item}>
         <TextInput />
       </div>
       <div className={styles.mainItem}>
-        <Progress />
+        <RsvpWidget />
-        <Offset offset={offset}>
-          <Indicator>
-            <Segment>{segment}</Segment>
-          </Indicator>
-        </Offset>
-        <div className={styles.controls}>
-          <SegmentControl>
-            <PlayerControl />
-          </SegmentControl>
-        </div>
         <Options></Options>
         <TotalTime />
       </div>

src/components/RsvpWidget.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Progress } from './Progress'
+import { RsvpOffset } from './Offset'
+import { Indicator } from './Indicator'
+import { RsvpSegment } from './Segment'
+import { SegmentControl } from './SegmentControl'
+import { PlayerControl } from './PlayerControl'
+
+export const RsvpWidget = () => {
+  return (
+    <>
+      <Progress />
+      <RsvpOffset>
+        <Indicator>
+          <RsvpSegment />
+        </Indicator>
+      </RsvpOffset>
+      <div style={{ textAlign: 'center' }}>
+        <SegmentControl>
+          <PlayerControl />
+        </SegmentControl>
+      </div>
+    </>
+  )
+}

src/components/Segment.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 
 import styles from './Segment.css'
 import { pivotize } from '../lib/pivotize'
+import { selectCurrentSegment } from 'store/selectors'
+import { useSelector } from 'store'
 
 export const Segment = ({ children = '' }) => {
   const [prefix, pivot, suffix] = pivotize(children)
@@ -18,3 +20,8 @@ export const Segment = ({ children = '' }) => {
 Segment.propTypes = {
   children: PropTypes.string.isRequired
 }
+
+export const RsvpSegment = () => {
+  const segment = useSelector(selectCurrentSegment)
+  return <Segment>{segment}</Segment>
+}

src/components/TextInput.css

@@ -1,7 +1,8 @@
 .area {
   box-sizing: border-box;
   width: 100%;
-  height: 300px;
+  height: 100px;
+  resize: vertical;
 }
 
 .load {

src/components/TotalTime.js

@@ -12,10 +12,5 @@ function formatTime(totalSeconds) {
 
 export const TotalTime = () => {
   const millis = useSelector(selectTotalTime)
-  return (
+  return <span>Time needed for Text: {formatTime(millis / 1000)}</span>
-    <div>
-      <h2>Time needed</h2>
-      Time needed for Text: {formatTime(millis / 1000)}
-    </div>
-  )
 }

src/store/index.js

@@ -36,7 +36,7 @@ const thunks = {
   decWord: () => {},
   incSentence: () => {},
   decSentence: () => {},
-  setMaxLength: length => ({ length }),
+  setMaxLength: maxLength => ({ maxLength }),
   setWpm: wpm => ({ wpm }),
   setOffset: offset => ({ offset }),
   start: () => {},
@@ -72,7 +72,7 @@ const store = createStore({
   reducer,
   thunks,
   initialState,
-  logging: true,
+  logging: false,
   warnOnUndefinedSelect: true
 })
 export const Provider = store.Provider

src/styles/Flex.js

@@ -10,6 +10,10 @@ export const Flex = ({ children, ...rest }) => {
   )
 }
 
-export const FlexMain = ({ children }) => {
+export const FlexMain = ({ children, ...rest }) => {
-  return <div className={styles.mainItem}>{children}</div>
+  return (
+    <div className={styles.mainItem} style={rest}>
+      {children}
+    </div>
+  )
 }