Merge pull request #1943 from dev-launchers/development/ideaspace

Development/ideaspace

apps/dev-recruiters/src/components/modules/FilterPage/RolesFilterComponent/RolesFilterList/CollapsibleContainerFilter/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import RolesButtons from './RolesButtons';
 import Commitment from './Commitment';
 import {
@@ -13,7 +13,7 @@ interface CollapsibleContainerProps {
   openPositions: {
     [key: string]: any;
   };
-  onRoleSelection: (roleLabel: string) => void;
+  onRoleSelection: (roleLabel: string, roleCategory: string) => void;
   selectRoleLabel: string;
 }
 
@@ -23,11 +23,18 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
 }) => {
   const [roleActive, setRoleActive] = useState(null);
 
-  function handleRoleClick(roleName, roleLabel) {
+  useEffect(() => {
+    const roleName = localStorage.getItem('roleName');
+    setRoleActive(roleName);
+  }, []);
+
+  function handleRoleClick(roleName, roleLabel, roleCategory) {
     const roleJsonString = JSON.stringify(roleLabel);
 
     localStorage.setItem('selectedRole', roleJsonString);
-    onRoleSelection(roleLabel);
+    localStorage.setItem('roleCategory', roleCategory);
+    localStorage.setItem('roleName', roleName);
+    onRoleSelection(roleLabel, roleCategory);
     setRoleActive(roleName);
 
     // You can also redirect here if needed
@@ -43,21 +50,33 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
             <RolesButtons
               textRole="Product Lead"
               onClick={() =>
-                handleRoleClick('ProductLead', openPositions['ProductLead'])
+                handleRoleClick(
+                  'ProductLead',
+                  openPositions['ProductLead'],
+                  'Product / UX'
+                )
               }
               isActive={roleActive === 'ProductLead'}
             />
             <RolesButtons
               textRole="UX Designer"
               onClick={() =>
-                handleRoleClick('UxDesigner', openPositions['UxDesigner'])
+                handleRoleClick(
+                  'UxDesigner',
+                  openPositions['UxDesigner'],
+                  'Product / UX'
+                )
               }
               isActive={roleActive === 'UxDesigner'}
             />
             <RolesButtons
               textRole="UX Researcher"
               onClick={() =>
-                handleRoleClick('UxResearcher', openPositions['UxResearcher'])
+                handleRoleClick(
+                  'UxResearcher',
+                  openPositions['UxResearcher'],
+                  'Product / UX'
+                )
               }
               isActive={roleActive === 'UxResearcher'}
             />
@@ -66,27 +85,34 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
               onClick={() =>
                 handleRoleClick(
                   'InformationArchitect',
-                  openPositions['InformationArchitect']
+                  openPositions['InformationArchitect'],
+                  'Product / UX'
                 )
               }
               isActive={roleActive === 'InformationArchitect'}
             />
             <RolesButtons
               textRole="QA Lead"
-              onClick={() => handleRoleClick('QaLead', openPositions['QaLead'])}
+              onClick={() =>
+                handleRoleClick('QaLead', openPositions['QaLead'], 'QA')
+              }
               isActive={roleActive === 'QaLead'}
             />
             <RolesButtons
               textRole="QA Tester"
               onClick={() =>
-                handleRoleClick('QaTester', openPositions['QaTester'])
+                handleRoleClick('QaTester', openPositions['QaTester'], 'QA')
               }
               isActive={roleActive === 'QaTester'}
             />
             <RolesButtons
               textRole="Lead Dev"
               onClick={() =>
-                handleRoleClick('LeadDeveloper', openPositions['LeadDeveloper'])
+                handleRoleClick(
+                  'LeadDeveloper',
+                  openPositions['LeadDeveloper'],
+                  'Development'
+                )
               }
               isActive={roleActive === 'LeadDeveloper'}
             />
@@ -95,7 +121,8 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
               onClick={() =>
                 handleRoleClick(
                   'FrontEndDeveloper',
-                  openPositions['FrontEndDeveloper']
+                  openPositions['FrontEndDeveloper'],
+                  'Development'
                 )
               }
               isActive={roleActive === 'FrontEndDeveloper'}
@@ -105,7 +132,8 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
               onClick={() =>
                 handleRoleClick(
                   'BackEndDeveloper',
-                  openPositions['BackEndDeveloper']
+                  openPositions['BackEndDeveloper'],
+                  'Development'
                 )
               }
               isActive={roleActive === 'BackEndDeveloper'}
@@ -115,7 +143,8 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
               onClick={() =>
                 handleRoleClick(
                   'VoulunteerCordinator',
-                  openPositions['VoulunteerCordinator']
+                  openPositions['VoulunteerCordinator'],
+                  'Operations'
                 )
               }
               isActive={roleActive === 'VoulunteerCordinator'}
@@ -125,7 +154,8 @@ const CollapsibleContainerFilter: React.FC<CollapsibleContainerProps> = ({
               onClick={() =>
                 handleRoleClick(
                   'SocialMediaManager',
-                  openPositions['SocialMediaManager']
+                  openPositions['SocialMediaManager'],
+                  'Operations'
                 )
               }
               isActive={roleActive === 'SocialMediaManager'}

apps/dev-recruiters/src/components/modules/FilterPage/RolesFilterComponent/RolesFilterList/SearchRoles/index.tsx

@@ -10,29 +10,47 @@ import { Opportunity } from '@devlaunchers/models';
 interface Props {
   selectedRoleLabel: any;
   opportunities?: Opportunity[];
+  selectedRoleCategory?: String;
 }
-function SearchRole({ selectedRoleLabel, opportunities }: Props) {
+function SearchRole({
+  selectedRoleLabel,
+  opportunities,
+  selectedRoleCategory,
+}: Props) {
   const [selectedRole, setSelectedRole] = useState([]);
-
+  const [suggestedRole, setSuggestedRole] = useState([]);
   const { commitmentRange } = useOpportunitiesContext();
 
   useEffect(() => {
     if (!selectedRoleLabel) {
       const roleJsonString = localStorage.getItem('selectedRole');
       const selectedRole = JSON.parse(roleJsonString);
+      const selectedCategory = localStorage.getItem('roleCategory');
       setSelectedRole(selectedRole);
+      handleSuggestedRole(selectedCategory);
     } else if (commitmentRange !== null) {
       const filteredRoles = selectedRoleLabel.filter(
         (role) =>
-          role.commitmentHoursPerWeek >= commitmentRange.min &&
-          role.commitmentHoursPerWeek <= commitmentRange.max
+          role?.attributes?.commitmentHoursPerWeek >= commitmentRange.min &&
+          role?.attributes?.commitmentHoursPerWeek <= commitmentRange.max
       );
       setSelectedRole(filteredRoles);
+      handleSuggestedRole(selectedRoleCategory);
     } else {
       setSelectedRole(selectedRoleLabel);
+      handleSuggestedRole(selectedRoleCategory);
     }
   }, [selectedRoleLabel, commitmentRange]);
 
+  function handleSuggestedRole(roleCategory) {
+    if (roleCategory !== '') {
+      const suggestedRoleList = opportunities.filter(
+        (role) => role?.attributes?.roleCategory === roleCategory
+      );
+      setSuggestedRole(suggestedRoleList);
+    }
+  }
+
   /*
   useEffect(() => {
     if (commitmentRange !== null) {
@@ -57,12 +75,24 @@ function SearchRole({ selectedRoleLabel, opportunities }: Props) {
               Oops, there are currently no matching roles. Check out other
               suggested roles below!
             </EmptyRolesContainer>
-            <OpenRolesText>Suggested roles(1)</OpenRolesText>
-            <SuggestedRole />
+            <OpenRolesText>
+              Suggested roles({suggestedRole.length})
+            </OpenRolesText>
+            <RolesContainer>
+              {suggestedRole?.map((role, index) => {
+                return (
+                  <RoleCard
+                    key22={index}
+                    role={role}
+                    opportunities={opportunities}
+                  ></RoleCard>
+                );
+              })}
+            </RolesContainer>
           </>
         ) : (
           <RolesContainer>
-            {selectedRole.map((role, index) => {
+            {selectedRole?.map((role, index) => {
               return (
                 <RoleCard
                   key22={index}

apps/dev-recruiters/src/components/modules/FilterPage/RolesFilterComponent/RolesFilterList/UseOpenPositions/opportunityUtils.tsx

@@ -18,24 +18,28 @@ export default function separateRoles(arr: Opportunity[]) {
   };
 
   arr.forEach((role) => {
-    if (parseInt(role.id) === 8 || parseInt(role.id) === 4) {
+    if (role?.attributes?.roleType === 'Product Lead') {
       separatedGroups['ProductLead'].push(role);
-    } else if (parseInt(role.id) === 6) {
+    } else if (role?.attributes?.roleType === 'UX Designer') {
       separatedGroups['UxDesigner'].push(role);
-    } else if (parseInt(role.id) === 7 || parseInt(role.id) === 5) {
+    } else if (role?.attributes?.roleType === 'UX Researcher') {
       separatedGroups['UxResearcher'].push(role);
-    } else if (parseInt(role.id) === 15) {
+    } else if (role?.attributes?.roleType === 'Lead Developer') {
       separatedGroups['LeadDeveloper'].push(role);
-    } else if (parseInt(role.id) === 2) {
+    } else if (role?.attributes?.roleType === 'Back-End Developer') {
       separatedGroups['BackEndDeveloper'].push(role);
-    } else if (
-      parseInt(role.id) === 1 ||
-      parseInt(role.id) === 10 ||
-      parseInt(role.id) === 16
-    ) {
+    } else if (role?.attributes?.roleType === 'Front-End Developer') {
       separatedGroups['FrontEndDeveloper'].push(role);
-    } else if (parseInt(role.id) === 3) {
+    } else if (role?.attributes?.roleType === 'QA Tester') {
       separatedGroups['QaTester'].push(role);
+    } else if (role?.attributes?.roleType === 'QA Lead') {
+      separatedGroups['QaLead'].push(role);
+    } else if (role?.attributes?.roleType === 'Information Architect') {
+      separatedGroups['InformationArchitect'].push(role);
+    } else if (role?.attributes?.roleType === 'Voulunteer Cordinator') {
+      separatedGroups['VoulunteerCordinator'].push(role);
+    } else if (role?.attributes?.roleType === 'Social Media Manager') {
+      separatedGroups['SocialMediaManager'].push(role);
     }
   });
   return separatedGroups;

apps/dev-recruiters/src/components/modules/FilterPage/RolesFilterComponent/RolesFilterList/index.tsx

@@ -27,9 +27,11 @@ export default function RolesFilterList({
   if (!projectsLoaded) return <div>loading please wait</div>;
 
   const [selectRoleLabel, setSelectRoleLabel] = useState(null);
+  const [selectedRoleCategory, setSelectedRoleCategory] = useState('');
 
-  function handleRoleSelection(roleLabel: any) {
+  function handleRoleSelection(roleLabel: any, roleCategory: string) {
     setSelectRoleLabel(roleLabel);
+    setSelectedRoleCategory(roleCategory);
   }
 
   const openPositions = useOpenPositions({
@@ -40,7 +42,7 @@ export default function RolesFilterList({
   {
     return (
       <List>
-        <SearchResult>Search Results</SearchResult>
+        {/* <SearchResult>Search Results</SearchResult> */}
         <ResultContainer>
           <FilterConatiner>
             <CollapsibleContainerFilter
@@ -53,6 +55,7 @@ export default function RolesFilterList({
             <SearchRole
               selectedRoleLabel={selectRoleLabel}
               opportunities={opportunities}
+              selectedRoleCategory={selectedRoleCategory}
             />
           </RolesContainer>
         </ResultContainer>

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

@@ -39,7 +39,7 @@ const FilterPageComponent: React.FunctionComponent<Props> = ({
       <BoxContainer paddingVertical={10} paddingHorizontal={20}>
         <FilterComponent projects={projects} opportunities={opportunities} />
       </BoxContainer>
-      <BoxContainer paddingVertical={0} paddingHorizontal={50}>
+      <BoxContainer paddingVertical={0} paddingHorizontal={0}>
         <Footer>
           <FooterFirstText>
             Join the Dev Launchers Talent Community

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

@@ -1,30 +1,53 @@
 import styled from 'styled-components';
 import StarySky from '../../../images/Searchresults/starysky.jpg';
+import RocketIll from '../../../images/TalcommPage/rocket-illustration.png';
 
 export const Wrapper = styled.div`
   background-color: ${({ theme }) => theme?.colors?.SilverSandT20};
 `;
 
 export const Footer = styled.div`
-  width: 100%;
-  height: 220px;
-  border-radius: 15px;
+  /* width: 100%; */
   display: flex;
-  align-items: center;
-  justify-content: center;
+  height: 360px;
+  min-height: 360px;
+  padding: var(--0, 0px) var(--48, 192px);
+  width: 100%;
   flex-direction: column;
-  gap: 25px;
-  margin-bottom: 50px;
+  justify-content: center;
+  align-items: center;
+  gap: var(--10, 40px);
+  align-self: stretch;
+  background-position: center;
+  background-image: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.5) 0%,
+      rgba(0, 0, 0, 0.5) 100%
+    ),
+    url(${RocketIll});
 `;
 
 export const FooterFirstText = styled.div`
   font-size: 40px;
   font-family: 'Abel', sans-serif;
+  font-style: normal;
+  font-weight: 200;
+  line-height: 120%; /* 48px */
+  letter-spacing: 1.6px;
+  text-align: center;
+  color: white;
 `;
 
 export const FooterSecondText = styled.div`
+  color: white;
+  width: 70%;
+  text-align: center;
+  /* p-l-d */
+  font-family: 'Nunito Sans';
   font-size: 20px;
-  font-family: 'Abel', sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px; /* 140% */
 `;
 
 export const BtnSignUp = styled.button`

apps/dev-recruiters/src/components/modules/NewJoinPageComponent/ContainerImage/StyledContainerImage.ts

@@ -3,5 +3,5 @@ import styled from 'styled-components';
 export const HeaderImage = styled.img``;
 
 export const HeaderImageContainer = styled.div`
-  max-width: 50%;
+  max-width: 100%;
 `;