ryanbelke

/* /components/Layout.js */

import React, { useContext } from "react";
import Head from "next/head";
import Link from "next/link";
import { Container, Nav, NavItem } from "reactstrap";
import { logout } from "../lib/auth";
import AppContext from "../context/AppContext";

const Layout = (props) => {

ryanbelke

/* _app.js */
import React from "react";
import App from "next/app";
import Head from "next/head";
import Cookie from "js-cookie";
import fetch from "isomorphic-fetch";
import Layout from "../components/Layout";
import AppContext from "../context/AppContext";
import withData from "../lib/apollo";

ryanbelke

/* /context/AppContext.js */

import React from "react";
// create auth context with default value

// set backup default for isAuthenticated if none is provided in Provider 
const AppContext = React.createContext({ isAuthenticated: false });
export default AppContext;

ryanbelke

/* _app.js */
import React from "react";
import App from "next/app";
import Head from "next/head";
import Layout from "../components/Layout";
import withData from "../lib/apollo";
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (

ryanbelke

$ cd frontend
$ yarn add [email protected] [email protected] [email protected] @apollo/[email protected] @apollo/[email protected]

ryanbelke

/* _app.js */
import React from "react";
import App from "next/app";
import Head from "next/head";
import Layout from "../components/Layout";
export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>

ryanbelke

/* /components/Layout.js */

import React from "react";
import Head from "next/head";
import Link from "next/link";

import { Container, Nav, NavItem } from "reactstrap";

export default function Layout(props) {
  const title = "Welcome to Nextjs";

ryanbelke

/* components/Checkout/cardsection.js */

import React from "react";

import { CardElement } from "@stripe/react-stripe-js";

function CardSection(props) {
  return (
    <div>
      <div>

ryanbelke

/* /components/Checkout/CheckoutForm.js */

import React, { useState, useContext } from "react";

import { FormGroup, Label, Input } from "reactstrap";

import fetch from "isomorphic-fetch";
import Cookies from "js-cookie";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";

ryanbelke

/* pages/checkout.js */

import React, { useContext } from "react";

import { Row, Col } from "reactstrap";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import InjectedCheckoutForm from "../components/Checkout/CheckoutForm";
import AppContext from "../context/appContext";