rework position

frontend/src/api/PortfolioDataLayer.jsx

   'BackgroundImage',
 ];
 
-const PortfolioDataLayer = () => {
-  const strapi = strapiApiBuilder('case-studies', strapiPopulate, '');
+const PortfolioDataLayer = ({filter}) => {
+  const strapi = strapiApiBuilder('case-studies', strapiPopulate, filter ? filter : '');
 
   const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
 
+
   if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">

frontend/src/api/TestimonialsDataLayer.jsx

     
   },[data]);
 
-  console.log(wideArray);
-
   if (isLoading) {
     return (
       <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">

frontend/src/components/CareerCardsTemplates/ExpandedCard.jsx

-import React, { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import TriangleButton from '../shared/TriangleButton';
 import { useNavigate } from 'react-router-dom';
 import net from './../../assets/icons/net.svg';
-import { m } from 'framer-motion';
-import useClickOutside from '../../hooks/useClickOutside';
-import { UIContext } from '../../context';
-import { ref } from 'yup';
+
 
 
 
     linkTo('/contact', { tab: { tab }, position: { position } });
   };
 
-  console.log(card);
 
   return (
     <div

frontend/src/components/HRProcess.jsx

 const api_url = process.env.REACT_APP_API_URL;
 
 const HRProcess = ({ data }) => {
-  //console.log(data);
 
   const ref = useRef(null);
   const { scrollYProgress } = useScroll({ container: ref });
 
   useEffect(() => {
     const imageArray = document.querySelectorAll('.image-switch');
-    //console.log(imageArray);
     const switchImage = scrollYProgress.onChange(value => {
       if (value <= 0.1) {
         imageArray.forEach(el => el.classList.remove('active-image'));

frontend/src/components/Landing.jsx

-import React, { useEffect } from 'react';
+import React from 'react';
 import { motion } from 'framer-motion';
 import LandingSVGv2 from './shared/graphics/LandingSVG-v2';
 import HiringWidget from './HiringWidget';
 import Wrapper from '../layout/Wrapper';
-import OpenDayBanner from './OpenDayBanner';
 
-// const _data = {
-//   cto: 'contact us',
-// };
-// const number = [
-//   {
-//     value: 90,
-//     static: '+',
-//     title: 'Employees',
-//   },
-//   {
-//     value: '20',
-//     static: '+',
-//     title: 'Projects',
-//   },
-//   {
-//     value: '100',
-//     static: '%',
-//     title: 'Client-Retention',
-//   },
-// ];
 
 const Landing = ({ heading,numbers,button,paragraph }) => {
 
-  useEffect(() => {
-    //console.log(data);
-  }, [])
   
   return (
     <Wrapper>

frontend/src/components/PortfolioSection.jsx

 import PageTitle from './shared/PageTitle';
 import ProcessCard from './shared/ProcessCard';
 import ProcessCardsWrapper from './shared/ProcessCardWrapper';
+import PortfolioDataLayer from '../api/PortfolioDataLayer';
 
 const _data = {
   cards: [
       <div className="py-32p">
         <PageTitle left heading={heading.title} subheading={heading.subtitle} />
       </div>
-
-      <div className="flex flex-col lg:flex-row justify-center items-center lg:justify-between gap-8">
-        {_data.cards.map((item, index) => (
-          <a
-            className={'card max-w-780p box my-2 flex flex-col items-center'}
-            href={item.link}
-            key={index}
-          >
-            <img src={item.imgUrl} alt={item.alt} className={'mb-12'}></img>
-            <h3 className="h3-heading">{item.title}</h3>
-            <button className="btn text-dg-secondary mt-4">{cta}</button>
-          </a>
-        ))}
-      </div>
+      <PortfolioDataLayer filter={'?sort[0]=id&pagination[pageSize]=3'} />
       <div className="flex justify-center text-center">
         <button
           className="btn text-dg-secondary mt-4"

frontend/src/components/shared/ArticleCard.jsx

 
 const api_url = process.env.REACT_APP_API_URL;
 
-
 const ArticleCard = ({ data }) => {
-  //console.log(data);
   return (
-    // <div className={"card box" + (isLarge ? ' col-span-2' : '')}>
     <a
       className={
         'card box my-2 flex flex-col md:flex-row items-center justify-between gap-[72px]'
       href={`/articles/${data.Slug}`}
     >
       <div className="flex flex-col gap-[18px]">
-        { data.Author &&
+        {data.Author && (
           <div className="flex gap-4">
-          <img
-            className="max-h-[45px] object-fit rounded-full"
-            src={api_url + data.AuthorImage.data.attributes.url}
-            alt={data.AuthorImage.data.attributes.alternativeText}
-          />
-          <div className="flex flex-col items-start">
-            <p className="paragraph">{data.Author}</p>
-            <p className="text-small-subhead text-gray-400 leading-normal text-left">
-              {data.AuthorTitle}
-            </p>
+            <img
+              className="max-h-[45px] object-fit rounded-full"
+              src={api_url + data.AuthorImage.data.attributes.url}
+              alt={data.AuthorImage.data.attributes.alternativeText}
+            />
+            <div className="flex flex-col items-start">
+              <p className="paragraph">{data.Author}</p>
+              <p className="text-small-subhead text-gray-400 leading-normal text-left">
+                {data.AuthorTitle}
+              </p>
+            </div>
           </div>
-        </div>
-        }
-        
+        )}
+
         <div className="text-left flex flex-col gap-[8px]">
           <h2 className="n-h3-heading text-dark-gray">{data.ArticleTitle}</h2>
           <p className="n-paragraph w-full md:w-[450px]">{data.ArticleDescription}</p>

frontend/src/components/shared/Contact.jsx

 import { JobFormContext } from '../../context';
 import PageTitle from './PageTitle';
 import Wrapper from '../../layout/Wrapper';
-import { UIContext } from './../../context/index';
 
 import Mailgun from 'mailgun.js';
 import FormData from 'form-data';
+import { UIContext } from '../../context/UIProvider';
 
 const mailgun = new Mailgun(FormData);
 const mg = mailgun.client({
       });
   }, []);
 
-  useEffect(() => {
-    console.log(position);
-  })
 
   if (!isLoaded) {
     return (

frontend/src/components/shared/Footer.jsx

   }
 
   function checkUrl(event) {
-    //console.log(location.pathname);
 
     if (location.pathname === '/') scrollToView(event);
     else home('/contact');

frontend/src/components/shared/HashPositions.jsx

     setSelected(event.target.innerText);
     //console.log(event.target.innerText);
     props.setSelectedPosition(event.target.innerText);
+    //console.log(selected)
   }
 
 

frontend/src/components/shared/JobForm.jsx

 import HashPositions from './HashPositions';
 import ReCAPTCHA from 'react-google-recaptcha';
 import axios from 'axios';
+import { UIContext } from '../../context/UIProvider';
 
 const api_url = process.env.REACT_APP_API_URL;
 
   const fileInput = useRef();
 
   function changeFormHandler(event) {
+    //console.log(event.target);
     const { name, value } = event.target;
     setJobForm({
       ...jobForm,
       [name]: value,
     });
+    //console.log(jobForm.position);
   }
 
   function dropzoneToFormData(files) {
   }
 
   function hashToFormData(selected, other) {
+    console.log(selected)
     setJobForm({
       ...jobForm,
       position: selected,
       other: other,
     });
+    console.log(jobForm.position);
   }
 
   useEffect(() => {
                 }
               };
               const convertBase64 = file => {
-                //console.log(file);
                 return new Promise((resolve, reject) => {
                   const fileReader = new FileReader();
 
               )
                 setErrorMsgPosition('Position is Required');
               else {
+                setSelectedPosition(jobForm.position)
                 setErrorMsgPosition('');
                 if (jobForm.file === '') {
                   setErrorMsg('CV is Required');
                           if (res.data.data.success) {
                             setMsgText('Submission Succesful! Thank you!');
 
-                            props.mg.messages.create('dilig.net', {
-                              from: `${values.firstName} ${values.lastName} <${values.email}>`,
-                              to: ['hr@dilig.net'],
-                              subject: 'Applying for a position',
-                              text: `Email: ${values.email}, Position:${values.position} ${values.other}, Cover letter: ${values.coverLetter}, Link: ${values.link} `,
-                              html: `<p>Email: ${values.email}</p><p>Position: ${selectedPosition} ${values.other}</p><p>Cover letter: ${values.coverLetter}</p><p>Link (optional): ${values.link}</p>`,
-                              attachment: file,
-                            });
+                            // props.mg.messages.create('dilig.net', {
+                            //   from: `${values.firstName} ${values.lastName} <${values.email}>`,
+                            //   to: ['hr@dilig.net'],
+                            //   subject: 'Applying for a position',
+                            //   text: `Email: ${values.email}, Position:${selectedPosition} ${values.other}, Cover letter: ${values.coverLetter}, Link: ${values.link} `,
+                            //   html: `<p>Email: ${values.email}</p><p>Position: ${selectedPosition} ${values.other}</p><p>Cover letter: ${values.coverLetter}</p><p>Link (optional): ${values.link}</p>`,
+                            //   attachment: file,
+                            // });
                           } else
                             setMsgText('Please fill reCAPTCHA and try again. Thank you!');
                         })
                             type="text"
                             name="position"
                             id="position"
-                            onBlur={changeFormHandler}
-                            value={selectedPosition.substring(1) || 0}
-                            onChange={props.handleChange}
+                            //onBlur={changeFormHandler}
+                            value={jobForm.position}
+                            //onChange={props.handleChange}
                             autoComplete="given-name"
                             className="mt-1 disabled:bg-gray-100 disabled:border-gray-300 focus:ring-dg-primary-600 focus:border-dg-primary-900 block w-full shadow-sm sm:text-sm border-dg-primary-600 rounded-md transition duration-200"
                           />

frontend/src/components/shared/PortfolioCardNew.jsx

 import React, { Fragment, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 const api_url = process.env.REACT_APP_API_URL;
 
 const PortfolioCardNew = ({ data }) => {
-  const linkTo = useNavigate();
 
   return (
     <Fragment>
       {data && (
         <a className={'card box my-2 flex- flex-col items-center'} href={`/case-studies/${data.Slug}`}>
-          {data.BackgroundImage.data && (
+          {data.BackgroundImage && (
             <img
               src={api_url + data.BackgroundImage.data.attributes?.url}
               alt={data.BackgroundImage.data.attributes?.alternativeText}

frontend/src/components/shared/graphics/OrbitOnScroll.jsx

     [yRange],
   );
 
-  // useEffect(() => {
-  //   return scrollY.onChange((v) => console.log(v));
-  // }, [scrollY]);
-
-  // useEffect(() => {
-  //   return scrollYProgress.onChange(v => {
-  //     scrollYProgressPrecent = scrollYProgress.current * 100;
-  //     currentPrecentCircle = 0 + scrollYProgressPrecent;
-  //     currentPrecentTriangle = 50 + scrollYProgressPrecent;
-  //     currentAngleTriangle = 30 + scrollYProgressPrecent;
-  //   });
-  // }, [scrollYProgress]);
-
   return (
     <div className="relative w-full">
       <svg

frontend/src/context/UIProvider.jsx

+import React, { createContext, useState } from 'react';
+
+export const UIContext = createContext({
+  tab: true,
+  contactRef: '',
+  position: '',
+});
+
+const UIProvider = ({ children }) => {
+  const [ui, setUi] = useState({});
+
+  const changeUI = (value) => {
+    if (value) {
+      setUi(prevState => ({
+        ...prevState,
+        position: value,
+      }));
+  }};
+
+  return (
+    <>
+      <UIContext.Provider value={{ ui, changeUI }}>
+        {children}
+      </UIContext.Provider>
+    </>
+  );
+};
+
+export default UIProvider;

frontend/src/context/index.js

     coverLetter: '',
     link:'',
     file: '',
-});
-
-export const UIContext = React.createContext({
-  tab: true,
-  contactRef: '',
-  position: 0,
 });

frontend/src/index.js

 import { CookiesProvider } from 'react-cookie';
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
-import { UIContext } from './context/index';
+import UIProvider from './context/UIProvider';
 
 if (module.hot) module.hot.accept();
 
     <BrowserRouter>
       <CookiesProvider>
         <HelmetProvider>
-        <UIContext.Provider  value={UIContext} >
+        <UIProvider>
         <App />
-        </UIContext.Provider>
-         
+        </UIProvider>
         </HelmetProvider>
       </CookiesProvider>
     </BrowserRouter>

frontend/src/pages/CaseStudyPage.jsx

 
   const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
 
-  console.log(data);
-
   useAnalytics('');
 
   useEffect(() => {

frontend/src/pages/EventsTimeline.jsx

         `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
       )
       .then(res => {
-        //console.log(res.data.data.attributes);
         setCntCareers(res.data.data.attributes);
         setIsLoaded(true);
       })

frontend/src/pages/Home.jsx

 import { UIContext } from './../context/index';
 import { strapiApiBuilder } from './../utils/strapiApiBuilder';
 import TestimonialsDataLayer from '../api/TestimonialsDataLayer';
+import PortfolioDataLayer from '../api/PortfolioDataLayer';
 
 const api_url = process.env.REACT_APP_API_URL;
 
           ) : null}
 
 
-
-
           {/* Contact Section */}
           {data ? (
             <section id="contact" className="" ref={forwardedRef}>

frontend/src/pages/Services.jsx

   useEffect(async () => {
     var vid = document.getElementById('animation');
     vid.playbackRate = 2;
-    //console.log(scrollPosition);
     axios
       .get(
         `${api_url}/api/servicespage?populate[0]=service&populate[1]=service.section.icon`,
       )
       .then(res => {
-       //console.log(res.data.data.attributes);
         setCntServices(res.data.data.attributes);
         setIsLoaded(true);
       })