Merge pull request #15 from camer0nluo/wishlist

feature: add edit event title name and modal

web/src/components/EventsCell/EventsCell.tsx

@@ -2,12 +2,15 @@ import type { EventsQuery } from 'types/graphql'
 
 import type { CellFailureProps, CellSuccessProps } from '@redwoodjs/web'
 import { useMutation } from '@redwoodjs/web'
+import { Toaster } from '@redwoodjs/web/toast'
 
 import Button from '../Button/Button'
+import ModalPopup from '../ModalPopup/ModalPopup'
 
 export const QUERY = gql`
   query EventsQuery($id: String!) {
     event(id: $id) {
+      id
       name
       date
       sendReminder
@@ -47,6 +50,22 @@ export const GET_EVENT_DATA = gql`
     }
   }
 `
+
+export const UPDATE_EVENT_USERS = gql`
+  mutation updateEventUsers($id: String!, $input: UpdateEventInput!) {
+    updateEvent(id: $id, input: $input) {
+      userStatus {
+        eventId
+        status
+        id
+        user {
+          firstName
+          email
+        }
+      }
+    }
+  }
+`
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>
@@ -79,25 +98,49 @@ export const Success = ({ event }: CellSuccessProps<EventsQuery>) => {
           <ModifyEvent id={event.id} />
         </div>
       </div>
-      {/* <Button className="button" handleClick={event.sendReminder/> */}
     </ul>
   )
 }
 
-export const ModifyEvent = ({ id, name }) => {
+export const ModifyEvent = ({ id }) => {
+  const [showModal, setShowModal] = React.useState(false)
+  const [name, setName] = React.useState('')
   const [updateEventName, { data, loading, error }] =
     useMutation(UPDATE_EVENT_NAME)
 
   const handleCheckClick = () => {
     updateEventName({
       variables: { id, name },
+      refetchQueries: [{ query: GET_EVENT_DATA, variables: { id } }],
     })
+    setShowModal(false)
+  }
+  const openEditEventModal = () => {
+    setShowModal(true)
   }
 
+  const inputs = (
+    <input
+      type="text"
+      className="date-field"
+      placeholder="new name here"
+      onChange={(e) => setName(e.target.value)}
+    />
+  )
   return (
     <>
+      {showModal && (
+        <ModalPopup
+          setShowModal={() => setShowModal(false)}
+          title="Modify Event Name"
+          message="Modify your event name"
+          confirm={handleCheckClick}
+          inputElement={inputs}
+        ></ModalPopup>
+      )}
+
       <Button
-        handleClick={handleCheckClick}
+        handleClick={openEditEventModal}
         className="margin-auto bg-supernova align-middle text-black"
         size="small"
       >

web/src/components/ModalPopup/ModalPopup.stories.tsx

@@ -0,0 +1,25 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ModalPopup from './ModalPopup'
+
+const meta: Meta<typeof ModalPopup> = {
+  component: ModalPopup,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ModalPopup>
+
+export const Primary: Story = {}

web/src/components/ModalPopup/ModalPopup.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import ModalPopup from './ModalPopup'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('ModalPopup', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<ModalPopup />)
+    }).not.toThrow()
+  })
+})

web/src/components/ModalPopup/ModalPopup.tsx

@@ -0,0 +1,75 @@
+const ModalPopup = ({
+  setShowModal,
+  title,
+  message,
+  inputElement,
+  confirm,
+}) => {
+  return (
+    <div
+      className="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+            <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">
+                <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <svg
+                    className="h-6 w-6 text-green-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    strokeWidth="1.5"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                    />
+                  </svg>
+                </div>
+                <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                  <h3
+                    className="text-base font-semibold leading-6 text-gray-900"
+                    id="modal-title"
+                  >
+                    {title}
+                  </h3>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">{message}</p>
+                    {inputElement}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+              <button
+                type="button"
+                onClick={confirm}
+                className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+              >
+                Confirm
+              </button>
+              <button
+                type="button"
+                className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                onClick={() => setShowModal(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ModalPopup

web/src/pages/EventInvitePage/EventInvitePage.tsx

@@ -1,15 +1,14 @@
 import { Link, routes } from '@redwoodjs/router'
-import { MetaTags, useMutation } from '@redwoodjs/web'
+import { MetaTags } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/dist/toast'
 
 import EventsCell from 'src/components/EventsCell/EventsCell'
-import { ModifyEvent } from 'src/components/EventsCell/EventsCell'
 import InviteGroup from 'src/components/InviteGroup/InviteGroup'
 
 const EventInvitePage = ({ id }) => {
   return (
     <>
-      <MetaTags title="EventInvite" description="Event Invite page" />
+      <MetaTags title="Invite a Friend" description="Event Invite Page" />
       <EventsCell id={id} />
       <InviteGroup id={id} />
     </>