feat(Hredhya):sub and parent projects

src/components/common/Card/Card.js

@@ -36,7 +36,7 @@ import Attachments from "./Attachments";
  */
 export default function Card(props) {
   const router = useRouter();
-
+  
   return (
     <Container
       style={props.style}
@@ -61,7 +61,8 @@ export default function Card(props) {
             </TagsContainer>
           )}
           {props.isLinkingInside ? (
-            <Link href={`${router.pathname}/${props.cardData.href}`} passHref>
+              // <Link href={`${router.pathname}/${props.cardData.href}`} passHref>
+                <Link href={`/projects/${props.cardData.href}`} passHref>
               <a rel="noopener noreferrer">
                 <Image alt="" imageSrc={props.cardData.imageSrc} />
               </a>
@@ -81,7 +82,8 @@ export default function Card(props) {
           <CardTitle
             data={props.cardData}
             isLinkingInside={props.isLinkingInside}
-            pathname={router.pathname}
+            // pathname={router.pathname}
+            pathname="/projects"
           />
           {props.cardData.secondaryText && (
             <SecondaryText>{props.cardData.secondaryText}</SecondaryText>
@@ -99,4 +101,4 @@ export default function Card(props) {
       )}
     </Container>
   );
-}
+}

src/components/modules/Projects/Project/Project.js

@@ -20,32 +20,64 @@ import Milestones from "./Milestones";
 import JoinSupport from "./JoinSupport";
 import HelpBuild from "./HelpBuild";
 import Sessions from "./Sessions";
+import SubProjects from "./SubProjects/SubProjects";
 
-const Project = ({ project, theme }) => {
+const Project = ({ project,subProjects, theme }) => {
   const router = useRouter();
   if (router.isFallback) {
     return <div>Loading...</div>;
   }
-  return (
-    <Wrapper>
-      <div id="background" />
-      <HeroSection />
-      <Tags />
-      <Vision />
-      <Description
-        descriptionData={project.description}
-        images={project.Images}
-      />
-      <Role data={project.openPositions} />
-      <Milestones data={project?.board?.ProjectMilestone} />
-      <JoinSupport/>
-      <HelpBuild/>
-      <Sessions calendarId={project.calendarId} />
-      <Team data={project.team} />
-    </Wrapper>
-  );
+   const { slug = [] } = router.query;
+   let isParentProject = true;
+    // Getting all subprojects under the parent and filter it to match with the requested subproject
+     let subProject ="";
+    if(slug.length=== 2){
+      const subProjectList= subProjects?.filter(subproj=> slug[1] === subproj.slug);
+      subProject=subProjectList[0];
+    }
+    // check if its for subproject rendering
+     if((subProject) && (slug.length==2)){
+      isParentProject= false;
+    }
+    // Rendering the components based on,parent project or subproject
+    if(isParentProject) {
+      return (
+        <Wrapper>
+        <div id="background" />
+        <HeroSection />
+        <Tags />
+        <Vision />
+        <Description
+          descriptionData={project.description}
+          images={project.Images}
+        />
+          <SubProjects subprojects = {project.subProjects} projSlug={project.slug}/>
+        <Role data={project.openPositions} />
+        <Milestones data={project?.board?.ProjectMilestone} />
+         <JoinSupport/>
+        <HelpBuild/>
+        <Sessions calendarId={project.calendarId} />
+        <Team data={project.team} />
+      </Wrapper>
+
+    );
+  } else {
+      return (
+        <Wrapper>
+        <div id="background" />
+        <HeroSection />
+        <Tags />
+        <Vision />
+        <Description
+          descriptionData={subProject.description}
+          images={subProject.Images}
+        />
+         <JoinSupport/>
+        <HelpBuild/>
+        </Wrapper>
+      );
+  }
 };
-
 export default withTheme(Project);
 
 // const Project = (props) => {
@@ -202,4 +234,4 @@ export default withTheme(Project);
 //   );
 // };
 
-// export default withTheme(Project);
+// export default withTheme(Project);

src/components/modules/Projects/Project/SubProjects/StyledSubProjects.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+export const Layout = styled.div`
+  display: flex;
+  gap:2rem;
+  width: 100%;
+  height: 100%;
+  padding:20px 0;
+  `;
+
+export const ProjectContainer = styled.div`
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 20%);
+  width: 100%;
+  height: 100%;
+  max-width: 530px;
+  color:black;
+  @media (orientation: portrait) {
+    width: 90vw;
+  }
+`;

src/components/modules/Projects/Project/SubProjects/SubProjects.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import Section from "../Section";
+import Link from "next/link";
+import Card from "../../../../common/Card";
+import { Layout, ProjectContainer } from "./StyledSubProjects";
+
+const SubProjects = ({subprojects,projSlug}) => {
+
+  if (!Array.isArray(subprojects) || subprojects.length <= 0) {
+    return null;
+  }
+
+  return (
+    <Section
+    bgColor="#3C3B3C"
+    Title="Subprojects"
+    Content={
+    <Layout>
+          {subprojects?.map((subproject, i) => ( 
+          <ProjectContainer key = {i}>
+          <Card
+              isLinkingInside
+               style={{ margin: 0, width: "100%", height: "100%" }}
+                             cardData={{
+                 id: subproject.id,
+                title: subproject.title,
+                secondaryText: `Commitment level: ${subproject.commitmentLevel}`,
+               tags: subproject.keywords.map(({ keyword }) => keyword),
+                description: subproject.catchPhrase,
+                href: projSlug+"/"+subproject.slug,
+               imageSrc: subproject.heroImage.url,
+              actions: (
+                  <>
+                    <Link href={`/projects/${projSlug}/${subproject.slug}` || ""} passHref>
+                      <a>LEARN MORE</a>
+                    </Link>
+                    <Link href="support-us" passHref>
+                      <a>DONATE</a>
+                    </Link>
+                  </>
+                ),
+              }}
+            />
+          </ProjectContainer>
+         ))} 
+    </Layout>
+    }
+    />
+  )
+}
+
+export default SubProjects

src/components/modules/Projects/Project/SubProjects/index.js

@@ -0,0 +1 @@
+export { default } from "./SubProjects";

src/pages/projects/[slug].js → src/pages/projects/[...slug].js

@@ -13,21 +13,29 @@ export const getStaticPaths = async () => {
         "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36",
     },
   });
+  // to catch all routes at build time
+ const paths=[]
+ data.forEach(project => 
+  {
+    paths.push({ params: { slug: [project.slug] } },)
+    project.subProjects.forEach(subproj=> {
+      paths.push( { params: { slug: [project.slug,subproj.slug] } },)
 
-  const paths = data.map((project) => ({
-    params: { slug: project.slug },
-  }));
+    })
+
+  });
 
   return {
-    paths,
-    fallback: false,
+       paths,
+       fallback: false,
   };
 };
 
 export async function getStaticProps(context) {
-  const { slug } = context.params;
-  const { data: project } = await axios.get(
-    `${env().STRAPI_URL}/projects/${slug}`,
+
+    const { slug = [] } = context.params;
+      const { data: project } = await axios.get(
+    `${env().STRAPI_URL}/projects/${slug[0]}`,
     {
       headers: {
         Accept: "application/json, text/plain, */*",
@@ -42,16 +50,19 @@ export async function getStaticProps(context) {
       notFound: true,
     };
   }
-
+  // Getting all subprojects under the parent
+  const subProjects = project?.subProjects
   return {
     props: {
       project,
+      subProjects,
     },
     revalidate: 20,
   };
 }
 
-const ProjectRoute = ({ project }) => {
+const ProjectRoute = ({ project,subProjects }) => {
+
   const heroImageFormats = project?.heroImage?.formats;
   const heroImage =
     heroImageFormats.large || heroImageFormats.medium || heroImageFormats.small;
@@ -65,7 +76,7 @@ const ProjectRoute = ({ project }) => {
         <meta property="og:type" content="website"></meta>
         <meta
           property="og:url"
-          content={`https://devlaunchers.com/projects/${project?.slug}`}
+          content={`https://devlaunchers.com/projects/${project?.slug[0]}`}
         ></meta>
         <meta property="og:image" content={heroImage?.url}></meta>
         <meta property="og:title" content={project?.title}></meta>
@@ -74,7 +85,7 @@ const ProjectRoute = ({ project }) => {
         <meta property="twitter:card" content="summary_large_image"></meta>
         <meta
           property="twitter:url"
-          content={`https://devlaunchers.com/projects/${project?.slug}`}
+          content={`https://devlaunchers.com/projects/${project?.slug[0]}`}
         ></meta>
         <meta property="twitter:title" content={project?.title}></meta>
         <meta
@@ -87,10 +98,10 @@ const ProjectRoute = ({ project }) => {
       </Head>
       <div>
         <Header />
-        <Project project={project || ""} />
+        <Project project={project || ""}  subProjects={subProjects || ""} />
         <Footer />
       </div>
     </>
   );
 };
-export default ProjectRoute;
+export default ProjectRoute;