Choix contraint de l'objectif de calcul

source/sites/publi.codes/Landing.js

@@ -4,7 +4,7 @@ import ColoredYaml from 'Components/rule/ColoredYaml'
 import React, { useEffect } from 'react'
 import emoji from 'react-easy-emoji'
 import { Header } from './Header'
-import Yo from './Yo'
+import Studio from './Studio'
 
 export default function Landing() {
 	useEffect(() => {
@@ -24,7 +24,7 @@ export default function Landing() {
 		<div className="app-container">
 			<div className="app-content ui__ container">
 				<Header />
-				<Yo />
+				<Studio />
 				<h2>Pourquoi ?</h2>
 				<p>
 					Certains algorithmes sont bien trop importants pour être maintenus

source/sites/publi.codes/Studio.js

@@ -3,9 +3,11 @@ import { buildFlatRules } from 'Engine/rules'
 import { safeLoad } from 'js-yaml'
 import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
+import {
+	analysisWithDefaultsSelector,
+	flatRulesSelector
+} from 'Selectors/analyseSelectors'
 import { setSimulationConfig } from '../../actions/actions'
-
 let initialInput = `
 
 a: 
@@ -36,7 +38,7 @@ export function Studio() {
 	const [target, setTarget] = useState(defaultTarget)
 
 	const dispatch = useDispatch()
-	const stateConfig = useSelector(state => state.simulation?.config)
+	const flatRules = useSelector(state => flatRulesSelector(state))
 
 	const [isEditorReady, setIsEditorReady] = useState(false)
 	const valueGetter = useRef()
@@ -73,10 +75,26 @@ export function Studio() {
 				value={initialInput}
 				editorDidMount={handleEditorDidMount}
 			/>
-			<h3>Que voulez-vous calculer ?</h3>
-			<input value={target} onChange={e => setTarget(e.target.value)} />
+			<label>
+				Que voulez-vous calculer ?{' '}
+				<select
+					name="pets"
+					id="pet-select"
+					onChange={e => setTarget(e.target.value)}
+				>
+					{flatRules.map(({ dottedName, title }) => (
+						<option key={dottedName} value={dottedName}>
+							{title}
+						</option>
+					))}
+				</select>
+			</label>
 			<br />
-			<button onClick={handleShowValue} disabled={!isEditorReady}>
+			<button
+				className="ui__ button"
+				onClick={handleShowValue}
+				disabled={!isEditorReady}
+			>
 				Calculer
 			</button>
 			{ready && <Results />}