generating types via relay, fixing type errs

frontend/src/_components/_display/ArticleWrapper.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 interface ArticleWrapperProps {
   children: ReactNode;
-  className: string;
+  className?: string;
 }
 
 export default function ArticleWrapper({ children, className }: ArticleWrapperProps) {

frontend/src/_components/_display/CompetitionList.tsx

@@ -4,15 +4,14 @@ import Link from "next/link";
 import FilterableList from "./FilterableList";
 import { formatDate } from "@/_lib/dateUtils";
 
-interface ClosedCompetition {
-  name: string;
-  dateCreated: string;
-  opened: string;
-  status: string;
-}
-
+// Props inferred from Relay data
 interface ClosedCompetitionListProps {
-  competitions: ClosedCompetition[];
+  competitions: {
+    id: string;
+    name: string;
+    dateCreated: string;
+    status: string;
+  }[];
 }
 
 export default function ClosedCompetitionList({

frontend/src/_components/_hooks/useBackendErrors.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-
-export default function useBackendErrors(mutationName) {
+// I want types for this
+export default function useBackendErrors(mutationName : any) {
   const [backendErrors, setBackendErrors] = React.useState({});
 
-  const handleMutationCompleted = (data, errors) => {
+  const handleMutationCompleted = (data : any, errors : any) => {
     if (errors?.length || data[mutationName]?.errors?.length) {
       setBackendErrors({
         formErrors: data[mutationName]?.errors,
@@ -28,7 +28,7 @@ export default function useBackendErrors(mutationName) {
 
     return true;
   };
-  const handleMutationError = (error) => {
+  const handleMutationError = (error : any) => {
     // eslint-disable-next-line no-console
     console.error(error);
     setBackendErrors({ failError: true });

frontend/src/_components/_hooks/useBots.ts

@@ -1,8 +1,9 @@
 import { useLazyLoadQuery, graphql } from 'react-relay';
-import { nodes } from "@/_lib/relayHelpers";
+import { getNodes, nodes } from "@/_lib/relayHelpers";
+import { useBotsQuery } from './__generated__/useBotsQuery.graphql';
 
 export const useBots = (name = '', last = 5) => {
-  const data = useLazyLoadQuery(
+  const data = useLazyLoadQuery<useBotsQuery>(
     graphql`
       query useBotsQuery($name: String, $first: Int) {
         bots(name: $name, first: $first) {
@@ -21,7 +22,24 @@ export const useBots = (name = '', last = 5) => {
         }
       }
     `,
-    { name, last }
+    { name }
   );
-  return nodes(data.bots);
+//   return nodes(data.bots);
+// };
+
+
+
+const botNodes = getNodes(data.bots)
+
+// Transform into a sanitized shape
+return botNodes.map((node) => ({
+ id: node.id,
+ created: String(node.created), // Ensure string
+ name: node.name || "", // Fallback for title
+ type: node.type || "", // Fallback for text
+ user : {
+  id: node.user.id,
+  username: node.user.username 
+ }
+}));
 };

frontend/src/_components/_hooks/useCompetitions.ts

@@ -26,9 +26,12 @@
 
 import { useLazyLoadQuery, graphql } from 'react-relay';
 import { nodes } from "@/_lib/relayHelpers";
+import {getNodes} from "@/_lib/relayHelpers";
+import { useCompetitionsQuery } from './__generated__/useCompetitionsQuery.graphql';
+
 
 export const useCompetitions = () => {
-  const data = useLazyLoadQuery(
+  const data = useLazyLoadQuery<useCompetitionsQuery>(
     graphql`
       query useCompetitionsQuery {
         competitions(last:20) {
@@ -44,7 +47,17 @@ export const useCompetitions = () => {
         }
       }
     `,
-    { }
+    {}
   );
-  return nodes(data.competitions);
+
+  const competitionNodes = getNodes(data.competitions)
+
+   // Transform into a sanitized shape
+   return competitionNodes.map((node) => ({
+    id: node.id,
+    dateCreated: String(node.dateCreated), // Ensure string
+    name: node.name || "", // Fallback for title
+    type: node.type || "", // Fallback for text
+    status: node.status || "", // Convert null to undefined
+  }));
 };

frontend/src/_components/_hooks/useNews.ts

@@ -1,8 +1,9 @@
 import { useLazyLoadQuery, graphql } from 'react-relay';
-import {nodes} from "@/_lib/relayHelpers";
+import {getNodes} from "@/_lib/relayHelpers";
+import {useNewsQuery} from "./__generated__/useNewsQuery.graphql.js"
 
 export const useNews = () => {
-  const data = useLazyLoadQuery(
+  const data = useLazyLoadQuery<useNewsQuery>(
     graphql`
       query useNewsQuery {
         news(last: 5) {
@@ -20,5 +21,16 @@ export const useNews = () => {
     `,
     {},
   );
-  return nodes(data.news);
-};
+
+  // Extract and process nodes
+  const newsNodes = getNodes(data.news);
+
+  // Transform into a sanitized shape
+  return newsNodes.map((node) => ({
+    id: node.id,
+    created: String(node.created), // Ensure string
+    title: node.title || "", // Fallback for title
+    text: node.text || "", // Fallback for text
+    ytLink: node.ytLink || undefined, // Convert null to undefined
+  }));
+};

frontend/src/_components/_hooks/useSignIn.ts

@@ -1,12 +1,13 @@
 import { useMutation, graphql } from 'react-relay';
 import { useState } from 'react';
+import { useSignInMutation } from './__generated__/useSignInMutation.graphql';
 
 
 
 type SignInFunction = (username: string, password: string, onSuccess?: () => void) => void;
 
 export const useSignIn = (): [SignInFunction, boolean, string | null] => {
-  const [commit, isInFlight] = useMutation(
+  const [commit, isInFlight] = useMutation<useSignInMutation>(
     graphql`
       mutation useSignInMutation($input: PasswordSignInInput!) {
         passwordSignIn(input: $input) {
@@ -29,14 +30,17 @@ export const useSignIn = (): [SignInFunction, boolean, string | null] => {
       onCompleted: (response) => {
         const errors = response?.passwordSignIn?.errors;
         if (errors && errors.length > 0) {
-          setError(errors[0].messages[0]); // Display the first error message
+          // Safely access the first error message
+          const firstErrorMessage = errors[0]?.messages?.[0] ?? 'An unknown error occurred.';
+          setError(firstErrorMessage);
         } else {
-          setError(null); // Clear error if no issues
-          if (onSuccess) {
-            onSuccess(); // Call the success callback
-          }
-        }
+              setError(null); // Clear error if no issues
+              if (onSuccess) {
+                onSuccess(); // Call the success callback
+              }
+            }
       },
+
       onError: (err) => {
         setError('Something went wrong. Please try again.'); // Handle unexpected errors
       }

frontend/src/_components/_hooks/useSignOut.ts

@@ -1,8 +1,10 @@
 import { useMutation, graphql } from 'react-relay';
 import { useState } from 'react';
 
+import { useSignOutMutation } from './__generated__/useSignOutMutation.graphql';
+
 export const useSignOut = (): [() => void, boolean, string | null] => {
-  const [commit, isInFlight] = useMutation(
+  const [commit, isInFlight] = useMutation<useSignOutMutation>(
     graphql`
       mutation useSignOutMutation {
         signOut {
@@ -20,10 +22,11 @@ export const useSignOut = (): [() => void, boolean, string | null] => {
   const signOut = () => {
     commit({
       variables: {}, // No variables needed for sign out mutation
-      onCompleted: (response) => {
+      onCompleted: (response: useSignOutMutation['response']) => {
         const errors = response?.signOut?.errors;
         if (errors && errors.length > 0) {
-          setError(errors[0].messages[0]); // Handle and display error
+          const firstErrorMessage = errors[0]?.messages?.[0] ?? 'An unknown error occurred.';
+          setError(firstErrorMessage); // Handle and display the first error message
         } else {
           setError(null); // Clear error on success
         }

frontend/src/_components/_hooks/useUser.ts

@@ -1,7 +1,8 @@
 import { useLazyLoadQuery, graphql } from 'react-relay';
+import { useUserQuery } from './__generated__/useUserQuery.graphql';
 
 export const useUser = () => {
-  const data = useLazyLoadQuery(
+  const data = useLazyLoadQuery<useUserQuery>(
     graphql`
       query useUserQuery {
         viewer {
@@ -17,3 +18,5 @@ export const useUser = () => {
   );
   return data.viewer;
 };
+
+

frontend/src/_components/_nav/Footer.tsx

@@ -7,13 +7,13 @@ import SectionDivider from "../_display/SectionDivider";
 import { getFeatureFlags } from "@/_data/featureFlags";
 
 const Footer: React.FC = () => {
-  const servies = getFeatureFlags().footerServices;
+  const services = getFeatureFlags().footerServices;
 
   return (
     <footer className="border-white border-1  text-white">
       <SectionDivider />
       <div className="pt-12 container mx-auto px-4 flex flex-col md:flex-row md:flex-wrap justify-between items-start">
-        {servies ? <ServicesComponent services={footerLinks.services} /> : null}
+        {services ? <ServicesComponent services={footerLinks.services} /> : null}
         <SupportersComponent supporterData={footerLinks.topSupporters} />
 
         <SocialComponent links={footerLinks.socialLinks} />

frontend/src/_data/featureFlags.ts

@@ -28,7 +28,7 @@ export function getFeatureFlags(): FeatureFlags {
     statusServerStatus: false,
     statusPage: true,
     botsPage: false,
-    competitionMaps: false,
+    competitionMaps: true,
     competitionVideo: false,
     supporters:false,
     examples:false,

frontend/src/_lib/relayHelpers.ts

@@ -3,3 +3,28 @@ export function nodes<T>(connection: { edges?: Array<{ node: T }> } | null | und
   const edges = connection?.edges || [];
   return edges.map(edge => edge.node);
 }
+
+// export const nodes = <T extends { node?: any }>(
+//   connection: { readonly edges?: ReadonlyArray<T | null | undefined> | null | undefined } | null | undefined
+// ): NonNullable<T['node']>[] => {
+//   return (
+//     connection?.edges
+//       ?.map((edge) => edge?.node) // Extract nodes
+//       .filter((node): node is NonNullable<T['node']> => Boolean(node)) || [] // Remove null/undefined nodes
+//   );
+// };
+
+
+export function getNodes<T>(
+  connection: {
+    readonly edges?: ReadonlyArray<{
+      readonly node: T | null | undefined;
+    } | null | undefined>;
+  } | null | undefined
+): T[] {
+  return (
+    connection?.edges
+      ?.map((edge) => edge?.node) // Extract nodes
+      .filter((node): node is T => node !== null && node !== undefined) || [] // Remove null/undefined nodes
+  );
+}

frontend/src/app/(unprotected_pages)/about/page.tsx

@@ -42,9 +42,7 @@ const AboutUs = () => {
 
       {/* Getting Started Guide */}
       <section className="py-12 bg-customBackgroundColor3">
-        <h2 className="text-3xl text-customGreen font-semibold text-center mb-6">
-          Common Questions
-        </h2>
+
         <div className="max-w-2xl mx-auto">
           <Accordion
             title="How can I get started with AI Arena?"