From e60e37dc44060c6c13153caea2aa09fcf5ed97fd Mon Sep 17 00:00:00 2001
From: Suraj Rane <suraj.rane@joshsoftware.com>
Date: Wed, 12 Aug 2020 13:06:50 +0530
Subject: [PATCH 1/2] Added Opensource Index page with Carousel card, Section
 descriptions & Community events section

---
 src/components/layout/Navbar.js               |   5 +
 src/components/opensource/communityEvents.jsx |  80 +++++++++++
 src/components/opensource/imageCarousel.jsx   |  77 ++++++++++
 src/components/opensource/index.jsx           |  60 ++++++++
 src/components/opensource/sectionFragment.jsx | 135 ++++++++++++++++++
 src/components/opensource/videoCarousel.jsx   |  28 ++++
 src/layout.js                                 |   2 +
 src/routeConstants.js                         |   1 +
 8 files changed, 388 insertions(+)
 create mode 100644 src/components/opensource/communityEvents.jsx
 create mode 100644 src/components/opensource/imageCarousel.jsx
 create mode 100644 src/components/opensource/index.jsx
 create mode 100644 src/components/opensource/sectionFragment.jsx
 create mode 100644 src/components/opensource/videoCarousel.jsx

diff --git a/src/components/layout/Navbar.js b/src/components/layout/Navbar.js
index 91ca2151..b977aeb8 100644
--- a/src/components/layout/Navbar.js
+++ b/src/components/layout/Navbar.js
@@ -75,6 +75,11 @@ Component.defaultProps = {
       title: "Success Stories",
       url: routes.SUCCESS_STORIES_URL
     },
