Merge pull request #1663 from dev-launchers/ramy-coder/jointalcomm1467

For talcomm fixing routing

apps/dev-recruiters/src/components/modules/NewJoinPageComponent/HeaderJoinPage/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   HeaderContainer,
   HeaderText,

apps/dev-recruiters/src/components/modules/NewJoinPageComponent/index.tsx

@@ -27,7 +27,7 @@ const NewJoinPageComponent: React.FunctionComponent<Props> = ({
   const router = useRouter();
   const routeChange = (e) => {
     e.preventDefault();
-    router.push('join/second');
+    router.push('/join/second');
   };
   return (
     <Wrapper>

apps/dev-recruiters/src/components/modules/TalcommunityPage/StyledTalcommunityPage.ts

@@ -18,13 +18,14 @@ export const Wrap = styled.div`
     url(${RocketIll});
   background-size: cover;
   background-position: center;
+  background-size: contain;
   height: 455px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 24;
   display: inline-flex;
-  width: 100%;
+  /* max-width: 100%; */
   padding-left: 196px;
   padding-right: 196px;
   display: flex;

apps/dev-recruiters/src/components/modules/TalcommunityPage/TalFormPage/signUpForm.tsx

@@ -10,10 +10,11 @@ import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import * as Yup from 'yup';
 import ConfirmationModal from '../../DetailedPage/Confirmation/ConfirmationModal';
+import { useRouter } from 'next/router';
 
-interface FormFields extends Omit<NewApplicant, 'level'> {
-  level: NewApplicant['level'] | '';
-}
+// interface FormFields extends Omit<NewApplicant, 'level'> {
+//   level: NewApplicant['level'] | '';
+// }
 interface Props {
   handleCloseModal: () => void;
   position: Opportunity;
@@ -38,6 +39,11 @@ export default function TalCommForm({ handleCloseModal, position }: Props) {
   const handleOpenConfirmationModal = () => {
     setShowConfirmationModal(true);
   };
+  const router = useRouter();
+  const routeChange = (e) => {
+    e.preventDefault();
+    router.push('/join/oldjoin');
+  };
 
   return (
     <ThemeProvider theme={theme}>
@@ -157,7 +163,8 @@ export default function TalCommForm({ handleCloseModal, position }: Props) {
                     <atoms.Button
                       buttonSize="standard"
                       buttonType="primary"
-                      type="submit"
+                      as="a"
+                      onClick={routeChange}
                     >
                       Submit
                     </atoms.Button>

apps/dev-recruiters/src/components/modules/ThankyouPage/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  BaseText,
+  HeaderContainer,
+  HeaderText,
+  SubHeaderContainer,
+  SubHeaderText,
+  Wrapper,
+} from './styles';
+import BoxContainer from '../../common/BoxContainer';
+import { Wrap } from '../TalcommunityPage/StyledTalcommunityPage';
+
+export function ThankyouPage() {
+  return (
+    <>
+      <Wrapper>
+        <HeaderContainer>Thank you!</HeaderContainer>
+        <SubHeaderContainer>
+          Your application for the Dev Launchers Talent Community has been
+          received.
+          <SubHeaderContainer>
+            We will email you when a volunteer role that matches your skillsets
+            and/or interests opens up!
+          </SubHeaderContainer>
+        </SubHeaderContainer>
+      </Wrapper>
+    </>
+  );
+}

apps/dev-recruiters/src/components/modules/ThankyouPage/styles.ts

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0;
+  row-gap: 1rem;
+  margin-top: 200px;
+  padding-bottom: 5px;
+  color: black;
+  font-size: 44px;
+  font-family: Abel;
+  font-weight: 400;
+  word-wrap: break-word;
+  padding-bottom: 56px;
+`;
+
+export const SubHeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0;
+  /* row-gap: 0.5rem; */
+  height: auto;
+  color: black;
+  font-size: 20px;
+  font-family: Nunito Sans;
+  font-weight: 400;
+  line-height: 28px;
+  word-wrap: break-word;
+  padding-bottom: 0;
+`;
+
+export const BaseText = styled.div`
+  word-wrap: break-word;
+  color: ${({ theme }) => theme?.colors?.NEUTRAL_1};
+`;
+
+export const HeaderText = styled(BaseText)`
+  font-size: 44px;
+  font-family: 'Abel', sans-serif;
+  font-weight: 400;
+  color: white;
+  overflow: hidden;
+  position: relative;
+`;
+
+export const SubHeaderText = styled(BaseText)`
+  font-size: 20px;
+  font-family: 'Nunito Sans', sans-serif;
+  color: white;
+  font-weight: 400;
+  padding-bottom: 24px;
+  overflow: hidden;
+  position: relative;
+`;
+export const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme?.colors?.SilverSandT20};
+  height: 500px;
+`;

apps/dev-recruiters/src/pages/oldjoin copy.tsx

@@ -0,0 +1,119 @@
+import { GetStaticProps } from 'next';
+import Head from 'next/head';
+import { Opportunity } from '@devlaunchers/models/opportunity';
+import { Project } from '@devlaunchers/models/project';
+import agent from '@devlaunchers/utility/agent';
+import OpportunitiesAggregator from '../components/modules/OpportunitiesAggregator/OpportunitiesAggregator';
+import OpportunitiesAggregatorWithRoles from '../components/modules/OpportunitiesAggregatorWithRoles/OpportunitiesAggregator';
+
+import { useRouter } from 'next/router';
+import { ThemeProvider } from 'styled-components';
+import theme from '../styles/theme';
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  let projects: Project[] = [];
+  let opportunities: Opportunity[] = [];
+  try {
+    const result = await agent.Projects.list(
+      new URLSearchParams('_publicationState=live')
+    );
+    projects = result.filter((p: Project) => p.opportunities.length > 0);
+    projects.map((project) => {
+      const commitments = project.opportunities.map(
+        (opp) => opp.commitmentHoursPerWeek
+      );
+      // console.log(commitments);
+      const maxCommitment = Math.max(...commitments);
+      const minCommitment = Math.min(...commitments);
+      project.commitmentLevel = `${minCommitment} - ${maxCommitment}`;
+      return project;
+    });
+  } catch (error) {
+    console.error('An error occurred while fetching Projects', error);
+  }
+
+  try {
+    const result = await agent.Opportunities.list();
+    opportunities = result.filter((o: Opportunity) => o.projects.length > 0);
+  } catch (error) {
+    console.error('An error occurred while fetching Opportunities', error);
+  }
+
+  return {
+    props: {
+      projects,
+      opportunities,
+    },
+    revalidate: 10,
+  };
+};
+
+interface Props {
+  projects: Project[];
+  opportunities: Opportunity[];
+}
+
+const IndexPage = ({ projects, opportunities }: Props) => {
+  const router = useRouter();
+  const { format } = router.query;
+
+  return (
+    <>
+      <Head>
+        <title>Dev Discovery</title>
+        <meta name="title" content="Dev Discovery"></meta>
+        <meta
+          name="description"
+          content="Create, discover, and join open-source software projects! We help members to contribute meaningfully and gain industry-ready experience along the way. Build epic products, tools, and games used by real people while learning valuable skills and meeting awesome people!"
+        ></meta>
+
+        <meta property="og:type" content="website"></meta>
+        <meta
+          property="og:url"
+          content="https://devlaunchers.org/projects"
+        ></meta>
+        <meta
+          property="og:image"
+          content="/images/DevlaunchersGitHubThumb.png"
+        ></meta>
+        <meta property="og:title" content="Dev Discovery"></meta>
+        <meta
+          property="og:description"
+          content="Create, discover, and join open-source software projects! We help members to contribute meaningfully and gain industry-ready experience along the way. Build epic products, tools, and games used by real people while learning valuable skills and meeting awesome people!"
+        ></meta>
+
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content="https://devlaunchers.org/projects"
+        />
+        <meta property="twitter:title" content="Dev Discovery" />
+        <meta
+          property="twitter:description"
+          content="Create, discover, and join open-source software projects! We help members to contribute meaningfully and gain industry-ready experience along the way. Build epic products, tools, and games used by real people while learning valuable skills and meeting awesome people!"
+        />
+        <meta
+          property="twitter:image"
+          content="/images/DevlaunchersGitHubThumb.png"
+        />
+        <meta content="#ff7f0e" data-react-helmet="true" name="theme-color" />
+      </Head>
+      {/* TODO: Remove the old theme and standarize the one coming from @devlaunchers/components */}
+      <ThemeProvider theme={theme}>
+        {format === 'roles' ? (
+          <OpportunitiesAggregatorWithRoles
+            projects={projects}
+            opportunities={opportunities}
+          />
+        ) : (
+          <OpportunitiesAggregator
+            projects={projects}
+            opportunities={opportunities}
+          />
+        )}
+      </ThemeProvider>
+    </>
+  );
+};
+
+export default IndexPage;