Save preview as member option in cookie rather than URL

acmucsd · Jan 24, 2024 · 5b6f809 · 5b6f809
1 parent d8f9a37
commit 5b6f809
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 26 deletions.
diff --git a/src/components/store/CollectionSlider/index.tsx b/src/components/store/CollectionSlider/index.tsx
@@ -15,7 +15,6 @@ interface CollectionSliderProps {
   description: string;
   items: PublicMerchItem[];
   canManageStore?: boolean;
-  previewPublic?: boolean;
   isHidden?: boolean;
 }
 
@@ -25,11 +24,8 @@ const CollectionSlider = ({
   description,
   items,
   canManageStore,
-  previewPublic,
   isHidden,
 }: CollectionSliderProps) => {
-  const preview = previewPublic ? '?preview=public' : '';
-
   return (
     <div className={styles.wrapper}>
       <h3 className={styles.title}>
@@ -46,7 +42,7 @@ const CollectionSlider = ({
               className={styles.card}
               image={getDefaultMerchItemPhoto(item)}
               title={item.itemName}
-              href={`${config.store.itemRoute}${item.uuid}${preview}`}
+              href={`${config.store.itemRoute}${item.uuid}`}
               cost={item.options[0]?.price ?? 0}
               key={item.uuid}
             >

diff --git a/src/lib/types/enums.ts b/src/lib/types/enums.ts
@@ -1,6 +1,7 @@
 export enum CookieType {
   USER = 'USER',
   ACCESS_TOKEN = 'ACCESS_TOKEN',
+  PREVIEW = 'PREVIEW',
 }
 
 export enum Community {

diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
@@ -1,15 +1,17 @@
 import { LinkButton, Typography } from '@/components/common';
 import { config } from '@/lib';
 import withAccessType from '@/lib/hoc/withAccessType';
-import { PermissionService } from '@/lib/services';
+import { CookieService, PermissionService } from '@/lib/services';
 import type { PrivateProfile } from '@/lib/types/apiResponses';
+import { CookieType } from '@/lib/types/enums';
 import type { GetServerSideProps } from 'next';
 
 interface AdminProps {
   user: PrivateProfile;
+  preview: string;
 }
 
-const AdminPage = ({ user: { accessType } }: AdminProps) => {
+const AdminPage = ({ user: { accessType }, preview }: AdminProps) => {
   return (
     <div>
       <Typography variant="h1/bold">Admin Actions</Typography>
@@ -26,6 +28,19 @@ const AdminPage = ({ user: { accessType } }: AdminProps) => {
       </div>
       <br />
       <Typography variant="h2/bold">Store</Typography>
+      <label>
+        <input
+          type="checkbox"
+          defaultChecked={preview === 'member'}
+          onChange={e =>
+            CookieService.setClientCookie(
+              CookieType.PREVIEW,
+              e.currentTarget.checked ? 'member' : 'admin'
+            )
+          }
+        />{' '}
+        Preview store as member
+      </label>
       <div
         style={{
           display: 'flex',
@@ -76,9 +91,10 @@ const AdminPage = ({ user: { accessType } }: AdminProps) => {
 
 export default AdminPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async () => {
+const getServerSidePropsFunc: GetServerSideProps = async ({ req, res }) => {
+  const preview = CookieService.getServerCookie(CookieType.PREVIEW, { req, res });
   return {
-    props: {},
+    props: { preview },
   };
 };
 

diff --git a/src/pages/store/collection/[uuid].tsx b/src/pages/store/collection/[uuid].tsx
@@ -24,7 +24,6 @@ const CollectionsPage = ({
   previewPublic,
 }: CollectionProps) => {
   const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic;
-  const preview = previewPublic ? '?preview=public' : '';
 
   return (
     <div className={styles.container}>
@@ -46,7 +45,7 @@ const CollectionsPage = ({
             <ItemCard
               image={getDefaultMerchItemPhoto(item)}
               title={item.itemName}
-              href={`${config.store.itemRoute}${item.uuid}${preview}`}
+              href={`${config.store.itemRoute}${item.uuid}`}
               cost={item.options[0]?.price ?? 0}
               key={item.uuid}
             >
@@ -66,13 +65,14 @@ const CollectionsPage = ({
 
 export default CollectionsPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res, query }) => {
+const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res }) => {
   const uuid = params?.uuid as string;
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  const preview = CookieService.getServerCookie(CookieType.PREVIEW, { req, res });
   try {
     const collection = await StoreAPI.getCollection(token, uuid);
     return {
-      props: { uuid, collection, previewPublic: query.preview === 'public' },
+      props: { uuid, collection, previewPublic: preview === 'member' },
     };
   } catch {
     return { notFound: true };

diff --git a/src/pages/store/index.tsx b/src/pages/store/index.tsx
@@ -8,7 +8,7 @@ import {
   Navbar,
 } from '@/components/store';
 import CreateButton from '@/components/store/CreateButton';
-import { config } from '@/lib';
+import { config, showToast } from '@/lib';
 import { StoreAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
@@ -18,18 +18,16 @@ import { getDefaultMerchItemPhoto } from '@/lib/utils';
 import styles from '@/styles/pages/StoreHomePage.module.scss';
 import { GetServerSideProps } from 'next';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 
 type View = 'collections' | 'all-items';
 
-function getPath(view: View, previewPublic: boolean): string {
+function getPath(view: View): string {
   const params = new URLSearchParams();
   if (view === 'all-items') {
     params.set('view', 'all');
   }
-  if (previewPublic) {
-    params.set('preview', 'public');
-  }
   return params.size > 0 ? `${config.store.homeRoute}?${params}` : config.store.homeRoute;
 }
 
@@ -45,10 +43,11 @@ const StoreHomePage = ({
   collections,
   previewPublic,
 }: HomePageProps) => {
+  const router = useRouter();
+
   const [helpOpen, setHelpOpen] = useState(false);
 
   const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic;
-  const preview = previewPublic ? '?preview=public' : '';
 
   const visibleCollections = collections.filter(
     collection => canManageStore || !collection.archived
@@ -65,13 +64,30 @@ const StoreHomePage = ({
         <div className={styles.header}>
           <h2>{view === 'collections' ? 'Browse our collections' : 'Browse all items'}</h2>
           {canManageStore && (
-            <Link className={styles.viewToggle} href={getPath(view, true)}>
+            <button
+              type="button"
+              className={styles.viewToggle}
+              onClick={() => {
+                CookieService.setClientCookie(CookieType.PREVIEW, 'member');
+                showToast(
+                  'Previewing store as member',
+                  'To re-enable admin store options, go to admin settings.',
+                  [
+                    {
+                      text: 'Admin settings',
+                      onClick: () => router.push(config.admin.homeRoute),
+                    },
+                  ]
+                );
+                router.replace(config.store.homeRoute);
+              }}
+            >
               View store as member
-            </Link>
+            </button>
           )}
           <Link
             className={styles.viewToggle}
-            href={getPath(view === 'collections' ? 'all-items' : 'collections', previewPublic)}
+            href={getPath(view === 'collections' ? 'all-items' : 'collections')}
             scroll={false}
           >
             {view === 'collections' ? 'See all items' : 'See collections'}
@@ -84,7 +100,7 @@ const StoreHomePage = ({
                 image={getDefaultMerchItemPhoto(collection.items[0])}
                 title={collection.title}
                 description={collection.description}
-                href={`${config.store.collectionRoute}${collection.uuid}${preview}`}
+                href={`${config.store.collectionRoute}${collection.uuid}`}
                 key={collection.uuid}
               >
                 {canManageStore && collection.archived && <HiddenIcon type="collection" />}
@@ -122,14 +138,15 @@ export default StoreHomePage;
 
 const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) => {
   const AUTH_TOKEN = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  const preview = CookieService.getServerCookie(CookieType.PREVIEW, { req, res });
 
   const collections = await StoreAPI.getAllCollections(AUTH_TOKEN);
 
   return {
     props: {
       view: query.view === 'all' ? 'all-items' : 'collections',
       collections,
-      previewPublic: query.preview === 'public',
+      previewPublic: preview === 'member',
     },
   };
 };

diff --git a/src/pages/store/item/[uuid].tsx b/src/pages/store/item/[uuid].tsx
@@ -81,17 +81,18 @@ const StoreItemPage = ({
 
 export default StoreItemPage;
 
-const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res, query }) => {
+const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res }) => {
   const uuid = params?.uuid as string;
   const token = CookieService.getServerCookie(CookieType.ACCESS_TOKEN, { req, res });
+  const preview = CookieService.getServerCookie(CookieType.PREVIEW, { req, res });
 
   try {
     const item = await StoreAPI.getItem(uuid, token);
     return {
       props: {
         uuid,
         item,
-        previewPublic: query.preview === 'public',
+        previewPublic: preview === 'member',
       },
     };
   } catch {