fix: change get navlinks

atls-academy · Aug 17, 2023 · be37fce · be37fce
1 parent c679cc4
commit be37fce
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 61 deletions.
diff --git a/landing/fragments/landing-courses/src/cards/cards.component.tsx b/landing/fragments/landing-courses/src/cards/cards.component.tsx
@@ -24,11 +24,10 @@ export const Cards = () => {
   }))
 
   const reversedCards = getCards?.reverse()
-
   return (
     <Box flexDirection={['column', 'row']}>
       <Row order={[1, 0]} flexWrap='wrap'>
-        {reversedCards?.map((element, index) => (
+        {reversedCards?.slice(0, 4).map((element, index) => (
           <Box
             display={
               index > 1 ? { _: 'none', standard: 'flex', wide: 'none', ultra: 'none' } : 'flex'
@@ -49,7 +48,7 @@ export const Cards = () => {
               <Layout flexBasis={{ _: 20, standard: 40 }} />
             </Column>
             <Layout
-              flexBasis={index === reversedCards.length - 1 || index === 0 || index === 1 ? 0 : 40}
+              flexBasis={index === reversedCards.length - 2 || index === 0 || index === 1 ? 0 : 40}
             />
             <Layout
               flexBasis={index === 1 ? 0 : 40}

diff --git a/landing/fragments/landing-courses/src/cards/wideScreen/wideScreen.component.tsx b/landing/fragments/landing-courses/src/cards/wideScreen/wideScreen.component.tsx
@@ -8,7 +8,6 @@ import { useCourses } from '../../data'
 
 export const WideScreenCards = () => {
   const card = useCourses()
-
   const CardContainer = ({ title, indent }) => (
     <>
       <Column width={{ wide: 570, ultra: 668 }} height={370}>
@@ -31,8 +30,8 @@ export const WideScreenCards = () => {
           key={index} /*eslint-disable-line */
           title={
             index < 3
-              ? card?.data?.courses.nodes[1].course.title
-              : card?.data?.courses.nodes[0].course.title
+              ? card?.data?.courses.nodes[2].course.title
+              : card?.data?.courses.nodes[1].course.title
           }
           indent={index === 2 ? 0 : 40}
         />

diff --git a/landing/fragments/landing-navigation/src/data/queries/navigation.query.ts b/landing/fragments/landing-navigation/src/data/queries/navigation.query.ts
@@ -4,9 +4,6 @@ export const GET_NAVIGATION = gql`
   query Navigation {
     allNavigation {
       nodes {
-        navigation {
-          linkName
-        }
         id
         title
       }

diff --git a/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx b/landing/fragments/landing-navigation/src/drawer/drawer.component.tsx
@@ -16,14 +16,8 @@ import { CardsMobile }   from './cards'
 import { useNavigation } from '../data'
 
 export const DrawerContainer = ({ active, onClose }) => {
-  const linkName = useNavigation()
-
-  const getLinks = linkName?.data?.allNavigation.nodes.map((el) => ({
-    title: el.title,
-    path: el.id,
-  }))
-
-  const reversedLinks = getLinks?.reverse()
+  const title = useNavigation()
+  const getLinks = title?.data?.allNavigation.nodes
 
   return (
     <Drawer heightDrawer={{ _: 495, standard: 610, ultra: 720 }} active={active}>
@@ -34,21 +28,19 @@ export const DrawerContainer = ({ active, onClose }) => {
           <Logo fill='rgba(58, 55, 93, 1)' />
         </Box>
         <Layout flexBasis={{ standard: 400, wide: 715, ultra: 510 }} />
-
         <Row
           display={['none', 'flex']}
           justifyContent='center'
           alignItems='center'
           width={{ ultra: 1290 }}
         >
-          {reversedLinks?.map((el, index) => (
-            <Box key={el.title}>
-              <Item backColor='light' title={el.title} path={el.path} />
-              <Layout
-                flexBasis={index === reversedLinks.length - 1 ? 0 : { standsrd: 20, ultra: 30 }}
-              />
-            </Box>
-          ))}
+          <Item backColor='light' title={getLinks?.[5]?.title} path={getLinks?.[5]?.id} />
+          <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+          <Item backColor='light' title={getLinks?.[4]?.title} path={getLinks?.[4]?.id} />
+          <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+          <Item backColor='light' title={getLinks?.[3]?.title} path={getLinks?.[3]?.id} />
+          <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+          <Item backColor='light' title={getLinks?.[2]?.title} path={getLinks?.[2]?.id} />
         </Row>
         <Layout flexBasis={{ _: 195, standard: 400, wide: 715, ultra: 510 }} />
         <Box
@@ -70,7 +62,7 @@ export const DrawerContainer = ({ active, onClose }) => {
             onClick={onClose}
           >
             <Text color='white' fontSize='averaged'>
-              {linkName?.data?.allNavigation.nodes[4].title}
+              {title?.data?.allNavigation.nodes[4].title}
             </Text>
           </Button>
         </Box>
@@ -93,7 +85,7 @@ export const DrawerContainer = ({ active, onClose }) => {
             onClick={onClose}
           >
             <Text color='white' fontSize='regular' lineHeight='small'>
-              {linkName?.data?.allNavigation.nodes[4].title}
+              {title?.data?.allNavigation.nodes[4].title}
             </Text>
           </Button>
         </Box>
@@ -111,7 +103,7 @@ export const DrawerContainer = ({ active, onClose }) => {
             onClick={onClose}
           >
             <Text color='white' fontSize='medium'>
-              {linkName?.data?.allNavigation.nodes[4].title}
+              {title?.data?.allNavigation.nodes[4].title}
             </Text>
           </Button>
         </Box>

diff --git a/landing/fragments/landing-navigation/src/item/item.component.tsx b/landing/fragments/landing-navigation/src/item/item.component.tsx
@@ -27,17 +27,19 @@ export const Item: FC<ItemProps> = ({ title, path, backColor }) => {
       justifyContent='center'
       borderBottom={getColorBorder()}
     >
-      <Link to={path} spy smooth duration={1000}>
-        <Text
-          fontSize={{ standard: 'standard', ultra: 'major' }}
-          lineHeight='small'
-          color={getColorText()}
-          textTransform='uppercase'
-          cursor='pointer'
-        >
-          {title}
-        </Text>
-      </Link>
+      {path && (
+        <Link to={path} spy smooth duration={1000}>
+          <Text
+            fontSize={{ standard: 'standard', ultra: 'major' }}
+            lineHeight='small'
+            color={getColorText()}
+            textTransform='uppercase'
+            cursor='pointer'
+          >
+            {title}
+          </Text>
+        </Link>
+      )}
     </Box>
   )
 }
diff --git a/landing/fragments/landing-navigation/src/navigation.component.tsx b/landing/fragments/landing-navigation/src/navigation.component.tsx
@@ -16,12 +16,9 @@ import { useNavigation }   from './data'
 
 export const Navigation = () => {
   const [visible, setVisible] = useState(false)
-  const linkName = useNavigation()
-  const getLinks = linkName?.data?.allNavigation.nodes.map((el) => ({
-    title: el.title,
-    path: el.id,
-  }))
-  const reversedLinks = getLinks?.reverse()
+  const title = useNavigation()
+  const getLinks = title?.data?.allNavigation.nodes
+
   return (
     <>
       <DrawerContainer active={visible} onClose={() => setVisible(false)} />
@@ -33,18 +30,15 @@ export const Navigation = () => {
             <Logo fill='white' />
           </Box>
           <Layout flexBasis={{ standard: 400, wide: 715, ultra: 500 }} />
-
           <Row display={['none', 'flex']} justifyContent='center' alignItems='center' width={1290}>
-            {reversedLinks?.map((el, index) => (
-              <Box key={el.title}>
-                <Item title={el.title} path={el.path} />
-                <Layout
-                  flexBasis={index === reversedLinks.length - 1 ? 0 : { standsrd: 20, ultra: 30 }}
-                />
-              </Box>
-            ))}
+            <Item title={getLinks?.[5]?.title} path={getLinks?.[5]?.id} />
+            <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+            <Item title={getLinks?.[4]?.title} path={getLinks?.[4]?.id} />
+            <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+            <Item title={getLinks?.[3]?.title} path={getLinks?.[3]?.id} />
+            <Layout flexBasis={{ standsrd: 20, ultra: 30 }} />
+            <Item title={getLinks?.[2]?.title} path={getLinks?.[2]?.id} />
           </Row>
-
           <Layout flexBasis={{ _: 195, standard: 400, wide: 715, ultra: 500 }} />
           <Box
             width={163}
@@ -65,7 +59,7 @@ export const Navigation = () => {
               onClick={() => setVisible(true)}
             >
               <Text color='white' fontSize='regular'>
-                {linkName?.data?.allNavigation.nodes[4].title}
+                {title?.data?.allNavigation.nodes[4].title}
               </Text>
             </Button>
           </Box>
@@ -83,7 +77,7 @@ export const Navigation = () => {
               onClick={() => setVisible(true)}
             >
               <Text color='white' fontSize='medium'>
-                {linkName?.data?.allNavigation.nodes[4].title}
+                {title?.data?.allNavigation.nodes[4].title}
               </Text>
             </Button>
           </Box>
@@ -106,7 +100,7 @@ export const Navigation = () => {
               onClick={() => setVisible(true)}
             >
               <Text color='white' fontSize='averaged'>
-                {linkName?.data?.allNavigation.nodes[4].title}
+                {title?.data?.allNavigation.nodes[4].title}
               </Text>
             </Button>
           </Box>

diff --git a/ui/form/src/data/queries/useForm.ts b/ui/form/src/data/queries/useForm.ts
@@ -1,4 +1,4 @@
-import { useQuery }  from '@apollo/client'
+import { useQuery } from '@apollo/client'
 
 import { GET_FORM } from './form.query'
 

diff --git a/ui/navbar/src/navbar.component.tsx b/ui/navbar/src/navbar.component.tsx
@@ -16,7 +16,7 @@ import { getColorDotBackground }  from './helpers'
 export const Navbar = ({ sectionRefs }) => {
   const navigation = useNavbar()
 
-  const getLinks = navigation?.data?.allNavigation.nodes.map((el, index) => ({
+  const getLinks = navigation?.data?.allNavigation.nodes.slice(2).map((el, index) => ({
     index,
     name: el.title,
     id: el.id,