From 23f590f654e23770447d0856d01df0934b6159e1 Mon Sep 17 00:00:00 2001 From: mayra lucia navarro Date: Thu, 19 Oct 2023 00:11:30 -0500 Subject: [PATCH 1/3] Extract components for meetups page --- app/javascript/components/meetups/MeetUp.jsx | 59 ++++++++++++ .../components/meetups/MonthSection.jsx | 23 +++++ .../components/meetups/YearSection.jsx | 15 +++ app/javascript/components/pages/Meetups.jsx | 91 +------------------ 4 files changed, 101 insertions(+), 87 deletions(-) create mode 100644 app/javascript/components/meetups/MeetUp.jsx create mode 100644 app/javascript/components/meetups/MonthSection.jsx create mode 100644 app/javascript/components/meetups/YearSection.jsx diff --git a/app/javascript/components/meetups/MeetUp.jsx b/app/javascript/components/meetups/MeetUp.jsx new file mode 100644 index 0000000..84d13a3 --- /dev/null +++ b/app/javascript/components/meetups/MeetUp.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Meetup = ({ speakers, title = '', talks, year, month, day }) => { + const eventWithSpeaker = talks.map((talk) => { + const speaker = speakers.find((speak) => speak.id === talk.speaker_id); + return { ...talk, speaker }; + }); + return ( +
  • +
    +
    +

    {title}

    + {eventWithSpeaker.length > 0 && + eventWithSpeaker.map(({ id, talk_title, speaker }) => ( +
    +
    + {talk_title} +
    +
    + +
    +

    + {speaker.name} +

    +

    + {speaker.tagline} +

    +
    +
    +
    + ))} +
    +
    + + + +
    +
    +
    • + ); +}; + +Meetup.propTypes = { + speakers: PropTypes.array, + title: PropTypes.string, + talks: PropTypes.array, + year: PropTypes.string, + month: PropTypes.string, + day: PropTypes.string, +}; + +export default Meetup; diff --git a/app/javascript/components/meetups/MonthSection.jsx b/app/javascript/components/meetups/MonthSection.jsx new file mode 100644 index 0000000..cbde0f0 --- /dev/null +++ b/app/javascript/components/meetups/MonthSection.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const MonthSection = ({ children, month }) => ( +
  • +
    +

    + {month} +

    +
    +
    +
      + {children} +
    +
    • +); + +export default MonthSection; + +MonthSection.propTypes = { + month: PropTypes.string, + children: PropTypes.node, +}; diff --git a/app/javascript/components/meetups/YearSection.jsx b/app/javascript/components/meetups/YearSection.jsx new file mode 100644 index 0000000..ebaa372 --- /dev/null +++ b/app/javascript/components/meetups/YearSection.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const YearSection = ({ children, year }) => ( +
    +

    {year}

    + +
    +); + +YearSection.propTypes = { + year: PropTypes.string, + children: PropTypes.node, +}; +export default YearSection; diff --git a/app/javascript/components/pages/Meetups.jsx b/app/javascript/components/pages/Meetups.jsx index c436748..299cfee 100644 --- a/app/javascript/components/pages/Meetups.jsx +++ b/app/javascript/components/pages/Meetups.jsx @@ -1,99 +1,16 @@ import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; -import PropTypes from 'prop-types'; import { getPastMeetups } from '../../datasources'; import SharedLayout from 'components/layout/SharedLayout'; import LoadingSpinner from 'components/LoadingSpinner'; import PageTitleWithContainer from 'components/PageTitleWithContainer'; +import Meetup from '../meetups/MeetUp'; +import YearSection from '../meetups/YearSection'; +import MonthSection from '../meetups/MonthSection'; +import Card from '../Card'; import 'stylesheets/meetup'; -const YearSection = ({ children, year }) => ( -
    -

    {year}

    - -
    -); - -YearSection.propTypes = { - year: PropTypes.string, - children: PropTypes.node, -}; - -const MonthSection = ({ children, month }) => ( -
  • -
    -

    - {month} -

    -
    -
    -
      - {children} -
    -
    • -); - -MonthSection.propTypes = { - month: PropTypes.string, - children: PropTypes.node, -}; - -const Meetup = ({ speakers, title = '', talks, year, month, day }) => { - const eventWithSpeaker = talks.map((talk) => { - const speaker = speakers.find((speak) => speak.id === talk.speaker_id); - return { ...talk, speaker }; - }); - return ( -
  • -
    -
    -

    {title}

    - {eventWithSpeaker.length > 0 && - eventWithSpeaker.map(({ id, talk_title, speaker }) => ( -
    -
    - {talk_title} -
    -
    - -
    -

    - {speaker.name} -

    -

    - {speaker.tagline} -

    -
    -
    -
    - ))} -
    -
    - - - -
    -
    -
    • - ); -}; - -Meetup.propTypes = { - speakers: PropTypes.array, - title: PropTypes.string, - talks: PropTypes.array, - year: PropTypes.string, - month: PropTypes.string, - day: PropTypes.string, -}; - const Meetups = () => { const [loading, setLoading] = useState(true); const [meetupsByYear, setMeetupsByYear] = useState({}); From 8104aa083ac9e5c95c7f5b40df3ce12f1b183fbc Mon Sep 17 00:00:00 2001 From: mayra lucia navarro Date: Thu, 19 Oct 2023 00:12:12 -0500 Subject: [PATCH 2/3] Rename Past Meetups to Meetups --- app/javascript/components/layout/Footer.jsx | 2 +- app/javascript/components/layout/Header.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/javascript/components/layout/Footer.jsx b/app/javascript/components/layout/Footer.jsx index 9672641..82de9ea 100644 --- a/app/javascript/components/layout/Footer.jsx +++ b/app/javascript/components/layout/Footer.jsx @@ -46,7 +46,7 @@ const Footer = () => ( Job Board - Past Meetups + Meetups diff --git a/app/javascript/components/layout/Header.jsx b/app/javascript/components/layout/Header.jsx index 17fc3aa..6b95feb 100644 --- a/app/javascript/components/layout/Header.jsx +++ b/app/javascript/components/layout/Header.jsx @@ -8,7 +8,7 @@ import 'stylesheets/header.scss'; const Header = () => { const links = [ { id: 1, text: 'Job Board', href: '/jobs' }, - { id: 2, text: 'Past Meetups', href: '/meetups' }, + { id: 2, text: 'Meetups', href: '/meetups' }, { id: 3, text: 'Partner with Us', href: '/partner-with-us' }, ]; From 173b58c827bdfd2a96b45ce33131a5babab25518 Mon Sep 17 00:00:00 2001 From: mayra lucia navarro Date: Fri, 20 Oct 2023 00:49:08 -0500 Subject: [PATCH 3/3] Add information to meetup page --- .../components/PageTitleWithContainer.jsx | 2 +- app/javascript/components/pages/Meetups.jsx | 47 +++++++++++++++++-- app/javascript/packs/application.js | 1 + app/javascript/stylesheets/page-title.scss | 5 +- 4 files changed, 48 insertions(+), 7 deletions(-) diff --git a/app/javascript/components/PageTitleWithContainer.jsx b/app/javascript/components/PageTitleWithContainer.jsx index 58edadc..b93c101 100644 --- a/app/javascript/components/PageTitleWithContainer.jsx +++ b/app/javascript/components/PageTitleWithContainer.jsx @@ -4,7 +4,7 @@ import PageTitle from 'components/PageTitle'; const PageTitleWithContainer = ({ text }) => { return ( -
    +
    ); diff --git a/app/javascript/components/pages/Meetups.jsx b/app/javascript/components/pages/Meetups.jsx index 299cfee..3743b67 100644 --- a/app/javascript/components/pages/Meetups.jsx +++ b/app/javascript/components/pages/Meetups.jsx @@ -7,7 +7,6 @@ import PageTitleWithContainer from 'components/PageTitleWithContainer'; import Meetup from '../meetups/MeetUp'; import YearSection from '../meetups/YearSection'; import MonthSection from '../meetups/MonthSection'; -import Card from '../Card'; import 'stylesheets/meetup'; @@ -27,10 +26,52 @@ const Meetups = () => { return ( <> - Past Meetups | WNB.rb + Meetups | WNB.rb - + +
    +

    + Our meetups are held virtually on the last Tuesday of every month at{' '} + + 12 pm Eastern Time + {' '} + . The content is typically + focused on Ruby or career-related topics, with 1-2 talks presented in a + lecture-style format. Anyone who identifies as a woman or non-binary + individual is welcome to attend. Fill in{' '} + + the Subscription form + {' '} + to receive an invitation to the Google Group, which will opt you into + calendar invites for upcoming meetups. +

    +

    + Are you interested in being a speaker? + {` We're constantly on the + lookout for presenters, whether you're an experienced speaker or if this is + your first time. Speaking at a WNB.rb meetup is an excellent opportunity to + enhance your public speaking abilities. If you're interested in giving a + talk, please provide your talk details via `} + + the Talk Proposal form + {' '} + or feel free to contact{' '} + Adrianna Chang on the WNB.rb Slack for more information. +

    +
    {loading ? ( ) : ( diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index eae385d..f8ca860 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -9,6 +9,7 @@ import 'channels'; import '../stylesheets/application.scss'; import '../stylesheets/page.scss'; +import 'bootstrap-icons/font/bootstrap-icons.css'; // Rails.start(); diff --git a/app/javascript/stylesheets/page-title.scss b/app/javascript/stylesheets/page-title.scss index c81cfc9..33d3068 100644 --- a/app/javascript/stylesheets/page-title.scss +++ b/app/javascript/stylesheets/page-title.scss @@ -1,6 +1,5 @@ .page-title { - @apply relative - min-h-[10rem]; + @apply min-h-[10rem]; /* overflow-auto; */ } @@ -9,7 +8,7 @@ } .title-container { - @apply pt-10 pl-20; + @apply pt-10 pl-4 md:pl-20; } .title-text {