From 0c322fced1f027e255a02e34b94c126f7a2ab519 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Dec 2019 18:51:56 +0100
Subject: [PATCH] Add segment styling

---
 src/App.js                    |  2 --
 src/components/Options.js     |  2 +-
 src/components/PivotMarker.js | 11 +++++++++++
 src/components/RsvpReader.js  |  7 +++++--
 src/components/RsvpSegment.js |  8 --------
 src/components/Segment.css    | 14 ++++++++++++++
 src/components/Segment.js     | 16 ++++++++++++++++
 src/components/Slider.js      |  2 +-
 src/store/selectors.js        |  6 ++++++
 9 files changed, 54 insertions(+), 14 deletions(-)
 create mode 100644 src/components/PivotMarker.js
 delete mode 100644 src/components/RsvpSegment.js
 create mode 100644 src/components/Segment.css
 create mode 100644 src/components/Segment.js

diff --git a/src/App.js b/src/App.js
index 2a6afb7..6657576 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,8 +2,6 @@ import React from 'react'
 
 import { RsvpReader } from './components/RsvpReader'
 
-import { IconContext } from 'react-icons'
-
 export const App = () => {
   return <RsvpReader></RsvpReader>
 }
diff --git a/src/components/Options.js b/src/components/Options.js
index b1ace58..88c326d 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { debounce } from 'debounce'
 
diff --git a/src/components/PivotMarker.js b/src/components/PivotMarker.js
new file mode 100644
index 0000000..2d38e6e
--- /dev/null
+++ b/src/components/PivotMarker.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const PipeMarker = ({ children }) => {
+  return (
+    <div>
+      <div style={{ textAlign: 'center' }}>|</div>
+      {children}
+      <div style={{ textAlign: 'center' }}>|</div>
+    </div>
+  )
+}
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 04925c9..0174004 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -2,11 +2,12 @@ import React from 'react'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
 import { SegmentControl } from './SegmentControl'
-import { RsvpSegment } from './RsvpSegment'
+import { Segment } from './Segment'
 import { Options } from './Options'
 import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
+import { PipeMarker } from './PivotMarker'
 
 export const RsvpReader = () => {
   return (
@@ -15,7 +16,9 @@ export const RsvpReader = () => {
         <TextInput />
       </div>
       <div className={styles.mainItem}>
-        <RsvpSegment />
+        <PipeMarker>
+          <Segment />
+        </PipeMarker>
         <SegmentControl>
           <PlayerControl />
         </SegmentControl>
diff --git a/src/components/RsvpSegment.js b/src/components/RsvpSegment.js
deleted file mode 100644
index a704f59..0000000
--- a/src/components/RsvpSegment.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { selectCurrentSegment } from '../store/selectors'
-
-export const RsvpSegment = () => {
-  const segment = useSelector(selectCurrentSegment)
-  return <div>{segment}</div>
-}
diff --git a/src/components/Segment.css b/src/components/Segment.css
new file mode 100644
index 0000000..5e83510
--- /dev/null
+++ b/src/components/Segment.css
@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  font-size: 2.4em;
+}
+.pivot {
+  color: red;
+}
+.prefix {
+  flex: 1;
+  text-align: right;
+}
+.suffix {
+  flex: 1;
+}
diff --git a/src/components/Segment.js b/src/components/Segment.js
new file mode 100644
index 0000000..9b1a17f
--- /dev/null
+++ b/src/components/Segment.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectPivotizedSegment } from '../store/selectors'
+
+import styles from './Segment.css'
+
+export const Segment = () => {
+  const [prefix, pivot, suffix] = useSelector(selectPivotizedSegment)
+  return (
+    <div className={styles.container}>
+      <span className={styles.prefix}>{prefix}</span>
+      <span className={styles.pivot}>{pivot}</span>
+      <span className={styles.suffix}>{suffix}</span>
+    </div>
+  )
+}
diff --git a/src/components/Slider.js b/src/components/Slider.js
index 235107e..0f4c771 100644
--- a/src/components/Slider.js
+++ b/src/components/Slider.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
 import styles from './Slider.css'
 
diff --git a/src/store/selectors.js b/src/store/selectors.js
index 69a5d47..0b95322 100644
--- a/src/store/selectors.js
+++ b/src/store/selectors.js
@@ -2,6 +2,7 @@ import { createSelector } from 'reselect'
 import { parseText } from '../lib/parseText'
 
 import { getNextBiggerNumber, getNextSmallerNumber } from '../lib/array-util.js'
+import { pivotize } from '../lib/pivotize'
 
 // parsedText selectors
 
@@ -26,6 +27,11 @@ export const selectCurrentSegment = createSelector(
   (parsedText, curIdx) => parsedText.segments[curIdx]
 )
 
+export const selectPivotizedSegment = createSelector(
+  selectCurrentSegment,
+  pivotize
+)
+
 export const hasNextSegment = createSelector(
   selectSegments,
   selectCurrentSegmentIndex,