feat: add UsesPage query and type; add data to page

src/app/(public)/uses/page.tsx

@@ -1,18 +1,50 @@
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 
 import Heading from '@/components/atoms/headings/Heading';
 
+import { queryUsesPage } from '@/queries/uses-page';
+
 export const metadata = {
   title: 'Uses | MartaCodes.it',
   description: 'Uses page',
 };
 
+const queryData = async () => {
+  const usesPage = await queryUsesPage();
+
+  return {
+    usesPage,
+  };
+};
+
 const UsesPage = async () => {
+  const { usesPage } = await queryData();
+
+  const sections = [
+    usesPage.hardware,
+    usesPage.programmingTools,
+    usesPage.productivity,
+    usesPage.security,
+    usesPage.media,
+  ];
+
   return (
     <main className='min-h-main'>
       <section>
         <div className='layout relative flex flex-col py-12'>
           <Heading title='uses.title' />
+
+          {sections.map((section) => (
+            <div
+              className='mb-2'
+              aria-label={section.title}
+              key={section.title}
+            >
+              <h2 className='my-4'>{section.title}</h2>
+              <ReactMarkdown>{section.content}</ReactMarkdown>
+            </div>
+          ))}
         </div>
       </section>
     </main>

src/queries/uses-page.ts

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+import { flattenToObject } from '@/lib/graphqlUtils';
+
+import apolloClient from '../../apollo/apollo-client';
+
+import { UsesPage } from '@/types/UsesPage';
+
+export async function queryUsesPage() {
+  const { data } = await apolloClient.query({ query: UsesPageQuery });
+
+  return flattenToObject<UsesPage>(data.usesPage);
+}
+
+export const UsesPageQuery = gql`
+  {
+    usesPage {
+      data {
+        id
+        attributes {
+          hardware {
+            title
+            content
+          }
+          programmingTools {
+            title
+            content
+          }
+          productivity {
+            title
+            content
+          }
+          media {
+            title
+            content
+          }
+          security {
+            title
+            content
+          }
+        }
+      }
+    }
+  }
+`;

src/types/RecruitersPage.ts

@@ -1,3 +1,5 @@
+import { TitledParagraph } from '@/types/Shared';
+
 export interface RecruitersPage {
   intro: string;
   salary: TitledParagraph;
@@ -7,8 +9,3 @@ export interface RecruitersPage {
   tldr: TitledParagraph;
   outro: string;
 }
-
-interface TitledParagraph {
-  title: string;
-  content: string;
-}

src/types/Shared.ts

@@ -0,0 +1,4 @@
+export interface TitledParagraph {
+  title: string;
+  content: string;
+}

src/types/UsesPage.ts

@@ -0,0 +1,9 @@
+import { TitledParagraph } from '@/types/Shared';
+
+export interface UsesPage {
+  hardware: TitledParagraph;
+  media: TitledParagraph;
+  productivity: TitledParagraph;
+  programmingTools: TitledParagraph;
+  security: TitledParagraph;
+}