Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@womcauliff
womcauliff committed Mar 6, 2019
1 parent 9e85959 commit b7a538a
Show file tree
Hide file tree
Showing 6 changed files with 430 additions and 2 deletions.
2 changes: 0 additions & 2 deletions README.md
View file

This file was deleted.

22 changes: 22 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "appointment-booking-app",
"version": "1.0.0",
"description": "Uses useReducer hook and ReactStrap for styling.",
"keywords": [],
"main": "src/index.js",
"dependencies": {
"bootstrap": "4.3.1",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-scripts": "2.0.3",
"reactstrap": "7.1.0"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}
43 changes: 43 additions & 0 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>

</html>
296 changes: 296 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
import React, { useReducer } from "react";
import ReactDOM from "react-dom";
import {
Button,
Card,
CardTitle,
Col,
Container,
Form,
FormGroup,
Input,
Jumbotron,
Label,
Modal,
ModalHeader,
ModalBody,
Row
} from "reactstrap";
import initialTimeSlots from "./initialTimeSlots.json";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

function App() {
const [state, dispatch] = useReducer(
(state, action) => {
switch (action.type) {
case "inputChange":
return { ...state, [action.fieldName]: action.fieldValue };
case "bookTimeSlot":
return {
...state,
timeslots: state.timeslots.map(timeslot => {
if (timeslot.id !== state.timeslotID) {
return timeslot;
}
return {
...timeslot,
booked: true,
contactName: state.contactName,
contactPhone: state.contactPhone
};
})
};
case "closeBookingModal":
return {
...state,
bookingModalStatus: "closed",
timeslotID: null,
contactName: "",
contactPhone: ""
};
case "openBookingModal":
return {
...state,
bookingModalStatus: "opened",
timeslotID: action.timeslotID
};
case "closeReviewingModal":
return {
...state,
reviewingModalStatus: "closed",
timeslotID: null,
contactName: "",
contactPhone: ""
};
case "openReviewingModal":
const { contactName, contactPhone } = state.timeslots.find(
({ id }) => id === action.timeslotID
) || { contactName: "y", contactPhone: "u" };
return {
...state,
reviewingModalStatus: "opened",
timeslotID: action.timeslotID,
contactName,
contactPhone
};
default:
return state;
}
},
{
timeslots: initialTimeSlots,
bookingModalStatus: "closed",
reviewingModalStatus: "closed",
contactName: "",
contactPhone: "",
timeslotID: null
}
);
const {
timeslots,
bookingModalStatus,
reviewingModalStatus,
contactName,
contactPhone
} = state;

function onCloseBookingModal(e) {
dispatch({ type: "closeBookingModal" });
}
function onOpenBookingModal(e) {
const timeslotID = parseInt(e.target.getAttribute("data-timeslot-id"), 10);
dispatch({ type: "openBookingModal", timeslotID });
}
function onCloseBookingModal() {
dispatch({ type: "closeBookingModal" });
}
function onOpenReviewingModal(e) {
const timeslotID = parseInt(e.target.getAttribute("data-timeslot-id"), 10);
dispatch({ type: "openReviewingModal", timeslotID });
}
function onCloseReviewingModal() {
dispatch({ type: "closeReviewingModal" });
}

function onFormFieldChange(e) {
dispatch({
type: "inputChange",
fieldName: e.target.name,
fieldValue: e.target.value
});
}
function onBookTimeSlot(e) {
e.preventDefault();
if (contactName === "") {
return;
} else if (contactPhone === "") {
return;
}
dispatch({ type: "bookTimeSlot" });
dispatch({ type: "closeBookingModal" });
}
function onUpdateTimeSlot(e) {
e.preventDefault();
dispatch({ type: "bookTimeSlot" });
dispatch({ type: "closeReviewingModal" });
}
return (
<>
<Jumbotron className="text-sm-left text-md-center">
<Container>
<h1 className="display-4">Let's Connect! 📅</h1>
<hr className="my-2" />
<p className="lead">
Tap or click on an available timeslot below to book an appointment.{" "}
</p>
<p>
Time slots marked in <span className="red-text">red</span> are
already booked.
</p>
</Container>
</Jumbotron>

<Container className="App">
<Row>
{timeslots.map(({ id, startTime, endTime, booked }) => {
if (!booked) {
return (
<Col sm={{ size: 8, offset: 2 }} key={id}>
<Card body key={id}>
<CardTitle tag="h5">{`${startTime} - ${endTime}`}</CardTitle>
<Button
color="primary"
onClick={onOpenBookingModal}
data-timeslot-id={id}
>
Book This Time Slot
</Button>
</Card>
</Col>
);
}
return (
<Col sm={{ size: 8, offset: 2 }} key={id}>
<Card body key={id} color="danger" outline>
<CardTitle tag="h5">{`${startTime} - ${endTime}`}</CardTitle>
<Button
color="danger"
onClick={onOpenReviewingModal}
data-timeslot-id={id}
>
Update This Time Slot
</Button>
</Card>
</Col>
);
})}
</Row>

<Modal
isOpen={bookingModalStatus === "opened"}
toggle={onCloseBookingModal}
className="bookingModal"
>
<ModalHeader toggle={onCloseBookingModal}>
Please Enter Your Contact Information.
</ModalHeader>
<ModalBody>
<Form onSubmit={onBookTimeSlot}>
<FormGroup>
<Label for="contactName">Your Name</Label>
<Input
type="text"
name="contactName"
id="contactName"
placeholder="First and Last Name"
onChange={onFormFieldChange}
value={contactName}
/>
</FormGroup>
<FormGroup>
<Label for="contactPhone">Your Phone Number</Label>
<Input
type="tel"
name="contactPhone"
id="contactPhone"
placeholder="1-(555)-555-5555"
onChange={onFormFieldChange}
value={contactPhone}
/>
</FormGroup>
<Button
type="submit"
color="primary"
className="mx-1"
onClick={onBookTimeSlot}
>
Book This Time Slot
</Button>
<Button
color="secondary"
className="mx-1"
onClick={onCloseBookingModal}
>
Nevermind
</Button>
</Form>
</ModalBody>
</Modal>

<Modal
isOpen={reviewingModalStatus === "opened"}
toggle={onCloseReviewingModal}
className="reviewingModal"
>
<ModalHeader toggle={onCloseReviewingModal}>
Update Your Contact Information.
</ModalHeader>
<ModalBody>
<Form onSubmit={onUpdateTimeSlot}>
<FormGroup>
<Label for="contactName2">Your Name</Label>
<Input
type="text"
name="contactName"
id="contactName2"
placeholder="First and Last Name"
onChange={onFormFieldChange}
value={contactName}
/>
</FormGroup>
<FormGroup>
<Label for="contactPhone2">Your Phone Number</Label>
<Input
type="tel"
name="contactPhone"
id="contactPhone2"
placeholder="1-(555)-555-5555"
onChange={onFormFieldChange}
value={contactPhone}
/>
</FormGroup>
<Button
type="submit"
color="primary"
className="mx-1"
onClick={onUpdateTimeSlot}
>
Save Updates
</Button>
<Button
color="secondary"
className="mx-1"
onClick={onCloseReviewingModal}
>
Nevermind
</Button>
</Form>
</ModalBody>
</Modal>
</Container>
</>
);
}

ReactDOM.render(<App />, document.getElementById("root"));
Loading

0 comments on commit b7a538a

Please sign in to comment.