Some upgrades (#45)

.github/workflows/master_pantrydeploy.yml

@@ -0,0 +1,75 @@
+# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# More GitHub Actions for Azure: https://github.com/Azure/actions
+
+name: Build and deploy Node.js app to Azure Web App - pantryadmin
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+env:
+  BACKEND_BASE_URL: http://localhost:3000
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v1
+        with:
+          node-version: "16.x"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Log in to registry
+        uses: docker/login-action@v1
+        with:
+          registry: https://collectivereg.azurecr.io/
+          username: ${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}
+          password: ${{ secrets.AzureAppService_ContainerPassword_807a7babf8fc4bbab3814a0bd2d77375 }}
+
+      - name: Build and push container image to registry
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          tags: collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}/pantry-backend:${{ github.sha }}
+          file: ./backend/Dockerfile
+
+      - name: Build and push container image to registry
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          tags: collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_e63bb1905c6a4a45b5a231dfb2e20209 }}/pantry-frontend:${{ github.sha }}
+          file: ./apps/Dockerfile
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: "Production"
+      url: ${{ steps.frontend-to-webapp.outputs.webapp-url }}
+
+    steps:
+      - name: Deploy Backend to Azure Web App
+        id: backend-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: "pantryadmin-docker"
+          slot-name: "production"
+          publish-profile: ${{ secrets.AzureAppService_PublishProfile_d7e475cd12ae435193e3f0efff1d8394 }}
+          images: "collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}/pantry-backend:${{ github.sha }}"
+
+      - name: Deploy Frontend to Azure Web App
+        id: frontend-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: "pantryfrontend"
+          slot-name: "production"
+          publish-profile: ${{ secrets.AzureAppService_PublishProfile_4d2ccba4715b4bfe9af97028f357c793 }}
+          images: "collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_e63bb1905c6a4a45b5a231dfb2e20209 }}/pantry-frontend:${{ github.sha }}"

apps/Dockerfile

@@ -1,13 +1,27 @@
+FROM node:16-alpine AS builder
+RUN apk update
+# Set working directory
+WORKDIR /app
+RUN yarn global add turbo
+COPY . .
+RUN turbo prune --scope=@opensaas-clubhouse/frontend --docker
 
-FROM node:16.13-alpine AS deps
-ARG APP=next-app
-RUN npm i -g pnpm
-WORKDIR /usr/app
-COPY ".npmrc" .
-COPY ["./apps/${APP}/package.json", "pnpm-lock.*", "./"]
-RUN pnpm install
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:16-alpine AS installer
+RUN apk update
+WORKDIR /app
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install
+
+FROM node:16-alpine AS sourcer
+RUN apk update
+WORKDIR /app
+COPY --from=installer /app/ .
+COPY --from=builder /app/out/full/ .
+COPY .gitignore .gitignore
 ENV NODE_ENV=production
-COPY ./apps/${APP}/. .
-RUN pnpm build
+ENV BACKEND_BASE_URL=http://localhost:3000
+RUN yarn turbo run build --scope=@opensaas-clubhouse/frontend --include-dependencies --no-deps
 EXPOSE 3000
-CMD ["pnpm", "start"]
+CMD ["yarn", "start"]

apps/user-portal/components/DocumentBlock.tsx

@@ -1,10 +1,10 @@
 import {
   DocumentRenderer,
   DocumentRendererProps,
-} from "@keystone-6/document-renderer";
-import ReactPlayer from "react-player";
+} from '@keystone-6/document-renderer';
+import ReactPlayer from 'react-player';
 
