Add hidden event types

pages/[user].tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import prisma from '../lib/prisma';
 
 export default function User(props) {
-    const eventTypes = props.user.eventTypes.map(type =>
+    const eventTypes = props.eventTypes.map(type =>
         <li key={type.id}>
             <Link href={'/' + props.user.username + '/' + type.id.toString()}>
                 <a className="block px-6 py-4">
@@ -46,9 +46,10 @@ export default function User(props) {
 export async function getServerSideProps(context) {
     const user = await prisma.user.findFirst({
         where: {
-          username: context.query.user,
+            username: context.query.user,
         },
         select: {
+            id: true,
             username: true,
             name: true,
             bio: true,
@@ -63,9 +64,17 @@ export async function getServerSideProps(context) {
        }
     }
 
+    const eventTypes = await prisma.eventType.findMany({
+        where: {
+            userId: user.id,
+            hidden: false
+        }
+    });
+
     return {
         props: {
-            user
+            user,
+            eventTypes
         },
     }
 }  

pages/api/availability/eventtype.ts

@@ -26,12 +26,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         const title = req.body.title;
         const description = req.body.description;
         const length = parseInt(req.body.length);
+        const hidden = req.body.hidden;
 
         const createEventType = await prisma.eventType.create({
             data: {
                 title: title,
                 description: description,
                 length: length,
+                hidden: hidden,
                 userId: user.id,
             },
         });
@@ -56,6 +58,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         const title = req.body.title;
         const description = req.body.description;
         const length = parseInt(req.body.length);
+        const hidden = req.body.hidden;
 
         const updateEventType = await prisma.eventType.update({
             where: {
@@ -64,7 +67,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             data: {
                 title: title,
                 description: description,
-                length: length
+                length: length,
+                hidden: hidden
             },
         });
 

pages/availability/event/[type].tsx

@@ -12,6 +12,7 @@ export default function EventType(props) {
     const titleRef = useRef();
     const descriptionRef = useRef();
     const lengthRef = useRef();
+    const isHiddenRef = useRef();
 
     if (loading) {
         return <p className="text-gray-400">Loading...</p>;
@@ -27,12 +28,13 @@ export default function EventType(props) {
         const enteredTitle = titleRef.current.value;
         const enteredDescription = descriptionRef.current.value;
         const enteredLength = lengthRef.current.value;
+        const enteredIsHidden = isHiddenRef.current.checked;
 
         // TODO: Add validation
 
         const response = await fetch('/api/availability/eventtype', {
             method: 'PATCH',
-            body: JSON.stringify({id: props.eventType.id, title: enteredTitle, description: enteredDescription, length: enteredLength}),
+            body: JSON.stringify({id: props.eventType.id, title: enteredTitle, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden}),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -88,6 +90,26 @@ export default function EventType(props) {
                                             </div>
                                         </div>
                                     </div>
+                                    <div className="my-8">
+                                        <div className="relative flex items-start">
+                                            <div className="flex items-center h-5">
+                                                <input
+                                                    ref={isHiddenRef}
+                                                    id="ishidden"
+                                                    name="ishidden"
+                                                    type="checkbox"
+                                                    className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                                    defaultChecked={props.eventType.hidden}
+                                                />
+                                            </div>
+                                            <div className="ml-3 text-sm">
+                                                <label htmlFor="ishidden" className="font-medium text-gray-700">
+                                                    Hide this event type
+                                                </label>
+                                                <p className="text-gray-500">Hide the event type from your page, so it can only be booked through it's URL.</p>
+                                            </div>
+                                        </div>
+                                    </div>
                                     <button type="submit" className="btn btn-primary">Update</button>
                                     <Link href="/availability"><a className="ml-2 btn btn-white">Cancel</a></Link>
                                 </form>
@@ -129,7 +151,8 @@ export async function getServerSideProps(context) {
             id: true,
             title: true,
             description: true,
-            length: true
+            length: true,
+            hidden: true
         }
     });
 

pages/availability/index.tsx

@@ -17,6 +17,7 @@ export default function Availability(props) {
     const titleRef = useRef();
     const descriptionRef = useRef();
     const lengthRef = useRef();
+    const isHiddenRef = useRef();
 
     const startHoursRef = useRef();
     const startMinsRef = useRef();
@@ -55,12 +56,13 @@ export default function Availability(props) {
         const enteredTitle = titleRef.current.value;
         const enteredDescription = descriptionRef.current.value;
         const enteredLength = lengthRef.current.value;
+        const enteredIsHidden = isHiddenRef.current.checked;
 
         // TODO: Add validation
 
         const response = await fetch('/api/availability/eventtype', {
             method: 'POST',
-            body: JSON.stringify({title: enteredTitle, description: enteredDescription, length: enteredLength}),
+            body: JSON.stringify({title: enteredTitle, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden}),
             headers: {
                 'Content-Type': 'application/json'
             }
@@ -139,6 +141,11 @@ export default function Availability(props) {
                                             <tr>
                                                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                     {eventType.title}
+                                                    {eventType.hidden && 
+                                                        <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
+                                                            Hidden
+                                                        </span>
+                                                    }
                                                 </td>
                                                 <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                     {eventType.description}
@@ -221,6 +228,25 @@ export default function Availability(props) {
                                             </div>
                                         </div>
                                     </div>
+                                    <div className="my-8">
+                                        <div className="relative flex items-start">
+                                            <div className="flex items-center h-5">
+                                                <input
+                                                    ref={isHiddenRef}
+                                                    id="ishidden"
+                                                    name="ishidden"
+                                                    type="checkbox"
+                                                    className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                                />
+                                            </div>
+                                            <div className="ml-3 text-sm">
+                                                <label htmlFor="ishidden" className="font-medium text-gray-700">
+                                                    Hide this event type
+                                                </label>
+                                                <p className="text-gray-500">Hide the event type from your page, so it can only be booked through it's URL.</p>
+                                            </div>
+                                        </div>
+                                    </div>
                                     {/* TODO: Add an error message when required input fields empty*/}
                                     <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                         <button type="submit" className="btn btn-primary">
@@ -324,7 +350,8 @@ export async function getServerSideProps(context) {
             id: true,
             title: true,
             description: true,
-            length: true
+            length: true,
+            hidden: true
         }
     });
     return {

prisma/schema.prisma

@@ -15,6 +15,7 @@ model EventType {
   title         String
   description   String?
   length        Int
+  hidden        Boolean @default(false)
   user          User?   @relation(fields: [userId], references: [id])
   userId        Int?
 }