Added inviter context and fixed some visual bugs.

src/__tests__/contexts/inviter-context.spec.tsx

@@ -0,0 +1,24 @@
+import { InviterContext, InviterContextProvider } from '@/contexts/inviter-context';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+
+function MockChildComponent() {
+  const {inviterInfo} = useContext(InviterContext);
+  return (
+    <div data-testid="test">{inviterInfo ? inviterInfo.name : "your friend"}</div>
+  );
+}
+
+describe('UserContextProvider', () => {
+  afterEach(cleanup);
+  it('defaults to an inviterInfo value of null.', () => {
+    render(
+    <InviterContextProvider>
+      <MockChildComponent />
+    </InviterContextProvider>
+    );
+    const noInviter = screen.queryByTestId('test');
+    expect(noInviter).toHaveTextContent('your friend');
+  });
+});

src/__tests__/pages/__snapshots__/playerwelcome.snapshot.tsx.snap

@@ -20,6 +20,8 @@ exports[`PlayerWelcome renders player-welcome page unchanged 1`] = `
             Support
           </u>
            
+          the
+           
           8by8 Challenge!
         </h1>
         <p>
@@ -28,6 +30,8 @@ exports[`PlayerWelcome renders player-welcome page unchanged 1`] = `
           >
             Help
              
+            your friend
+             
             win their 
             <u>
               8by8 Challenge

src/__tests__/pages/playerwelcome.spec.tsx

@@ -1,6 +1,10 @@
+import { InviterContext, InviterContextType } from '@/contexts/inviter-context';
+import { Inviter } from '@/models/Inviter';
 import PlayerWelcome from '@/pages/player-welcome';
 import '@testing-library/jest-dom';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Builder } from 'builder-pattern';
 import mockRouter from 'next-router-mock';
 import { useRouter } from 'next/router';
 
@@ -10,21 +14,38 @@ describe('playerwelcome', () => {
     afterEach(cleanup);
     it('opens the actions page when the first button is clicked', async () => {
       mockRouter.push("/initial-path");
+      const user = userEvent.setup();
       render (
         <PlayerWelcome />
       );
       const fgetStartedbtn = screen.getAllByRole('button')[0];
-      await fireEvent.click(fgetStartedbtn);
+      await user.click(fgetStartedbtn);
       expect(mockRouter).toMatchObject({asPath: "/actions"});
     });
 
     it('opens the actions page when the second button is clicked', async () => {
       mockRouter.push("/initial-path");
+      const user = userEvent.setup();
       render (
         <PlayerWelcome />
       );
       const fgetStartedbtn = screen.getAllByRole('button')[1];
-      await fireEvent.click(fgetStartedbtn);
+      await user.click(fgetStartedbtn); 
       expect(mockRouter).toMatchObject({asPath: "/actions"});
     });
+
+    it("Displays the inviter's name when inviterInfo is not null.", async () => {
+      const inviter = Builder<Inviter>().name('Test Name').build();
+      const inviterCtxValue = Builder<InviterContextType>().inviterInfo(inviter).build();
+      render(
+        <InviterContext.Provider value={inviterCtxValue}>
+          <PlayerWelcome />
+        </InviterContext.Provider>
+      );
+
+      const greeting = screen.queryByText(new RegExp(`${inviter.name}'s 8by8 Challenge!`));
+      expect(greeting).toBeInTheDocument();
+      const content = screen.queryByText(new RegExp(`Help ${inviter.name} win their`));
+      expect(content).toBeInTheDocument();
+    });
   });

src/contexts/inviter-context.tsx

@@ -0,0 +1,17 @@
+import { Inviter } from "@/models/Inviter";
+import { createContext, PropsWithChildren, useState } from "react";
+
+export type InviterContextType = {
+  inviterInfo:InviterInfo;
+}
+
+type InviterInfo = Inviter | null;
+
+//setting the default context to {activeUser:null} allows for testing unwrapped components
+export const InviterContext = createContext<InviterContextType>({inviterInfo: null});
+
+export function InviterContextProvider({children}:PropsWithChildren) {
+  const [inviterInfo,setInviterInfo] = useState<InviterInfo>(null);
+  return <InviterContext.Provider value={{inviterInfo}}>{children}</InviterContext.Provider>
+}
+

