feat: blur company reviews for users w/o access 🚫 (#487)

apps/member-profile/app/routes/_profile.companies_.$id.tsx

@@ -13,6 +13,7 @@ import {
 } from '@oyster/core/employment';
 import {
   getCompany,
+  hasReviewAccess,
   listCompanyEmployees,
   listCompanyReviews,
 } from '@oyster/core/employment/server';
@@ -33,8 +34,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   const session = await ensureUserAuthenticated(request);
 
   const id = params.id as string;
+  const memberId = user(session);
 
-  const [company, _employees, _reviews] = await Promise.all([
+  const [company, hasAccess, _employees, _reviews] = await Promise.all([
     getCompany({
       include: ['averageRating', 'employees', 'reviews'],
       select: [
@@ -48,12 +50,14 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
       where: { id },
     }),
 
+    hasReviewAccess(memberId),
+
     listCompanyEmployees({
       where: { companyId: id },
     }),
 
     listCompanyReviews({
-      memberId: user(session),
+      memberId,
       select: [
         'companyReviews.anonymous',
         'companyReviews.createdAt',
@@ -122,6 +126,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   return json({
     company,
     currentEmployees,
+    hasAccess,
     pastEmployees,
     reviews,
   });
@@ -228,7 +233,7 @@ function AverageRating({
 }
 
 function ReviewsList() {
-  const { reviews } = useLoaderData<typeof loader>();
+  const { hasAccess, reviews } = useLoaderData<typeof loader>();
 
   if (!reviews.length) {
     return null;
@@ -242,7 +247,7 @@ function ReviewsList() {
         </Text>
 
         <CompanyReview.List>
-          {reviews.map((review) => {
+          {reviews.map((review, i) => {
             return (
               <CompanyReview
                 key={review.id}
@@ -255,6 +260,7 @@ function ReviewsList() {
                 date={review.date}
                 editable={review.editable}
                 employmentType={review.employmentType as EmploymentType}
+                hasAccess={hasAccess}
                 hasUpvoted={review.upvoted as boolean}
                 id={review.id}
                 locationCity={review.locationCity}
@@ -267,6 +273,7 @@ function ReviewsList() {
                 reviewerId={review.reviewerId || ''}
                 reviewerLastName={review.reviewerLastName || ''}
                 reviewerProfilePicture={review.reviewerProfilePicture}
+                showAccessWarning={!hasAccess && i === 0}
                 text={review.text}
                 title={review.title || ''}
                 upvotesCount={review.upvotes}

apps/member-profile/app/routes/_profile.recap.$date.reviews.tsx

@@ -91,6 +91,7 @@ export default function RecapReviews() {
               }}
               date={review.date}
               employmentType={review.employmentType as EmploymentType}
+              hasAccess={true} // We'll allow access to all reviews in recaps.
               hasUpvoted={review.upvoted as boolean}
               id={review.id}
               locationCity={review.locationCity}

apps/member-profile/app/shared/components/company-review.tsx

@@ -1,6 +1,14 @@
 import { generatePath, Link, useFetcher } from '@remix-run/react';
 import { type PropsWithChildren, useState } from 'react';
-import { Check, ChevronDown, ChevronUp, Edit, Star, X } from 'react-feather';
+import {
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Edit,
+  Lock,
+  Star,
+  X,
+} from 'react-feather';
 
 import {
   type EmploymentType,
@@ -36,6 +44,7 @@ type CompanyReviewProps = {
   date: string;
   editable?: boolean;
   employmentType: EmploymentType;
+  hasAccess?: boolean;
   hasUpvoted: boolean | null;
   id: string;
   locationCity: string | null;
@@ -48,6 +57,7 @@ type CompanyReviewProps = {
   reviewerId: string;
   reviewerProfilePicture: string | null;
   reviewedAt: string;
+  showAccessWarning?: boolean;
   text: string;
   title: string;
   upvotesCount: string | null;
@@ -60,6 +70,7 @@ export const CompanyReview = ({
   date,
   editable,
   employmentType,
+  hasAccess,
   hasUpvoted,
   id,
   locationCity,
@@ -72,13 +83,16 @@ export const CompanyReview = ({
   reviewerLastName,
   reviewerProfilePicture,
   reviewedAt,
+  showAccessWarning,
   text,
   title,
   upvotesCount,
   workExperienceId,
 }: CompanyReviewProps) => {
   return (
-    <Card>
+    <Card className="relative">
+      {!hasAccess && <NoAccessOverlay showAccessWarning={showAccessWarning} />}
+
       <header className="flex items-center gap-1">
         <CompanyReviewer
           anonymous={anonymous}
@@ -176,6 +190,30 @@ export const CompanyReview = ({
   );
 };
 
+function NoAccessOverlay({
+  showAccessWarning,
+}: Pick<CompanyReviewProps, 'showAccessWarning'>) {
+  return (
+    <>
+      <div className="absolute left-0 top-0 h-full w-full rounded-[inherit] backdrop-blur-sm" />
+
+      {showAccessWarning && (
+        <div className="absolute left-1/2 top-1/2 flex w-full max-w-80 -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 rounded-lg bg-black/80 p-4">
+          <Lock color="white" />
+
+          <Text className="text-center" color="white" variant="sm">
+            In order to view company reviews, you must{' '}
+            <Link className="underline" to={Route['/companies/reviews/add']}>
+              add a review
+            </Link>{' '}
+            of one of your work experiences first!
+          </Text>
+        </div>
+      )}
+    </>
+  );
+}
+
 function CompanyReviewer({
   anonymous,
   reviewerFirstName,

packages/core/src/modules/employment/index.server.ts

@@ -1,5 +1,6 @@
 export { getCompany } from './queries/get-company';
 export { getCompanyReview } from './queries/get-company-review';
+export { hasReviewAccess } from './queries/has-review-access';
 export { listCompanies } from './queries/list-companies';
 export { listCompanyEmployees } from './queries/list-company-employees';
 export { listCompanyReviews } from './queries/list-company-reviews';

packages/core/src/modules/employment/queries/has-review-access.ts

@@ -0,0 +1,26 @@
+import { db } from '@oyster/db';
+
+/**
+ * Checks if a student has review access by checking if they have a work
+ * experience and company review.
+ *
+ * @param studentId - The ID of the student to check.
+ * @returns True if the student has review access, false otherwise.
+ */
+export async function hasReviewAccess(studentId: string): Promise<boolean> {
+  const workExperience = await db
+    .selectFrom('workExperiences')
+    .where('studentId', '=', studentId)
+    .executeTakeFirst();
+
+  if (!workExperience) {
+    return true;
+  }
+
+  const companyReview = await db
+    .selectFrom('companyReviews')
+    .where('studentId', '=', studentId)
+    .executeTakeFirst();
+
+  return !!companyReview;
+}