feat(apps/faq): use graphql, fix styling, structure

apps/web/src/app/(cms)/faq/(root)/components/get-in-touch.tsx

@@ -23,7 +23,7 @@ function Block({ title, button, icon: Icon }: Block) {
         <div className="absolute opacity-20 rounded-full bg-blue-500 w-[55px] aspect-1 bottom-0 right-0" />
         <div className="absolute opacity-20 rounded-full bg-[#F338C3] w-[52px] aspect-1 bottom-0 right-0" />
         <div className="absolute w-[55px] aspect-1 bottom-0 right-0 flex justify-center items-center pl-px text-white">
-          <Icon width={26} height={26} />
+          <Icon width={26} height={26} className="w-[26px] h-[26px]" />
         </div>
       </div>
     </div>

apps/web/src/app/(cms)/faq/(root)/components/help-by-categories.tsx

@@ -1,11 +1,12 @@
 import { classNames } from '@sushiswap/ui'
 import Link from 'next/link'
+
 import {
-  CategoryListEntry,
-  getFaqCategoryList,
-} from '../../lib/strapi/categoryList'
+  type FaqCategories,
+  getFaqCategories,
+} from '@sushiswap/graph-client/strapi'
 
-function Block({ name, url }: CategoryListEntry) {
+function Block({ name, url }: FaqCategories[number]) {
   return (
     <Link
       href={url}
@@ -21,7 +22,7 @@ function Block({ name, url }: CategoryListEntry) {
 }
 
 export async function HelpByCategories() {
-  const categories = await getFaqCategoryList()
+  const categories = await getFaqCategories({ sort: ['id'] })
 
   return (
     <div className="md:space-y-12">

apps/web/src/app/(cms)/faq/(root)/components/help-by-products.tsx

@@ -1,11 +1,11 @@
+import {
+  type FaqProducts,
+  getFaqProducts,
+} from '@sushiswap/graph-client/strapi'
 import { CloudinaryImage, classNames } from '@sushiswap/ui'
 import Link from 'next/link'
-import {
-  ProductListEntry,
-  getFaqProductList,
-} from '../../lib/strapi/productList'
 
-function Block({ name, url, image }: ProductListEntry) {
+function Block({ name, description, url, image }: FaqProducts[number]) {
   return (
     <Link
       href={url}
@@ -15,24 +15,28 @@ function Block({ name, url, image }: ProductListEntry) {
         'dark:bg-white dark:bg-opacity-5 dark:border-slate-500 dark:border-opacity-20',
       )}
     >
-      <CloudinaryImage
-        alt={image.alternativeText}
-        src={image.provider_metadata.public_id}
-        width={image.width}
-        height={image.height}
-        sizes="100vw"
-        className="h-14 w-min"
-      />
+      {image ? (
+        <CloudinaryImage
+          alt={image.alternativeText}
+          src={image.provider_metadata.public_id}
+          width={image.width}
+          height={image.height}
+          sizes="100vw"
+          className="h-14 w-min"
+        />
+      ) : null}
       <div className="space-y-3 flex flex-col justify-center text-center">
         <div className="text-lg font-bold">{name}</div>
-        <div className="text-sm dark:text-white text-opacity-70">{`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}</div>
+        <div className="text-sm dark:text-white text-opacity-70">
+          {description}
+        </div>
       </div>
     </Link>
   )
 }
 
 export async function HelpByProducts() {
-  const products = await getFaqProductList()
+  const products = await getFaqProducts()
 
   return (
     <div className="md:space-y-12">

apps/web/src/app/(cms)/faq/(root)/components/most-searched-questions.tsx

@@ -1,11 +1,11 @@
 import { ChevronRightIcon } from '@heroicons/react/24/solid'
-import Link from 'next/link'
 import {
-  MostSearchedListEntry,
-  getFaqMostSearchedList,
-} from '../../lib/strapi/mostSearchedQuestionList'
+  FaqMostSearched,
+  getFaqMostSearched,
+} from '@sushiswap/graph-client/strapi'
+import Link from 'next/link'
 
-function Question({ question, url }: MostSearchedListEntry) {
+function Question({ question, url }: FaqMostSearched[number]) {
   return (
     <div className="">
       <Link
@@ -26,7 +26,7 @@ function Question({ question, url }: MostSearchedListEntry) {
 
 function MostSearchedQuestionsDesktop({
   questions,
-}: { questions: MostSearchedListEntry[] }) {
+}: { questions: FaqMostSearched }) {
   const firstHalf = questions.slice(0, Math.ceil(questions.length / 2))
   const secondHalf = questions.slice(Math.ceil(questions.length / 2))
 
@@ -52,7 +52,7 @@ function MostSearchedQuestionsDesktop({
 
 function MostSearchedQuestionsMobile({
   questions,
-}: { questions: MostSearchedListEntry[] }) {
+}: { questions: FaqMostSearched }) {
   return (
     <div className="divide-y divide-slate-500 divide-opacity-50 gap-y-4">
       {questions.map((topic, i) => (
@@ -65,7 +65,7 @@ function MostSearchedQuestionsMobile({
 }
 
 export async function MostSearchedQuestions() {
-  const questions = await getFaqMostSearchedList()
+  const questions = await getFaqMostSearched()
 
   return (
     <div className="flex flex-col space-y-8 md:space-y-12">

apps/web/src/app/(cms)/faq/(root)/components/search-box.tsx

@@ -6,8 +6,8 @@ import { useRef, useState } from 'react'
 
 import { SearchIcon } from '@heroicons/react-v1/outline'
 import { XIcon } from '@heroicons/react-v1/solid'
+import { getFaqAnswerSearch } from '@sushiswap/graph-client/strapi'
 import { useQuery } from '@tanstack/react-query'
-import { getFaqAnswers } from '../../lib/strapi/answerSearch'
 
 export function SearchBox() {
   const ref = useRef<HTMLDivElement>(null)
@@ -19,10 +19,10 @@ export function SearchBox() {
     setOpen(false)
   })
 
-  const { data, isInitialLoading, isError } = useQuery(
-    ['faq-answers', debouncedQuery],
-    () => getFaqAnswers(debouncedQuery),
-  )
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['faq-answers', debouncedQuery],
+    queryFn: () => getFaqAnswerSearch({ search: debouncedQuery }),
+  })
 
   return (
     <div className="flex flex-col gap-3 relative">
@@ -81,16 +81,13 @@ export function SearchBox() {
                 <p className="text-sm font-semibold mt-4 px-4 text-slate-400">
                   Questions
                 </p>
-                <RowGroup
-                  entries={data?.answers || []}
-                  isLoading={isInitialLoading}
-                />
+                <RowGroup entries={data?.answers || []} isLoading={isLoading} />
                 <p className="text-sm font-semibold mt-4 px-4 text-slate-400">
                   Question Groups
                 </p>
                 <RowGroup
                   entries={data?.answerGroups || []}
-                  isLoading={isInitialLoading}
+                  isLoading={isLoading}
                 />
               </>
             )}

apps/web/src/app/(cms)/faq/[category-slug]/(category)/components/category-layout.tsx

@@ -1,5 +1,5 @@
+import { getFaqCategories } from '@sushiswap/graph-client/strapi'
 import { Container } from '@sushiswap/ui'
-import { getFaqCategoryList } from 'src/app/(cms)/faq/lib/strapi/categoryList'
 import {
   Sidebar,
   SidebarDesktop,
@@ -43,7 +43,7 @@ function CategoryLayoutMobile({
 }
 
 export async function CategoryLayout({ children }: CategoryLayoutProps) {
-  const categories = await getFaqCategoryList()
+  const categories = await getFaqCategories({ sort: ['id'] })
   const sidebarEntries = categories.map((category) => {
     return {
       name: category.name,

apps/web/src/app/(cms)/faq/[category-slug]/(category)/layout.tsx

@@ -1,6 +1,7 @@
+import { getFaqCategory } from '@sushiswap/graph-client/strapi'
 import { Breadcrumb, Container, typographyVariants } from '@sushiswap/ui'
+import { notFound } from 'next/navigation'
 import React from 'react'
-import { getFaqCategory } from '../../lib/strapi/category'
 import { CategoryLayout } from './components/category-layout'
 
 export const revalidate = 900
@@ -12,7 +13,13 @@ export default async function Layout({
   children: React.ReactNode
   params: { 'category-slug': string }
 }) {
-  const category = await getFaqCategory(params['category-slug'])
+  let category
+
+  try {
+    category = await getFaqCategory({ slug: params['category-slug'] })
+  } catch {
+    return notFound()
+  }
 
   return (
     <>

apps/web/src/app/(cms)/faq/[category-slug]/(category)/page.tsx

@@ -1,12 +1,16 @@
+import { FaqCategory, getFaqCategory } from '@sushiswap/graph-client/strapi'
 import Link from 'next/link'
-import { Category, getFaqCategory } from '../../lib/strapi/category'
+import { notFound } from 'next/navigation'
 
 export const revalidate = 900
 
 function AnswerGroup({
   category,
   answerGroup,
-}: { category: Category; answerGroup: Category['answerGroups'][number] }) {
+}: {
+  category: FaqCategory
+  answerGroup: FaqCategory['answerGroups'][number]
+}) {
   return (
     <div className="space-y-4">
       <div className="text-xl font-medium">{answerGroup.name}</div>
@@ -31,7 +35,13 @@ export default async function FaqCategoryPage({
 }: {
   params: { 'category-slug': string }
 }) {
-  const category = await getFaqCategory(params['category-slug'])
+  let category
+
+  try {
+    category = await getFaqCategory({ slug: params['category-slug'] })
+  } catch {
+    return notFound()
+  }
 
   return (
     <div className="w-full space-y-6">

apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/[answer-slug]/page.tsx

@@ -1,17 +1,20 @@
-import { getFaqAnswer } from '../../../lib/strapi/answer'
+import { getFaqAnswer } from '@sushiswap/graph-client/strapi'
+import { getGhostBody } from 'src/app/(cms)/lib/ghost/ghost'
 
 export const revalidate = 3600
 
 export default async function AnswerPage({
   params,
 }: { params: { 'answer-slug': string } }) {
-  const answer = await getFaqAnswer(params['answer-slug'])
+  const answer = await getFaqAnswer({ slug: params['answer-slug'] })
+
+  const body = await getGhostBody(answer.ghostSlug)
 
   return (
     <div
       className="prose dark:!prose-invert prose-slate"
       dangerouslySetInnerHTML={{
-        __html: answer.body || '',
+        __html: body || '',
       }}
     />
   )

apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/components/answer-group-layout.tsx

@@ -1,10 +1,10 @@
+import { getFaqAnswerGroup } from '@sushiswap/graph-client/strapi'
 import { Container } from '@sushiswap/ui'
 import {
   Sidebar,
   SidebarDesktop,
   SidebarMobile,
 } from '../../../components/sidebar'
-import { getFaqAnswerGroup } from '../../../lib/strapi/answerGroup'
 
 export const revalidate = 900
 
@@ -20,11 +20,13 @@ function AnswerGroupLayoutDesktop({
   return (
     <Container
       maxWidth="4xl"
-      className="flex justify-between pb-40 pt-24 px-8 space-x-16"
+      className="justify-between pb-40 pt-24 px-8 space-x-16 grid grid-cols-10"
     >
-      <SidebarDesktop {...sidebar} />
+      <div className="col-span-2">
+        <SidebarDesktop {...sidebar} />
+      </div>
       <div className="min-h-full flex dark:bg-slate-600 bg-[#BFBFBF] w-[2px]" />
-      {children}
+      <div className="col-span-7">{children}</div>
     </Container>
   )
 }
@@ -47,7 +49,10 @@ export async function AnswerGroupLayout({
   children,
   params,
 }: AnswerGroupLayoutProps) {
-  const answerGroup = await getFaqAnswerGroup(params['answer-group-slug'])
+  const answerGroup = await getFaqAnswerGroup({
+    slug: params['answer-group-slug'],
+  })
+
   const sidebarEntries = answerGroup.answers.map((answer) => {
     return {
       name: answer.name,
@@ -63,7 +68,7 @@ export async function AnswerGroupLayout({
 
   return (
     <>
-      <div className="md:block hidden w-full">
+      <div className="md:block hidden w-full pl-[calc(100vw-100%)]">
         <AnswerGroupLayoutDesktop sidebar={sidebar}>
           {children}
         </AnswerGroupLayoutDesktop>

apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/layout.tsx

@@ -1,6 +1,7 @@
+import { getFaqAnswerGroup } from '@sushiswap/graph-client/strapi'
 import { Breadcrumb, Container, typographyVariants } from '@sushiswap/ui'
+import { notFound } from 'next/navigation'
 import React from 'react'
-import { getFaqAnswerGroup } from 'src/app/(cms)/faq/lib/strapi/answerGroup'
 import { AnswerGroupLayout } from './components/answer-group-layout'
 
 export const revalidate = 900
@@ -12,11 +13,19 @@ export default async function Layout({
   children: React.ReactNode
   params: { 'answer-group-slug': string }
 }) {
-  const answerGroup = await getFaqAnswerGroup(params['answer-group-slug'])
+  let answerGroup
+
+  try {
+    answerGroup = await getFaqAnswerGroup({
+      slug: params['answer-group-slug'],
+    })
+  } catch {
+    return notFound()
+  }
 
   return (
     <div>
-      <div className="dark:bg-[#19202F]">
+      <div className="dark:bg-[#19202F] w-full pl-[calc(100vw-100%)]">
         <Container maxWidth="4xl" className="px-5 md:px-8 space-y-6 pb-14">
           <Breadcrumb replace={{ '-': ' ' }} truncate={false} />
           <h1 className={typographyVariants({ variant: 'h1' })}>

apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/route.ts

@@ -1,17 +1,23 @@
-import { redirect } from 'next/navigation'
+import { getFaqAnswerGroup } from '@sushiswap/graph-client/strapi'
+import { notFound, redirect } from 'next/navigation'
 import { NextRequest } from 'next/server'
-import { getFaqAnswerGroup } from '../../lib/strapi/answerGroup'
 
 export const revalidate = 3600
 
 export async function GET(request: NextRequest) {
   const pathname = new URL(request.url).pathname
   const answerGroupId = pathname.split('/').slice(-1)[0]
-  const answerGroup = await getFaqAnswerGroup(answerGroupId)
+  const answerGroup = await getFaqAnswerGroup({ slug: answerGroupId })
 
   if (!answerGroup) {
     return redirect(pathname.split('/').slice(0, -1).join('/'))
   }
 
-  redirect(`${pathname}/${answerGroup.defaultAnswer.slug}`)
+  const slug = answerGroup.defaultAnswer?.slug || answerGroup.answers?.[0].slug
+
+  if (!slug) {
+    return notFound()
+  }
+
+  redirect(`${pathname}/${slug}`)
 }