Updates

.github/workflows/dev_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:
+      - dev
+  workflow_dispatch:
+
+env:
+  BACKEND_BASE_URL: http://localhost:3000
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to registry
+        uses: docker/login-action@v2
+        with:
+          registry: https://collectivereg.azurecr.io/
+          username: ${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}
+          password: ${{ secrets.AzureAppService_ContainerPassword_807a7babf8fc4bbab3814a0bd2d77375 }}
+
+      - name: Build and push backend container image to registry
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          tags: collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}/pantry-backend-dev:${{ github.sha }}
+          file: ./backend/Dockerfile
+
+      - name: Build and push frontend container image to registry
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          tags: collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_e63bb1905c6a4a45b5a231dfb2e20209 }}/pantry-frontend-dev:${{ github.sha }}
+          file: ./apps/Dockerfile
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: "Test"
+      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: "pantrybackend-dev"
+          slot-name: "production"
+          publish-profile: ${{ secrets.AzureAppService_PublishProfile_b238d802ac8645e6b65a5edde468d12d }}
+          images: "collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_28d39508e5734f558fc68a409d6d0fac }}/pantry-backend-dev:${{ github.sha }}"
+
+      - name: Deploy Frontend to Azure Web App
+        id: frontend-to-webapp
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: "pantryfrontend-dev"
+          slot-name: "production"
+          publish-profile: ${{ secrets.AzureAppService_PublishProfile_3d252031ecc64559a923899a336cd451 }}
+          images: "collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_e63bb1905c6a4a45b5a231dfb2e20209 }}/pantry-frontend-dev:${{ github.sha }}"

.github/workflows/master_pantrydeploy.yml

@@ -17,32 +17,32 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Set up Node.js version
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: "16.x"
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
 
       - name: Log in to registry
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         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
+      - name: Build and push backend container image to registry
+        uses: docker/build-push-action@v3
         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
+      - name: Build and push frontend container image to registry
+        uses: docker/build-push-action@v3
         with:
           push: true
           tags: collectivereg.azurecr.io/${{ secrets.AzureAppService_ContainerUsername_e63bb1905c6a4a45b5a231dfb2e20209 }}/pantry-frontend:${{ github.sha }}

.github/workflows/tests.yml

@@ -0,0 +1,27 @@
+name: Test build
+
+on:
+  push:
+    branches:
+      - master
+      - dev
+  pull_request:
+
+jobs:
+  linting:
+    name: Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js LTS
+        uses: actions/setup-node@main
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Turbo Run Build
+        run: BACKEND_BASE_URL=http://localhost:3000 yarn turbo run build

apps/user-portal/components/DocumentBlock.tsx

@@ -2,7 +2,8 @@ import {
   DocumentRenderer,
   DocumentRendererProps,
 } from '@keystone-6/document-renderer';