+    {
+      id: 10,
+      title: "Open Source",
+      url: routes.OPEN_SOURCE_URL
+    },
     {
       id: 5,
       title: "Blogs",
diff --git a/src/components/opensource/communityEvents.jsx b/src/components/opensource/communityEvents.jsx
new file mode 100644
index 00000000..0601319b
--- /dev/null
+++ b/src/components/opensource/communityEvents.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { Spinner } from "reactstrap";
+import { API_BASE_URL } from "../../globalConstants";
+
+const CommunityEvents = (props) => {
+  const [loading, setLoading] = useState(false);
+  const [events, setEvents] = useState([]);
+
+  // helper function to fetch community events
+  const fetchEvents = () => {
+    setLoading(true);
+    return fetch(`${API_BASE_URL}community_events`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }).then((response) => response.json());
+  };
+
+  // useEffect to fetch and store the events data
+  useEffect(() => {
+    const promise = fetchEvents();
+    promise
+      .then((responseData) => {
+        setEvents(responseData.community_events);
+        setLoading(false);
+      })
+      .catch((error) => console.log(error));
+  }, []);
+
+  return (
+    <section className="section-content">
+      <div className="container">
+        <p className="section-heading text-center mb-5">
+          Organising Community Events
+        </p>
+        {loading && (
+          <div className="row d-flex justify-content-center">
+            <Spinner style={{ width: "3rem", height: "3rem" }} />
+          </div>
+        )}
+        {loading === false && (
+          <div className="row justify-content-center">
+            {events.map((event, index) => {
+              return (
+                <div
+                  className="col-xs-12 col-md-6 col-lg-4 mb-4 justify-content-center"
+                  key={index}
+                >
+                  <div className="card card-community-event">
+                    <iframe
+                      className="card-video"
+                      src={event.video}
+                      width="100%"
+                      height="100%"
+                      title={index}
+                      frameBorder="0"
+                      allowFullScreen
+                    />
+                    <div className="card-body">
+                      <p className="card-title text-danger text-center">
+                        {event.name}
+                      </p>
+                      <p className="card-text community-event-description">
+                        {event.description}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default CommunityEvents;
diff --git a/src/components/opensource/imageCarousel.jsx b/src/components/opensource/imageCarousel.jsx
new file mode 100644
index 00000000..5e377ad7
--- /dev/null
+++ b/src/components/opensource/imageCarousel.jsx
@@ -0,0 +1,77 @@
+import React from "react";
+import { Card, CardBody, Badge } from "reactstrap";
+import Media from "react-media";
+import { API_PUBLIC_URL } from "../../globalConstants";
+const ImageCarousel = ({ description, name, tags, image_url }) => {
+  const MobileView = (
+    <>
+      <div className="card-carousel-title mb-2">{name}</div>
+      <img
+        className="img-fluid m-auto"
+        src={`${API_PUBLIC_URL}${image_url}`}
+        alt="open-source-carousel"
+      />
+      <div className="my-2">
+        <span className="card-carousel-domain">Domain Name</span>
+      </div>
+      <p className="card-carousel-description">
+        {description.slice(0, 150)}...
+      </p>
+      {tags.map((tag, index) => (
+        <Badge color="danger tech-tag" key={index}>
+          {tag}
+        </Badge>
+      ))}
+    </>
+  );
+
+  const WebView = (
+    <>
+      <div className="row justify-content-around">
+        <div className="col-sm-5">
+          <div className="my-2">
+            <span className="card-carousel-domain">Domain Name</span>
+          </div>
+          <img
+            src={`${API_PUBLIC_URL}${image_url}`}
+            alt="open-source-carousel"
+          />
+        </div>
+        <div className="col-sm-5">
+          <p className="card-carousel-title mb-2">{name}</p>
+          <p className="card-carousel-description">
+            {description.slice(0, 150)}...
+          </p>
+        </div>
+      </div>
+      <div className="row justify-content-center">
+        {tags.map((tag, index) => (
+          <Badge color="danger tech-tag" key={index}>
+            {tag}
+          </Badge>
+        ))}
+      </div>
+    </>
+  );
+
+  return (
+    <Card className="card-carousel">
+      <CardBody>
+        <div className="container">
+          <Media query="(max-width: 500px)">
+            {(matches) => (matches ? MobileView : WebView)}
+          </Media>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+ImageCarousel.defaultProps = {
+  description: "",
+  name: "",
+  tags: [],
+  image_url: "",
+};
+
+export default React.memo(ImageCarousel);
diff --git a/src/components/opensource/index.jsx b/src/components/opensource/index.jsx
new file mode 100644
index 00000000..6c868c2c
--- /dev/null
+++ b/src/components/opensource/index.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import CommunityEvents from "./communityEvents";
+import SectionFragment from "./sectionFragment";
+
+const OpenSource = (props) => {
+  return (
+    <div>
+      <section className="section-opensource">
+        {props.sectionsData.map((section, index) => {
+          return (
+            <SectionFragment
+              sectionHeading={section.title}
+              textInfo={section.description}
+              sectionId={section.section_id}
+              carouselType={section.carousel_type}
+              index={index}
+              key={section.title}
+            />
+          );
+        })}
+        <CommunityEvents />
+      </section>
+    </div>
+  );
+};
+
+OpenSource.defaultProps = {
+  sectionsData: [
+    {
+      title: "Driving Open Source",
+      section_id: "open_source_contributions",
+      carousel_type: "image",
+      description:
+        "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+    },
+    {
+      title: "Trainings at Josh",
+      section_id: "trainings",
+      carousel_type: "video",
+      description:
+        "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+    },
+    {
+      title: "Talks at Josh",
+      section_id: "community_events",
+      carousel_type: "video",
+      description:
+        "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+    },
+    {
+      title: "Josh Hackathon",
+      section_id: "hackathons",
+      carousel_type: "image",
+      description:
+        "We take pride in working with our community on various events, platforms and collaborations. True to our name, we are passionate about helping the progress of technology disruption in all forms.",
+    },
+  ],
+};
+
+export default OpenSource;
diff --git a/src/components/opensource/sectionFragment.jsx b/src/components/opensource/sectionFragment.jsx
new file mode 100644
index 00000000..e9695d1d
--- /dev/null
+++ b/src/components/opensource/sectionFragment.jsx
@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Row, Col } from "reactstrap";
+import JoshCarousel from "../home/carousel";
+import ImageCarousel from "./imageCarousel";
+import Media from "react-media";
+import { API_BASE_URL } from "../../globalConstants";
+import VideoCarousel from "./videoCarousel";
+
+const SectionFragment = ({
+  sectionHeading,
+  textInfo,
+  index,
+  sectionId,
+  carouselType,
+}) => {
+  const [sectionData, setSectionData] = useState([]);
+  let alignmentRight = index % 2 === 0;
+
+  // helper function to fetch the data for sepecific section from API
+  const fetchSectionData = useCallback(() => {
+    return fetch(`${API_BASE_URL}${sectionId}`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    }).then((response) => response.json());
+  }, [sectionId]);
+
+  // helper function to get array of carousel items.
+  const getCarouselItems = () => {
+    if (sectionData.length !== 0) {
+      return sectionData[Object.keys(sectionData)[0]].map((data) =>
+        // based on the carousel type for specific section return image or video carousel
+        carouselType === "image" ? (
+          <ImageCarousel {...data} />
+        ) : (
+          <VideoCarousel {...data} />
+        )
+      );
+    }
+    return [];
+  };
+
+  // useEffect for fetching and locally storing the data
+  useEffect(() => {
+    const promise = fetchSectionData();
+    promise
+      .then((responseData) => {
+        setSectionData(responseData);
+      })
+      .catch((error) => console.log(error));
+  }, [fetchSectionData, sectionId]);
+
+  const carouselSettings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    arrows: false,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    dotsClass: "slick-dots bottom-100",
+  };
+
+  // get carousel section
+  const SectionCarousel = (
+    <JoshCarousel items={getCarouselItems()} settings={carouselSettings} />
+  );
+
+  // get section textual context ie. heading,description & button
+  const SectionDescription = (
+    <>
+      <h4 className="section-heading">{sectionHeading}</h4>
+      <p className="txt-info">{textInfo}</p>
+      <button className="btn btn-gray">VIEW ALL</button>
+    </>
+  );
+
+  const WebView = (
+    <>
+      <Row className="justify-content-around m-auto d-flex">
+        {alignmentRight === true && (
+          <>
+            <Col md={6}>{SectionCarousel}</Col>
+            <Col md={5}>{SectionDescription}</Col>
+          </>
+        )}
+        {alignmentRight === false && (
+          <>
+            <Col md={5} className="text-right">
+              {SectionDescription}
+            </Col>
+            <Col md={6}>{SectionCarousel}</Col>
+          </>
+        )}
+      </Row>
+    </>
+  );
+
+  const MobileView = (
+    <>
+      <Row className="justify-content-between m-auto d-flex">
+        <Col>
+          <h4 className="section-heading">{sectionHeading}</h4>
+          <JoshCarousel
+            items={getCarouselItems()}
+            settings={carouselSettings}
+          />
+          <p className="txt-info">{textInfo}</p>
+          <div className="btn-wrap">
+            <button className="btn btn-gray">VIEW ALL</button>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+
+  return (
+    <section
+      className={`section-content ${
+        alignmentRight === true ? "section-even" : "section-odd"
+      }`}
+    >
+      <div className="container">
+        <Media query="(max-width: 500px)">
+          {(matches) => (matches ? MobileView : WebView)}
+        </Media>
+      </div>
+    </section>
+  );
+};
+
+export default React.memo(SectionFragment);
diff --git a/src/components/opensource/videoCarousel.jsx b/src/components/opensource/videoCarousel.jsx
new file mode 100644
index 00000000..1c9d488a
--- /dev/null
+++ b/src/components/opensource/videoCarousel.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Card, CardBody } from "reactstrap";
+import openSourceCarousel from "../../assets/images/openSourceCarousel.png";
+//TODO-Incomplete design
+const VideoCarousel = ({ description, name, tags, image_url }) => {
+  return (
+    <Card className="card-carousel">
+      <CardBody>
+        <div className="container">
+          <div className="row justify-content-center">
+            <div className="col-sm-10">
+              <img
+                src={openSourceCarousel}
+                alt="open-source-carousel"
+                className="m-auto"
+              />
+              <p className="card-carousel-title mb-2 m-auto">{name}</p>
+              <p className="card-carousel-description">{description}</p>
+              <div>Display Videos here</div>
+            </div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default React.memo(VideoCarousel);
diff --git a/src/layout.js b/src/layout.js
index 9a2e0e06..e2a85b7e 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -19,6 +19,7 @@ const News = lazy(() => import("./components/news/index.js"));
 const Talks = lazy(() => import("./components/talks/index.js"));
 const Publications = lazy(() => import("./components/publications/index.js"));
 const WhitePapers = lazy(() => import("./components/whitePapers/index.js"));
+const OpenSource = lazy(() => import("./components/opensource/index.jsx"))
 
 const Layout = ({ location }) => {
   useEffect(() => {
@@ -41,6 +42,7 @@ const Layout = ({ location }) => {
         <Route exact path={routes.TALKS} component={Talks} />
         <Route path={routes.PUBLICATIONS} component={Publications} />
         <Route path={routes.WHITE_PAPERS} component={WhitePapers} />
+        <Route path={routes.OPEN_SOURCE_URL} component={OpenSource} />
       </Switch>
     </Suspense>
   );
diff --git a/src/routeConstants.js b/src/routeConstants.js
index b4f1ae49..7f62416c 100644
--- a/src/routeConstants.js
+++ b/src/routeConstants.js
@@ -11,3 +11,4 @@ export const NEWS = "/media-coverage";
 export const TALKS = "/talks";
 export const PUBLICATIONS = "/publications";
 export const WHITE_PAPERS = "/white-papers";
+export const OPEN_SOURCE_URL = "/open-source";
\ No newline at end of file

From d532c2cb86b84a1b9efe95f1b897f85d55dd588c Mon Sep 17 00:00:00 2001
From: Suraj Rane <suraj.rane@joshsoftware.com>
Date: Wed, 12 Aug 2020 13:08:01 +0530
Subject: [PATCH 2/2] Added Stylesheet for opensorce page

---
 src/assets/images/openSourceCarousel.png      | Bin 0 -> 12526 bytes
 src/assets/stylesheets/main.scss              |   1 +
 src/assets/stylesheets/pages/_opensource.scss | 107 ++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 src/assets/images/openSourceCarousel.png
 create mode 100644 src/assets/stylesheets/pages/_opensource.scss

diff --git a/src/assets/images/openSourceCarousel.png b/src/assets/images/openSourceCarousel.png
new file mode 100644
index 0000000000000000000000000000000000000000..d99ecc6a3ca1d47a84d213f58cffb54bb04eae5a
GIT binary patch
literal 12526
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
Ef)ofTH2?qr

literal 0
HcmV?d00001

diff --git a/src/assets/stylesheets/main.scss b/src/assets/stylesheets/main.scss
index 9f75088a..939a5b02 100644
--- a/src/assets/stylesheets/main.scss
+++ b/src/assets/stylesheets/main.scss
@@ -35,5 +35,6 @@
 @import "pages/about-us";
 @import "pages/contact-us";
 @import "pages/testimonial";
+@import "pages/opensource";
 /* offcanvas */
 @import "offcanvas";
diff --git a/src/assets/stylesheets/pages/_opensource.scss b/src/assets/stylesheets/pages/_opensource.scss
new file mode 100644
index 00000000..83cbfe42
--- /dev/null
+++ b/src/assets/stylesheets/pages/_opensource.scss
@@ -0,0 +1,107 @@
+.section-opensource {
+  margin-top: rem(75px);
+  .section-content {
+    padding: rem(150px 0);
+
+    @include media-breakpoint-down(sm) {
+      padding: 0;
+    }
+
+    &.section-even {
+      background-color: #fafafa;
+    }
+    &.section-odd {
+      background-color: #f4f4f4;
+    }
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(center);
+
+    .section-heading {
+      font-family: Lato-Bold;
+      text-transform: uppercase;
+      font-size: 26pt;
+      color: #333333;
+      margin-bottom: rem(32px);
+      @include media-breakpoint-down(sm) {
+        font-size: 24pt;
+        margin: rem(42px) rem(5px);
+      }
+    }
+
+    .txt-info {
+      font-family: Lato-Light;
+      font-size: 14pt;
+      color: #333333;
+      margin-bottom: rem(42px);
+      @include media-breakpoint-down(sm) {
+        margin: rem(42px) rem(5px);
+        text-align: center;
+      }
+    }
+
+    .btn-wrap {
+      @include media-breakpoint-down(sm) {
+        margin: rem(62px) rem(5px);
+        text-align: center;
+      }
+    }
+
+    .card-carousel {
+      border-radius: rem(20px);
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+      .card-carousel-title {
+        font-family: Lato-Bold;
+        color: #333333;
+        font-size: 18pt;
+      }
+      .card-carousel-description {
+        font-family: Lato-Light;
+        color: #808080;
+        font-size: 14px;
+      }
+      .card-carousel-domain {
+        padding: 8px;
+        border: 1px solid #cf4338;
+        border-radius: 15px;
+        color: #cf4338;
+        font-size: 11px;
+      }
+      .tech-tag {
+        margin: 5px;
+        font-size: 11pt;
+      }
+    }
+
+    .card {
+      &.card-community-event {
+        border-radius: 2rem;
+        width: 75%;
+        margin: auto;
+      }
+
+      .card-body {
+        padding: 0.75rem;
+      }
+
+      .community-event-description {
+        font-size: 11pt;
+      }
+
+      .card-title {
+        font-family: Lato-Bold;
+        font-size: 14pt;
+        margin-bottom: 0.4rem;
+      }
+
+      .card-video {
+        // border-radius: 2.25rem;
+        height: 96px;
+        border-top-left-radius: 2.25rem;
+        border-top-right-radius: 2.25rem;
+      }
+    }
+  }
+}