src/models/Inviter.ts

@@ -0,0 +1,5 @@
+export type Inviter = {
+  name:string;
+  avatar:'1' | '2' | '3' | '4';
+  inviterId:string;
+}

src/pages/player-welcome.tsx

@@ -1,7 +1,5 @@
-// Figure out how to get the data of the friend user.
-// Add comments.
-
 import PageContainer from "@/components/utils/page-container";
+import { InviterContext } from "@/contexts/inviter-context";
 import { UserContext } from "@/contexts/user-context";
 import Image from "next/image";
 import Link from "next/link";
@@ -16,31 +14,27 @@ import styles from "../styles/modules/pages/playerwelcome.module.scss";
 
 export default function PlayerWelcome() {
   const router = useRouter()
-  const {activeUser} = useContext(UserContext);
-
-  // For share this page needs to get the code from the url and then use that to get the
-  // friends info. If playerwelcome then check local storage to see if there is a friend's
-  // information that the user is doing actions for. If none of those two then send the user
-  // to the signin page.
+  const { activeUser } = useContext(UserContext);
+  const { inviterInfo } = useContext(InviterContext);
 
   return (
     <PageContainer>
       <section className={styles.section_1}>
-
+        
         <h1 className={styles.top_header}>
           <u className="underline">Support</u>{" "}
-          {/* {challengerInfo && challengerInfo.name !== null
-            ? `${challengerInfo.name}'s`
-            : "the"}{" "} */}
+          {inviterInfo
+            ? `${inviterInfo.name}'s`
+            : "the"}{" "}
           8by8 Challenge!
         </h1>
 
         <p>
           <b className={styles.content}>
             Help{" "}
-            {/* {challengerInfo && challengerInfo.name !== null
-              ? challengerInfo.name
-              : "your friend"}{" "} */}
+            {inviterInfo
+              ? inviterInfo.name
+              : "your friend"}{" "}
             win their <u>8by8 Challenge</u> by registering to vote or taking
             other actions to #stopasianhate!
           </b>
@@ -54,7 +48,6 @@ export default function PlayerWelcome() {
           Get Started
         </button>
 
-        {/* When the user is signed in don't show signin buttons. */}
         {!activeUser && (
           <p className={styles.signin_line}>
             Already have an account?{" "}
@@ -122,7 +115,6 @@ export default function PlayerWelcome() {
           Get Started
         </button>
 
-        {/* When the user is signed in don't show signin buttons. */}
         {!activeUser && (
           <p className={styles.signin_line}>
             Already have an account?{" "}

src/styles/modules/pages/playerwelcome.module.scss

@@ -58,12 +58,10 @@
   .black_curve {
     width: 100%;
     height: auto;
-    -moz-drag-over: none;
-    -webkit-user-drag: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    @extend .user-no-drag;
+    @extend .user-no-select;
+    position: relative;
+    vertical-align: middle;
   }
 }
 

src/styles/partials/_index.scss

@@ -13,6 +13,8 @@
 
 @forward "classes/utils/color-utils" as color-util-*;
 @forward "classes/utils/display-utils" as display-*;
+@forward "classes/utils/user-drag-utils" as user-drag-*;
+@forward "classes/utils/user-select-utils" as user-select-*;
 
 @forward "classes/molecules/buttons" as button-*;
 @forward "classes/molecules/links" as link-*;

src/styles/partials/classes/utils/_user-drag-utils.scss

@@ -0,0 +1,4 @@
+.user-no-drag {
+  -moz-drag-over: none;
+  -webkit-user-drag: none;
+}

src/styles/partials/classes/utils/_user-select-utils.scss

@@ -0,0 +1,6 @@
+.user-no-select {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}