Skip to content

Instantly share code, notes, and snippets.

@salasrob
salasrob / providerListWithMap.jsx
Created October 14, 2021 01:34
ReactJS - Results page with a larger Google Map, can search, providers populate with contact info - Welrus
import React, { Fragment, useEffect } from "react";
import { Link } from "react-router-dom";
import {
Button,
TextField,
FormControl,
FormGroup,
FormControlLabel,
Checkbox,
withStyles,
@salasrob
salasrob / LocationSearchInput.jsx
Created October 14, 2021 01:30
ReactJS - Just the location search broken out into a component - Welrus
import { LoadScript, Marker } from "@react-google-maps/api";
import { Autocomplete } from "@react-google-maps/api";
import PropTypes from "prop-types";
import React, { Component } from "react";
import logger from "sabio-debug";
import { REACT_APP_APIKEY } from "../../services/serviceHelpers"; //"@service./serviceHelpers";
import { FormControl, TextField } from "@material-ui/core";
const _logger = logger.extend("AutoComplete Search");
const libraries = ["places"];
class LocationSearchInput extends Component {
@salasrob
salasrob / AutoCompleteSearch.jsx
Created October 14, 2021 01:29
ReactJS - Search that maps results to Google Map - Welrus
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
import { Autocomplete } from "@react-google-maps/api";
import PropTypes from "prop-types";
import React, { Component } from "react";
import logger from "sabio-debug";
import { REACT_APP_APIKEY } from "../../services/serviceHelpers"; //"@service./serviceHelpers";
const _logger = logger.extend("AutoComplete Search");
const libraries = ["places"];
var mapOptions = { disableDefaultUI: true };
@salasrob
salasrob / ProviderLocationsRenderMap.jsx
Created October 14, 2021 01:27
ReactJS - Google Map displaying provider locations - Welrus
import {
GoogleMap,
LoadScript,
Marker,
InfoWindow,
} from "@react-google-maps/api";
import PropTypes from "prop-types";
import React, { useEffect } from "react";
import logger from "sabio-debug";
import { REACT_APP_APIKEY } from "@services/serviceHelpers";
@salasrob
salasrob / Map.jsx
Created October 14, 2021 01:26
ReactJS - Reusable Google Map component - Welrus
import {
GoogleMap,
LoadScript,
Marker,
InfoWindow,
} from "@react-google-maps/api";
import PropTypes from "prop-types";
import React, { Component } from "react";
import providerServiceService from "@services/providerServiceService";
import logger from "sabio-debug";
@salasrob
salasrob / ManagementRoutes.jsx
Created October 14, 2021 01:24
ReactJS - Component for routing buttons - Welrus
import React, { Fragment } from "react";
import { withRouter } from "react-router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import { Grid, CardContent, Button } from "@material-ui/core";
import debug from "sabio-debug";
import "../../../assets/styles/providerDashboard.css";
const _logger = debug.extend("ProviderButtons");
class ManagementRoutes extends React.Component {
@salasrob
salasrob / SingleAppointment.jsx
Created October 14, 2021 01:23
ReactJS - Single Appointment - Welrus
import React from "react";
import { Avatar, Button, ListItem } from "@material-ui/core";
import PropTypes from "prop-types";
import debug from "sabio-debug";
const _logger = debug.extend("SingleAppointment");
const SingleAppointment = (props) => {
function handleView() {
const appointmentId = props.appointment.id;
props.viewAppointment(appointmentId);
@salasrob
salasrob / ProviderAppointment.jsx
Created October 14, 2021 01:22
ReactJS - Provider Appointments - Welrus
import React from "react";
import { Grid, Card, List, ListItem } from "@material-ui/core";
import PerfectScrollbar from "react-perfect-scrollbar";
import SingleAppointment from "./SingleAppointment";
import PropTypes from "prop-types";
import { Snackbar, Button } from "@material-ui/core";
import Alert from "../../../assets/components/Alert";
import appointmentService from "@services/appointmentService";
import smsService from "../../../services/smsService";
import debug from "sabio-debug";
@salasrob
salasrob / AppointmentDetailsModal.jsx
Created October 14, 2021 01:20
ReactJS - Appointment Details Modal - Welrus
import React from "react";
import { Button, Grid, DialogContent } from "@material-ui/core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PropTypes from "prop-types";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogTitle from "@material-ui/core/DialogTitle";
import debug from "sabio-debug";
const _logger = debug.extend("Modal");
@salasrob
salasrob / AppointmentAnalytics.jsx
Created October 14, 2021 01:19
ReactJS - Appointment Analytics - Welrus
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import PerfectScrollbar from "react-perfect-scrollbar";
import { Grid, Card, List, ListItem, Button, ButtonGroup } from "@material-ui/core";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";