From 1a6179d8fcffcdb4dab79d2a06e25627eb85ab94 Mon Sep 17 00:00:00 2001
From: manuconcepbrito <manu041196@gmail.com>
Date: Mon, 18 Oct 2021 15:12:24 +0200
Subject: [PATCH] use react bootstrap for AddSession toggle
---
wahlfang_web/package.json | 3 ++-
.../src/pages/management/AddSession.js | 20 +++++++------------
wahlfang_web/src/state/management.js | 4 ----
3 files changed, 9 insertions(+), 18 deletions(-)
diff --git a/wahlfang_web/package.json b/wahlfang_web/package.json
index bc8157f..0f60011 100644
--- a/wahlfang_web/package.json
+++ b/wahlfang_web/package.json
@@ -6,10 +6,11 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
- "bootstrap": "^5.0.1",
+ "bootstrap": "^5.1.1",
"formik": "^2.2.9",
"moment": "^2.29.1",
"react": "^17.0.2",
+ "react-bootstrap": "^2.0.0-rc.1",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
diff --git a/wahlfang_web/src/pages/management/AddSession.js b/wahlfang_web/src/pages/management/AddSession.js
index 32fecb6..a86f4f8 100644
--- a/wahlfang_web/src/pages/management/AddSession.js
+++ b/wahlfang_web/src/pages/management/AddSession.js
@@ -1,5 +1,4 @@
-import React from "react";
-import { Collapse } from 'reactstrap';
+import React, {useState} from 'react';
// import {useHistory, useParams} from "react-router-dom";
import Layout from "../../components/Layout";
// import {useFormik} from "formik";
@@ -8,10 +7,11 @@ import Layout from "../../components/Layout";
import {toggleAddSession} from "../../state/management"
import { Formik, Form, Field } from 'formik';
import {useRecoilState} from "recoil";
+import Collapse from 'react-bootstrap/Collapse';
export default function AddSession() {
- const [toggle, setToggle] = useRecoilState(toggleAddSession);
+ const [toggle, setToggle] = useState(false);
const handleSubmit = (values, {setSubmitting}) => {
@@ -33,13 +33,7 @@ export default function AddSession() {
// Render Prop
const handleToggle = () => {
- if (toggle) {
- console.log("Value toggle " + toggle)
- setToggle(false)
- } else {
- console.log("Value toggle " + toggle)
- setToggle(true)
- }
+ setToggle(!toggle)
}
const Basic = () => (
@@ -103,7 +97,7 @@ export default function AddSession() {
>
<span className="card-title">Advanced Options</span>
</div>
- <Collapse isOpen={toggle}>
+ <Collapse in={toggle}>
<div id="collapseOne"
className="card-body ">
<h5>Invite email template text</h5>
@@ -154,13 +148,13 @@ export default function AddSession() {
</div>
</div>
</div>
- </div>
</Collapse>
+ </div>
<div className="d-grid mt-2">
<button type="submit" id="id_btn_start" className="btn btn-success">Create Session</button>
</div>
</form>
- )}
+ )}
</Formik>
</div>
);
diff --git a/wahlfang_web/src/state/management.js b/wahlfang_web/src/state/management.js
index d350367..1c6dca1 100644
--- a/wahlfang_web/src/state/management.js
+++ b/wahlfang_web/src/state/management.js
@@ -5,7 +5,3 @@ export const isManagerAuthenticated = atom({
default: false,
})
-export const toggleAddSession = atom({
- key: 'toggleAddSession',
- default: false,
-})
--
GitLab