import React, {useState} from "react"; import "./style-sessions.css"; import { gql, useQuery, useMutation } from "@apollo/client" import { Link } from "react-router-dom" import { Formik, Field, Form } from "formik" const SESSIONS_ATTRIBUTES = gql` fragment SessionInfo on Session { id title startsAt day room level speakers { id name } } `; const CREATE_SESSION = gql` mutation createSession($session: SessionInput!) { createSession(session: $session) { ...SessionInfo } } ${SESSIONS_ATTRIBUTES} `; // Define the query const SESSIONS = gql` query sessions($day: String!) { intro: sessions(day: $day, level: "Introductory and overview") { ...SessionInfo } intermediate: sessions(day: $day, level: "Intermediate") { ...SessionInfo } advanced: sessions(day: $day, level: "Advanced") { ...SessionInfo } } ${SESSIONS_ATTRIBUTES} `; const ALL_SESSIONS = gql` query sessions { sessions { ...SessionInfo } } ${SESSIONS_ATTRIBUTES} `; function AllSessionList() { const { loading, error, data } = useQuery(ALL_SESSIONS); if (loading) return <p>Loading Sessions..</p> if (error) return <p>Error loading sessions!</p> return data.sessions.map((session) => ( <SessionItem key={session.id} session={{ ...session }} /> )); } function SessionList ({ day }) { if (day == "") day = "Wednesday" // execute query and store response json const { loading, error, data } = useQuery(SESSIONS, { variables: {day} }); if (loading) return <p>Loading Sessions..</p> if (error) return <p>Error loading sessions!</p> const results = []; results.push(data.intro.map((session) => ( <SessionItem key={session.id} session={{ ...session }} /> ))); results.push(data.intermediate.map((session) => ( <SessionItem key={session.id} session={{ ...session }} /> ))); results.push(data.advanced.map((session) => ( <SessionItem key={session.id} session={{ ...session }} /> ))); return results } function SessionItem({ session }) { const { id, title, day, room, level, startsAt, speakers } = session return ( <div key={id} className="col-xs-12 col-sm-6" style={{ padding: 5 }}> <div className="panel panel-default"> <div className="panel-heading"> <h3 className="panel-title">{title}</h3> <h5>{`Level: ${level}`}</h5> </div> <div className="panel-body"> <h5>{`Day: ${day}`}</h5> <h5>{`Room Number: ${room}`}</h5> <h5>{`Starts at: ${startsAt}`}</h5> </div> <div className="panel-footer"> {speakers.map(({ id, name }) => ( <span key={id} style={{ padding: 2 }}> <Link className="btn btn-default btn-lg" to={`/conference/speaker/${id}`} > View {name}'s Profile </Link> </span> ))} </div> </div> </div> ); } export function Sessions() { const [day, setDay] = useState(""); return ( <> <section className="banner"> <div className="container"> <div className="row" style={{ padding: 10 }}> <Link className="btn btn-lg center-block" to={`/conference/sessions/new`} > Submit a Session! </Link> </div> <div className="row"> <button type="button" onClick={() => setDay('All')} className="btn-oval"> All Sessions </button > <button type="button" onClick={() => setDay('Wednesday')} className="btn-oval"> Wednesday </button> <button type="button" onClick={() => setDay('Thursday')} className="btn-oval"> Thursday </button> <button type="button" onClick={() => setDay('Friday')} className="btn-oval"> Friday </button > </div> <SessionList day={day} /> { day =='All' && <AllSessionList /> } </div> </section> </> ); } export function SessionForm() { const updateSessions = (cache, { data }) => { cache.modify({ fields: { sessions(exisitingSessions = []) { const newSession = data.createSession; cache.writeQuery({ query: ALL_SESSIONS, data: { newSession, ...exisitingSessions } }); } } }) }; const [ create, { called, error } ] = useMutation(CREATE_SESSION, { update: updateSessions }); if(called) return <p>Session Submitted Successfully!</p> if(error) return <p>Failed to submit session</p> return ( <div style={{ width: "100%", display: "flex", alignContent: "center", justifyContent: "center", padding: 10, }} > <Formik initialValues={{ title: "", description: "", day: "", level: "", }} onSubmit={ async (values) => { await create({ variables: {session: values }}); }} > {() => ( <Form style={{ width: "100%", maxWidth: 500 }}> <h3 className="h3 mb-3 font-weight-normal">Submit a Session!</h3> <div className="mb-3" style={{ paddingBottom: 5 }}> <label htmlFor="inputTitle">Title</label> <Field id="inputTitle" className="form-control" required autoFocus name="title" /> </div> <div className="mb-3" style={{ paddingBottom: 5 }}> <label htmlFor="inputDescription">Description</label> <Field type="textarea" id="inputDescription" className="form-control" required name="description" /> </div> <div className="mb-3" style={{ paddingBottom: 5 }}> <label htmlFor="inputDay">Day</label> <Field name="day" id="inputDay" className="form-control" required /> </div> <div className="mb-3" style={{ paddingBottom: 5 }}> <label htmlFor="inputLevel">Level</label> <Field name="level" id="inputLevel" className="form-control" required /> </div> <div style={{ justifyContent: "center", alignContent: "center" }}> <button className="btn btn-primary">Submit</button> </div> </Form> )} </Formik> </div> ); } export function AddSession() { return ( <> <section className="banner"> <div className="container"> <div className="row"> <SessionForm /> </div> </div> </section> </> ); }