-import ReactPlayer from 'react-player';
+import { default as _ReactPlayer } from 'react-player';
+import { ReactPlayerProps } from "react-player/types/lib";
 
 const renderers: DocumentRendererProps['renderers'] = {
   // use your editor's autocomplete to see what other renderers you can override
@@ -34,6 +35,7 @@ const componentBlockRenderers: DocumentRendererProps['componentBlocks'] = {
   ),
   video: (props) => {
     const { url } = props;
+    const ReactPlayer = _ReactPlayer as unknown as React.FC<ReactPlayerProps>;
 
     return (
       <div contentEditable={false}>

apps/user-portal/components/ManageStripeButton.tsx

@@ -9,38 +9,34 @@ import { SigninButton } from './SigninButton';
 
 export function ManageStripeButton() {
   const { data: userData, status } = useSession();
-  const userSession = userData.data as User;
+  const userSession = userData?.data as User;
   const router = useRouter();
 
   const MANAGE_STRIPE_MUTATION = gql`
-    mutation MANAGE_STRIPE_MUTATION($userId: ID!, $returnUrl: String!) {
-      manageStripe(userId: $userId, returnUrl: $returnUrl)
+    mutation MANAGE_STRIPE_MUTATION($returnUrl: String!) {
+      stripeManage(returnUrl: $returnUrl)
     }
   `;
 
   const [getPortalSession] = useMutation(MANAGE_STRIPE_MUTATION, {
     // refetchQueries: [{ query: CURRENT_USER_QUERY }],
   });
-  if (!userData.id) {
+  if (!userSession) {
     return <SigninButton />;
   }
 
   return (
     <Button
       onClick={async () => {
-        console.log(userData.id);
-
         const portalSession = await getPortalSession({
           variables: {
-            userId: userSession.id,
             returnUrl: `${window.location.origin}/profile`,
           },
         });
-        console.log(JSON.stringify(portalSession));
-        router.push(portalSession.data.url);
+        router.push(portalSession.data.stripeManage.url);
       }}
     >
-      Manage
+      Manage Membership
     </Button>
   );
 }

apps/user-portal/components/SigninButton.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 export function SigninButton({ ...props }) {
   const { returnUrl } = props;
   const { data, status } = useSession();
-  if (!data)
+  if (!data?.itemId)
     return (
       <Button
         onClick={() =>

apps/user-portal/components/SubscribeButton.tsx

@@ -13,16 +13,8 @@ export function SubscribeButton({ ...props }) {
 
   const { variation, subscription, club } = props;
   const SUBSCRIPTION_MUTATION = gql`
-    mutation SUBSCRIPTION_MUTATION(
-      $variationId: ID!
-      $userId: ID!
-      $returnUrl: String!
-    ) {
-      membershipSignup(
-        userId: $userId
-        returnUrl: $returnUrl
-        variationId: $variationId
-      )
+    mutation SUBSCRIPTION_MUTATION($variationId: ID!, $returnUrl: String!) {
+      membershipSignup(returnUrl: $returnUrl, variationId: $variationId)
     }
   `;
 
@@ -66,7 +58,6 @@ export function SubscribeButton({ ...props }) {
         const session = await getStripeSession({
           variables: {
             variationId: variation.id,
-            userId: userSession.id,
             returnUrl: `${window.location.origin}/${club}/${subscription}`,
           },
         });

apps/user-portal/components/theme/Header.js

@@ -21,7 +21,7 @@ export function Header() {
             </Link>
             {data && (
               <>
-                <Link href="/pantry/my-membership" passHref>
+                <Link href="/pantry/subscriptions" passHref>
                   <Nav.Link>Pantry Membership</Nav.Link>
                 </Link>
                 <Link href="/profile" passHref>

apps/user-portal/emotion.ts

@@ -0,0 +1 @@
+export { css, jsx, keyframes, Global, ClassNames } from '@emotion/react'; // ensure the same version of emotion

apps/user-portal/lib/form/apolloClient.ts

@@ -7,7 +7,7 @@ import getConfig from 'next/config';
 
 export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
 
-let apolloClient;
+let apolloClient: ApolloClient<any>;
 
 function createApolloClient() {
   const { publicRuntimeConfig } = getConfig();
@@ -60,15 +60,15 @@ export function initializeApollo(initialState = null) {
   return _apolloClient;
 }
 
-export function addApolloState(client, pageProps) {
+export function addApolloState(client: any, pageProps: any) {
   if (pageProps?.props) {
     pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
   }
 
   return pageProps;
 }
 
-export function useApollo(pageProps) {
+export function useApollo(pageProps: any) {
   const state = pageProps[APOLLO_STATE_PROP_NAME];
   const store = useMemo(() => initializeApollo(state), [state]);
   return store;

apps/user-portal/lib/form/useForm.ts

@@ -10,7 +10,7 @@ export function useForm(initial = {}) {
     setInputs(initial);
   }, [initialValues]);
 
-  function handleStageButton(e) {
+  function handleStageButton(e: any) {
     const { innerText } = e.target;
     const value = innerText.toLowerCase();
     setInputs({
@@ -19,13 +19,19 @@ export function useForm(initial = {}) {
     });
   }
 
-  function handleChange(e) {
-    let { value, name, type } = e.target;
+  function handleChange(e: any) {
+    let {
+      value,
+      name,
+      type,
+    }: { value: string | boolean | number; name: string; type: string } =
+      e.target;
 
     if (type === 'number') {
-      value = parseInt(value);
+      value = parseInt(value as string);
     }
     if (type === 'checkbox') {
+      // @ts-ignore
       value = !inputs[name];
     }
     if (type === 'radio') {
@@ -34,7 +40,7 @@ export function useForm(initial = {}) {
       } else if (value === 'no') {
         value = false;
       } else if (name === 'feeAmount') {
-        value = parseInt(value);
+        value = parseInt(value as string);
       }
     }
     if (type === 'file') {

apps/user-portal/lib/form/withData.ts

@@ -5,7 +5,7 @@ import { createUploadLink } from 'apollo-upload-client';
 import withApollo from 'next-with-apollo';
 import getConfig from 'next/config';
 
-function createClient({ headers, initialState }) {
+function createClient({ headers, initialState }: any) {
   const { publicRuntimeConfig } = getConfig();
   return new ApolloClient({
     link: ApolloLink.from([

apps/user-portal/next.config.js

@@ -24,4 +24,13 @@ module.exports = withPreconstruct({
       },
     ];
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/pantry',
+        permanent: false,
+      },
+    ];
+  },
 });