Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create modal form for user story. #240

Merged
merged 2 commits into from
Dec 9, 2021
Merged

Create modal form for user story. #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3a1435
Create and validate modal form for user story.
hlavu Dec 5, 2021
afd8011
Test units for modal form.
hlavu Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"postcode-validator": "^3.1.0",
"react": "^17.0.0",
"react-bootstrap": "^2.0.0-rc.0",
"react-country-region-selector": "^3.4.0",
"react-dom": "^17.0.0",
"react-icons": "^4.3.1",
"react-router-dom": "6",
Expand Down
62 changes: 61 additions & 1 deletion src/components/stories/Stories.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,68 @@
top: 0.5em;
right: 3em;
}
.formContainer,
.error-dsp {
width: 95%;
margin: auto;
}
.str-form-label {
display: block;
font-weight: bold;
margin: 0.5em 0em 0.3em 0em;
}
.country,
.region {
display: inline-block;
width: 100%;
border: solid 0.5px #ced4da;
border-radius: 4px;
padding: 0.4em;
}
.btnContainer {
text-align: right;
vertical-align: middle;
}
.mBtn {
font-family: "News Cycle", "Arial Narrow Bold", sans-serif;
font-weight: 700;
color: #fff;
margin: 4px;
padding: 6px 16px;
border-radius: 0.25rem;
border: none;
}
.clearBtn {
background: #1597e5;
height: 38px;
border-color: #1597e5;
}
.closeBtn {
height: 38px;
background: #d5d5d5;
border-color: #d5d5d5;
}
.saveBtn {
margin-top: -1px;
}
.clearBtn:hover,
.clearBtn:visited {
background: #113cfc;
border-color: #113cfc;
box-shadow: #113cfc;
}
.closeBtn:hover,
.closeBtn:visited {
background: #c8c6c6;
border-color: #c8c6c6;
box-shadow: #c8c6c6;
}
.alert {
width: 90%;
margin: auto;
}
@media (max-width: 990px) {
.story_btn{
.story_btn {
position: relative;
display: block;
top: 0em;
Expand Down
136 changes: 132 additions & 4 deletions src/components/stories/Stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,148 @@
import userData from "./UserData";
import { Link } from "react-router-dom";
import { Row, Button } from "react-bootstrap";
import { Form, Row, Button, Modal } from "react-bootstrap";
import UserCard from "../layout/UserCard";
import { useState } from "react";
import { useInsert } from "react-supabase";
import { useAuth } from "../../context/SupaContext";
import { FetchingButton } from "../layout/Buttons/FetchingButton";
import { CountryDropdown, RegionDropdown } from "react-country-region-selector";
import "./Stories.css";
export default function Stories() {
const [show, setShow] = useState(false);
const [country, setCountry] = useState("");
const [region, setRegion] = useState("");
const [title, setTitle] = useState("");
const [desc, setDesc] = useState("");
const [err, setErr] = useState("");
const { user } = useAuth();
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [{ fetching }, execute] = useInsert("stories");

const handleSubmit = async (e) => {
e.preventDefault();
const { error } = await execute({
user_id: user.id,
title: title,
description: desc,
region: region,
country: country,
});
if (!error) {
// insert successfully
clearInput();
handleClose();
} else {
// display error
setErr(error.message);
}
};

const clearInput = () => {
setTitle("");
setDesc("");
setCountry("");
setRegion("");
setErr("");
};

return (
<div className="stories">
<div className="main_title">
<h1>User Story</h1>
<Button className="story_btn" as={Link} to={"/404/"}>
Create your Story
</Button>
{user ? (
<Button className="story_btn" onClick={handleShow}>
Create your Story
</Button>
) : (
<Button className="story_btn" as={Link} to={"/login"}>
Login
</Button>
)}
</div>
<Row className="mb-2 w-100 petList">
{userData && userData.map((u) => <UserCard key={u.id} userData={u} />)}
</Row>

<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Create Your Story</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="formContainer">
<Form onSubmit={handleSubmit}>
<Form.Group controlId="form.title">
<Form.Label className="str-form-label">Title</Form.Label>
<Form.Control
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</Form.Group>

<Form.Group controlId="form.description">
<Form.Label className="str-form-label">Description</Form.Label>
<Form.Control
as="textarea"
value={desc}
name="desc"
onChange={(e) => setDesc(e.target.value)}
rows={5}
required
/>
</Form.Group>

<Form.Group controlId="form.country">
<Form.Label className="str-form-label">Country</Form.Label>
<CountryDropdown
className="country"
name="country"
value={country}
onChange={(val) => setCountry(val)}
required
/>
</Form.Group>

<Form.Group controlId="form.region">
<Form.Label className="str-form-label">Region</Form.Label>
<RegionDropdown
className="region"
name="region"
blankOptionLabel="No Country Selected"
country={country}
value={region}
onChange={(val) => setRegion(val)}
required
/>
</Form.Group>
<br />
<hr />
<div className="btnContainer">
<button className="mBtn clearBtn" onClick={clearInput}>
Clear
</button>
<button className="mBtn closeBtn" onClick={handleClose}>
Close
</button>
<FetchingButton
fetching={fetching}
action="Save"
type="submit"
className="mBtn saveBtn"
/>
</div>
</Form>
</div>
</Modal.Body>
{err && (
<div className="alert alert-danger" role="alert">
{err}
</div>
)}
</Modal>
</div>
);
}
136 changes: 136 additions & 0 deletions src/components/stories/__mocks__/Stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import { useState } from "react";
import { Form, Button, Modal } from "react-bootstrap";
import { FetchingButton } from "../../layout/Buttons/FetchingButton";
import { CountryDropdown, RegionDropdown } from "react-country-region-selector";
import "../Stories.css";
function Stories(initShow, success = false) {
const [show, setShow] = useState(initShow);
const [country, setCountry] = useState("");
const [region, setRegion] = useState("");
const [title, setTitle] = useState("");
const [desc, setDesc] = useState("");
const [err, setErr] = useState("");
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

const handleSubmit = async (e) => {
e.preventDefault();
if (success) {
clearInput();
handleClose();
} else {
setErr("Display err from supabase");
}
};

const clearInput = () => {
setTitle("");
setDesc("");
setCountry("");
setRegion("");
setErr("");
};

return (
<div className="stories">
<div className="main_title">
<h1>User Story</h1>
<Button className="story_btn" onClick={handleShow}>
Create your Story
</Button>
</div>

<Modal show={show} onHide={handleClose} role="modalForm">
<Modal.Header closeButton>
<Modal.Title>Create Your Story</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="formContainer">
<Form onSubmit={handleSubmit}>
<Form.Group controlId="form.title">
<Form.Label className="str-form-label">Title</Form.Label>
<Form.Control
role="title"
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</Form.Group>

<Form.Group controlId="form.description">
<Form.Label className="str-form-label">Description</Form.Label>
<Form.Control
role="desc"
as="textarea"
value={desc}
name="desc"
onChange={(e) => setDesc(e.target.value)}
rows={5}
required
/>
</Form.Group>

<Form.Group controlId="form.country">
<Form.Label className="str-form-label">Country</Form.Label>
<CountryDropdown
role="country"
className="country"
name="country"
value={country}
onChange={(val) => setCountry(val)}
required
/>
</Form.Group>

<Form.Group controlId="form.region">
<Form.Label className="str-form-label">Region</Form.Label>
<RegionDropdown
role="region"
className="region"
name="region"
blankOptionLabel="No Country Selected"
country={country}
value={region}
onChange={(val) => setRegion(val)}
required
/>
</Form.Group>
<br />
<hr />
<div className="btnContainer">
<button
className="mBtn clearBtn"
onClick={clearInput}
role="clearBtn"
>
Clear
</button>
<button
className="mBtn closeBtn"
onClick={handleClose}
role="closeBtn"
>
Close
</button>
<FetchingButton
role="saveBtn"
action="Save"
type="submit"
className="mBtn saveBtn"
/>
</div>
</Form>
</div>
</Modal.Body>
{err && (
<div className="alert alert-danger" role="alert">
{err}
</div>
)}
</Modal>
</div>
);
}
export default Stories;
Loading