-const renderers: DocumentRendererProps["renderers"] = {
+const renderers: DocumentRendererProps['renderers'] = {
   // use your editor's autocomplete to see what other renderers you can override
   inline: {
     bold: ({ children }) => <strong>{children}</strong>,
@@ -16,18 +16,18 @@ const renderers: DocumentRendererProps["renderers"] = {
   },
 };
 
-const componentBlockRenderers: DocumentRendererProps["componentBlocks"] = {
+const componentBlockRenderers: DocumentRendererProps['componentBlocks'] = {
   quote: (props) => (
     <div
       style={{
-        borderLeft: "3px solid #CBD5E0",
+        borderLeft: '3px solid #CBD5E0',
         paddingLeft: 16,
       }}
     >
-      <div style={{ fontStyle: "italic", color: "#4A5568" }}>
+      <div style={{ fontStyle: 'italic', color: '#4A5568' }}>
         {props.content}
       </div>
-      <div style={{ fontWeight: "bold", color: "#718096" }}>
+      <div style={{ fontWeight: 'bold', color: '#718096' }}>
         — {props.attribution}
       </div>
     </div>
@@ -39,8 +39,8 @@ const componentBlockRenderers: DocumentRendererProps["componentBlocks"] = {
       <div contentEditable={false}>
         <div
           style={{
-            padding: "0 0 0 0",
-            position: "relative",
+            padding: '0 0 0 0',
+            position: 'relative',
           }}
         >
           <ReactPlayer url={url} />

apps/user-portal/components/ManageStripeButton.tsx

@@ -1,5 +1,4 @@
 import { Button } from 'react-bootstrap';
-import React from 'react';
 import getConfig from 'next/config';
 import { useMutation } from '@apollo/client';
 import { useSession } from 'next-auth/react';
@@ -20,7 +19,7 @@ export function ManageStripeButton() {
   `;
 
   const [getPortalSession] = useMutation(MANAGE_STRIPE_MUTATION, {
-    //refetchQueries: [{ query: CURRENT_USER_QUERY }],
+    // refetchQueries: [{ query: CURRENT_USER_QUERY }],
   });
   if (!userData.id) {
     return <SigninButton />;

apps/user-portal/components/SigninButton.tsx

@@ -1,34 +1,31 @@
-import { signIn, signOut, useSession } from "next-auth/react";
-import { Navbar, Nav, Button } from "react-bootstrap";
-import Link from "next/link";
+import { signIn, signOut, useSession } from 'next-auth/react';
+import { Navbar, Nav, Button } from 'react-bootstrap';
+import Link from 'next/link';
 
-export function SigninButton() {
+export function SigninButton({ ...props }) {
+  const { returnUrl } = props;
   const { data, status } = useSession();
+  if (!data)
+    return (
+      <Button
+        onClick={() =>
+          signIn('azure-ad-b2c', {
+            callbackUrl: `${window.location.origin}${returnUrl || '/'}`,
+          })
+        }
+      >
+        Get Started/Sign In
+      </Button>
+    );
   return (
-    <>
-      {!data ? (
-        <Button
-          onClick={() =>
-            signIn("auth0", {
-              callbackUrl: `${window.location.origin}`,
-            })
-          }
-        >
-          Sign In
-        </Button>
-      ) : (
-        <>
-          <Button
-            onClick={() =>
-              signOut({
-                callbackUrl: `${window.location.origin}`,
-              })
-            }
-          >
-            Sign Out
-          </Button>
-        </>
-      )}
-    </>
+    <Button
+      onClick={() =>
+        signOut({
+          callbackUrl: `${window.location.origin}`,
+        })
+      }
+    >
+      Sign Out
+    </Button>
   );
 }

apps/user-portal/components/SignupButton.tsx

@@ -0,0 +1,34 @@
+import { signIn, signOut, useSession } from 'next-auth/react';
+import { Navbar, Nav, Button } from 'react-bootstrap';
+import Link from 'next/link';
+
+export function SignupButton() {
+  const { data, status } = useSession();
+  if (!data)
+    return (
+      <Button
+        onClick={() =>
+          signIn(
+            'azure-ad-b2c',
+            {
+              callbackUrl: `${window.location.origin}`,
+            },
+            { p: 'B2C_1_oldhcurchpantrysignup' }
+          )
+        }
+      >
+        Sign Up
+      </Button>
+    );
+  return (
+    <Button
+      onClick={() =>
+        signOut({
+          callbackUrl: `${window.location.origin}`,
+        })
+      }
+    >
+      Sign Out
+    </Button>
+  );
+}

apps/user-portal/components/SubscribeButton.tsx

@@ -1,15 +1,14 @@
 import { Button } from 'react-bootstrap';
-import React from 'react';
 import getConfig from 'next/config';
 import { useMutation } from '@apollo/client';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/dist/client/router';
 import gql from 'graphql-tag';
+import { SigninButton } from './SigninButton';
 import { User } from '../types';
 
 export function SubscribeButton({ ...props }) {
   const { data: userData, status } = useSession();
-  const userSession = userData.data as User;
   const router = useRouter();
 
   const { variation, subscription, club } = props;
@@ -27,9 +26,18 @@ export function SubscribeButton({ ...props }) {
     }
   `;
 
+  const userSession = userData?.data as User;
   const [getStripeSession] = useMutation(SUBSCRIPTION_MUTATION, {
-    //refetchQueries: [{ query: CURRENT_USER_QUERY }],
+    // refetchQueries: [{ query: CURRENT_USER_QUERY }],
   });
+  if (!userData) {
+    return (
+      <SigninButton
+        returnUrl={`/${club}/${subscription}/subscribe?variationId=${variation.id}`}
+      />
+    );
+  }
+
   const existingVariation = userSession.memberships.find(
     (m) => m.variation.id === variation.id
   );
@@ -38,7 +46,9 @@ export function SubscribeButton({ ...props }) {
       <>
         <p>You already have this one and is it {existingVariation.status}</p>
         <Button
+          // eslint-disable-next-line prettier/prettier
           variant='primary'
+          // eslint-disable-next-line prettier/prettier
           type='button'
           onClick={() => router.push(`/${club}/my-membership`)}
         >

apps/user-portal/components/forms/User.tsx

@@ -1,7 +1,6 @@
-import { Form } from "react-bootstrap";
-import React from "react";
-import getConfig from "next/config";
-import { Field } from "./householdMembers";
+import { Form } from 'react-bootstrap';
+import getConfig from 'next/config';
+import { Field } from './householdMembers';
 
 export function User({ ...props }) {
   const { inputs, handleChange } = props;