Skip to content

Instantly share code, notes, and snippets.

View paigen11's full-sized avatar

Paige Niedringhaus paigen11

View GitHub Profile
@paigen11
paigen11 / findUser.js
Created September 4, 2018 20:50
Passport local and Passport JWT authentication with custom callbacks examples with a user registration MERN service.
import passport from 'passport';
module.exports = app => {
app.get('/findUser', (req, res, next) => {
passport.authenticate('jwt', { session: false }, (err, user, info) => {
if (err) {
console.log(err);
}
if (info != undefined) {
console.log(info.message);
@paigen11
paigen11 / cart-checkout-drawer-context-provider.js
Last active February 6, 2021 09:09
A sample of how to wrap the component providing the context values in a React application.
<CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
<section className="cart-checkout">
<CartDrawer selectedCartItems={selectedCartItems} />
</section>
</CheckoutDrawerContext.Provider>
@paigen11
paigen11 / og-pr-template.md
Created June 8, 2019 19:47
An example of the type of pull request my development team used to keep the formatting consistent

Story

Jira, Pivotal Tracker, (link to where the story you worked on lives)

PR Branch

URL to the automated branch build for feature testing

Code Coverage

URL to the automated code coverage report run during the automated build process

e2e

@paigen11
paigen11 / react-transition-group-sidebar-css.scss
Created April 12, 2020 22:49
Sample CSS code to style the animations of React Transition Group's CSSTransition component in a demo app
.visible-enter {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: space-around;
transform: translate(-100%);
background: #b65be1;
margin-top: -25px;
height: 50vh;
width: 60%;
@paigen11
paigen11 / react-transition-group-sidebar-demo.js
Last active April 12, 2020 22:34
Sample JavaScript code of React Transition Group's CSSTransition component in a working demo with an animated navbar
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { NavLink } from 'react-router-dom';
import TmdbIcon from '../../assets/tmdb-power.png';
import './Sidebar.scss';
const Sidebar = () => {
const [expandedLinks, setExpandedLinks] = useState(false);
const toggleLinks = () => {
@paigen11
paigen11 / react-transition-group-transitionGroup-css.css
Created April 12, 2020 21:56
Sample CSS code of React Transition Group's TransitionGroup component
.remove-btn {
margin-right: 0.5rem;
}
.chore-enter {
opacity: 0;
}
.chore-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
@paigen11
paigen11 / react-transition-group-transitionGroup.js
Created April 12, 2020 21:48
Sample JavaScript code of React Transition Group's TransitionGroup component
const ChoresToDo = () => {
const [chores, setChores] = useState([
{ id: 1, text: 'Dust' },
{ id: 2, text: 'Polish floors' },
{ id: 3, text: 'Wipe down countertops' }
]);
return (
<Container>
<ListGroup>
@paigen11
paigen11 / react-switchtransition-group-css.css
Created April 12, 2020 16:34
Sample CSS code of React Transition Group's SwitchTransition component
.fade-enter .btn {
opacity: 0;
transform: translateX(-100%);
}
.fade-enter-active .btn {
opacity: 1;
transform: translateX(0%);
}
.fade-exit .btn {
opacity: 1;
@paigen11
paigen11 / react-transition-group-switch.js
Created April 12, 2020 16:16
Sample JavaScript code of React Transition Group's SwitchTransition component
const App = () => {
const [state, setState] = React.useState(true);
return (
<>
<div className="main">
<SwitchTransition mode={'in-out'}>
<CSSTransition
key={state}
addEndListener={(node, done) => {
node.addEventListener("transitionend", done, false);
@paigen11
paigen11 / react-csstransition-group-css.css
Last active April 12, 2020 15:54
Sample CSS code of React Transition Group's CSSTransition component
.sample-enter {
opacity: 0;
}
.sample-enter-active {
opacity: .5;
transition: opacity 300ms;
}
.sample-enter-done{
opacity: 1;
}