Add Randomizer sample component

Author: vadimkorr

src/App.js

@@ -1,8 +1,10 @@
 import './App.css'
+import { Randomizer } from './Randomizer'
 
 function App() {
   return (
     <div className="App">
+      <Randomizer />
     </div>
   )
 }

src/Randomizer/Randomizer.css

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react'
+import { take, prepend } from '../helpers/array'
+import { getRandomInt } from '../helpers/random'
+
+const NUMBERS_COUNT_TO_TAKE = 5
+
+const getNumbersString = (numbers, takeCount) =>
+  `${take(takeCount, numbers).join(', ')}${numbers.length > 5 ? ',...' : ''}`
+
+export const Randomizer = () => {
+  const [numbers, setNumbers] = useState([])
+  const [numbersString, setNumbersString] = useState()
+
+  useEffect(() => {
+    setNumbersString(getNumbersString(numbers, NUMBERS_COUNT_TO_TAKE))
+  }, [numbers])
+
+  const handleGenerate = () => {
+    const number = getRandomInt(0, 100)
+    setNumbers(prepend(number, numbers))
+  }
+
+  return (
+    <div>
+      <div>{numbersString || '<...>'}</div>
+      <button onClick={handleGenerate}>Generate</button>
+    </div>
+  )
+}

src/Randomizer/Randomizer.js

@@ -0,0 +1 @@
+export * from './Randomizer'

src/Randomizer/index.js

@@ -0,0 +1,7 @@
+export const concat = (arr1, arr2) => [...arr1, ...arr2]
+export const append = (item, arr) => [...arr, item]
+export const prepend = (item, arr) => [item, ...arr]
+export const take = (count, arr) => arr.slice(0, count)
+export const contains = (item, arr) => arr.includes(item)
+export const difference = (arr1, arr2) =>
+  arr1.filter((item) => arr2.includes(item))

src/helpers/array.js

@@ -0,0 +1,3 @@
+// [min, max]
+export const getRandomInt = (min, max) =>
+  Math.floor(min + Math.random() * (max + 1 - min))