Add Graphql and banner

Author: scriptoriumwebdev

.env

@@ -0,0 +1 @@
+GRAPHQL_URL=https://panel.softvag.com/graphql

.graphqlrc.ts

@@ -0,0 +1,29 @@
+import { loadEnvConfig } from "@next/env";
+import type { CodegenConfig } from "@graphql-codegen/cli";
+
+loadEnvConfig(process.cwd());
+
+const config: CodegenConfig = {
+  schema: `${process.env.GRAPHQL_URL}`,
+  overwrite: true,
+  ignoreNoDocuments: true,
+  documents: "graphql/*.graphql",
+  generates: {
+    "gql/": {
+      preset: "client",
+      presetConfig: {
+        fragmentMasking: false,
+      },
+      config: {
+        useTypeImports: true,
+        enumsAsTypes: true,
+        defaultScalarType: "unknown",
+        skipTypename: true,
+        documentMode: "string",
+      },
+    },
+  },
+};
+
+// eslint-disable-next-line import/no-default-export
+export default config;

api/graphQLApi.ts

@@ -0,0 +1,44 @@
+import { TypedDocumentString } from "@/gql/graphql";
+
+type GraphQLResponse<T> =
+  | { data?: undefined; errors: { message: string }[] }
+  | { data: T; errors?: undefined };
+
+type PageItem = {
+  Title: string;
+};
+
+type PagesGraphqlResponse = {
+  pages: {
+    data: {
+      id: string;
+      attributes: PageItem;
+    }[];
+  };
+};
+
+export async function ExecuteGraphql<TResult, TVariables>(
+  query: TypedDocumentString<TResult, TVariables>,
+  variables: TVariables
+): Promise<TResult> {
+  if (!process.env.GRAPHQL_URL) {
+    throw TypeError("GRAPHQL_URL is not defined");
+  }
+  const res = await fetch(process.env.GRAPHQL_URL, {
+    method: "POST",
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const graphqlResponse = (await res.json()) as GraphQLResponse<TResult>;
+  if (graphqlResponse.errors) {
+    throw TypeError(`GrapQL Error`, { cause: graphqlResponse.errors });
+  }
+
+  return graphqlResponse.data;
+}

app/components/banner.tsx

@@ -0,0 +1,10 @@
+export default function Banner() {
+  return (
+    <div className="flex items-center gap-x-6 bg-red-800 px-6 py-2.5 sm:px-3.5 sm:before:flex-1 z-10 absolute top-14 left-0 w-full">
+      <p className="text-sm leading-6 text-white">
+        Urlop w dniach 19.08.2024 - 01.09.2024
+      </p>
+      <div className="flex flex-1 justify-end"></div>
+    </div>
+  );
+}

app/components/links.tsx

@@ -11,6 +11,7 @@ import { useState } from "react";
 import { FaCaretDown } from "react-icons/fa";
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
+import Banner from "./banner";
 
 export function Links() {
   const pathname = usePathname();
@@ -276,6 +277,7 @@ export function Links() {
           </ul>
         </div>
       </div>
+      <Banner />
     </nav>
   );
 }

app/o-firmie/page.tsx

@@ -2,12 +2,17 @@ import Link from "next/link";
 import Main from "../components/main";
 import Image from "next/image";
 import type { Metadata } from "next";
+import { ExecuteGraphql } from "@/api/graphQLApi";
+import { PagesGetListDocument } from "@/gql/graphql";
 
 export const metadata: Metadata = {
   title: "O Firmie",
 };
 
-export default function About() {
+export default async function About() {
+  const data = await ExecuteGraphql(PagesGetListDocument, {});
+  console.log(data.pages?.data);
+
   return (
     <Main>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">

gql/gql.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import * as types from './graphql';
+
+
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "query PagesGetList {\n  pages {\n    data {\n      id\n      attributes {\n        Title\n      }\n    }\n  }\n}": types.PagesGetListDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "query PagesGetList {\n  pages {\n    data {\n      id\n      attributes {\n        Title\n      }\n    }\n  }\n}"): typeof import('./graphql').PagesGetListDocument;
+
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}