From b96b904d3491cdab920c69bed5bf9bae60d2df11 Mon Sep 17 00:00:00 2001 From: Werner Date: Thu, 8 Jun 2023 18:31:16 -0300 Subject: [PATCH] Add formik --- package.json | 1 + pages/index.js | 210 ++++++++++++++++++++++++++++++------------------ pages/runner.js | 69 +++------------- yarn.lock | 52 +++++++++++- 4 files changed, 195 insertions(+), 137 deletions(-) diff --git a/package.json b/package.json index df57085..2342598 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "bootstrap": "^5.3.0", + "formik": "^2.4.1", "next": "13.4.4", "react": "18.2.0", "react-bootstrap": "^2.7.4", diff --git a/pages/index.js b/pages/index.js index 43ebf4c..5943a4b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -14,17 +14,58 @@ import Button from 'react-bootstrap/Button'; import { useRouter } from 'next/router'; import { useContext } from 'react'; import { ProgramContext } from '../src/ProgramContext'; +import * as formik from "formik"; export default function Home() { + const { Formik } = formik; + const router = useRouter(); const { updateProgram } = useContext(ProgramContext); - const handleClick = () => { - updateProgram(instructionList); + const handleClick = async (values) => { + console.log(JSON.stringify(values)); + updateProgram(values); router.push('/runner'); }; - let [instructionList, setInstructionList] = useState([{}, {}, {}, {}, {}, {}]); + let instructionList = [ + { + operacao: "LD", + registradorR: "F6", + registradorS: "34", + registradorT: "R1", + }, + { + operacao: "LD", + registradorR: "F2", + registradorS: "45", + registradorT: "R3", + }, + { + operacao: "MULTD", + registradorR: "F0", + registradorS: "F2", + registradorT: "F4", + }, + { + operacao: "SUBD", + registradorR: "F8", + registradorS: "F6", + registradorT: "F2", + }, + { + operacao: "DIVD", + registradorR: "F10", + registradorS: "F0", + registradorT: "F6", + }, + { + operacao: "ADDD", + registradorR: "F6", + registradorS: "F8", + registradorT: "F2", + } + ]; return ( <> @@ -47,79 +88,96 @@ export default function Home() {
- - -

Instructions

- - - - - - - - - - - - - - - - - - {instructionList.map((d, i) => ( - - - - - - - ))} - -
OPRDRSRT
- - - - - - - - - - - - - - - - - - - -
- - + + {({ handleSubmit, handleChange, values, touched, errors }) => ( +
+ + +

Instructions

+ + + + + + + + + + + + + + + + + + {instructionList.map((d, i) => ( + + + + + + + ))} + +
OPRDRSRT
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ )} +
diff --git a/pages/runner.js b/pages/runner.js index 843c46a..9742810 100644 --- a/pages/runner.js +++ b/pages/runner.js @@ -15,6 +15,8 @@ import { ProgramContext } from '../src/ProgramContext'; export default function Home() { const { program } = useContext(ProgramContext); + console.log(JSON.stringify(program)); + let baseI = { issue: null, exeCompleta: null, @@ -22,68 +24,15 @@ export default function Home() { busy: false, } - let instructions = [ - { + let instructions = []; + + for (let i = 0; i < program.length; i++) { + instructions[i] = { posicao: 0, - instrucao: { - operacao: "LD", - registradorR: "F6", - registradorS: "32", - registradorT: "R1", - }, + instrucao: program[i], ...baseI, - }, - { - posicao: 1, - instrucao: { - operacao: "LD", - registradorR: "F2", - registradorS: "45", - registradorT: "R3", - }, - ...baseI, - }, - { - posicao: 2, - instrucao: { - operacao: "MULTD", - registradorR: "F0", - registradorS: "F2", - registradorT: "F4", - }, - ...baseI, - }, - { - posicao: 3, - instrucao: { - operacao: "SUBD", - registradorR: "F8", - registradorS: "F6", - registradorT: "F2", - }, - ...baseI, - }, - { - posicao: 4, - instrucao: { - operacao: "DIVD", - registradorR: "F10", - registradorS: "F0", - registradorT: "F6", - }, - ...baseI, - }, - { - posicao: 5, - instrucao: { - operacao: "ADDD", - registradorR: "F6", - registradorS: "F8", - registradorT: "F2", - }, - ...baseI, - } - ]; + }; + } let baseFu = { instrucao: null, diff --git a/yarn.lock b/yarn.lock index 10beb03..b432019 100644 --- a/yarn.lock +++ b/yarn.lock @@ -170,6 +170,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + dequal@^2.0.2, dequal@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" @@ -183,6 +188,26 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1: "@babel/runtime" "^7.8.7" csstype "^3.0.2" +formik@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.1.tgz#f2630b51a866c86144a5faf68d31200c9d8ceea9" + integrity sha512-ajOB9EmFhXb4PACTlaooVEn7PLtLtBJEZ8fPs+wFZjL5KSGwgAoU+n9DHN8JcqNKcXkloEYYtn1lxrLav18ecQ== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" @@ -195,6 +220,16 @@ invariant@^2.2.4: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -292,7 +327,12 @@ react-dom@18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1, react-is@^16.3.2: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -348,6 +388,16 @@ styled-jsx@5.1.1: dependencies: client-only "0.0.1" +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + +tslib@^1.10.0: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + tslib@^2.4.0: version "2.5.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"