Merge pull request #65 from Blazity/mobile-design

fix: main card - mobile issue
Blazity · Oct 16, 2023 · e008755 · e008755
2 parents 7cf54d6 + 0a22015
commit e008755
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 71 deletions.
diff --git a/src/components/ArticleCard/HeroArticleCard.tsx b/src/components/ArticleCard/HeroArticleCard.tsx
@@ -62,7 +62,7 @@ export function HeroArticleCard({
           )}
           <div className="absolute inset-0 z-20 flex w-full flex-col items-start justify-between p-6 ">
             <div className="flex w-full justify-between">
-              <div className="flex gap-2">
+              <div className="flex flex-wrap gap-2">
                 {tags.map((tag) => {
                   return <Tag key={tag}>{tag}</Tag>
                 })}

diff --git a/src/components/CategoryArticles/CategoryArticlesInfinite.tsx b/src/components/CategoryArticles/CategoryArticlesInfinite.tsx
@@ -52,7 +52,11 @@ export function RecentArticlesInfinite({ initialArticles, category }: CategoryAr
         articles={articles}
       />
       {hasNextPage && (
-        <Button className="mt-16 w-full p-4" disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
+        <Button
+          className="mt-16 w-full rounded-xl border p-4"
+          disabled={isFetchingNextPage}
+          onClick={() => fetchNextPage()}
+        >
           {buttonText}
         </Button>
       )}

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -53,9 +53,11 @@ export function Navigation({ locale, navigation }: NavigationProps) {
         </li>
         <Sheet open={isSheetOpen}>
           <SheetTrigger asChild onClick={() => setIsSheetOpen((prev) => !prev)}>
-            <Button className="-mr-4" variant="ghost">
-              {isSheetOpen ? <X /> : <Menu />}
-            </Button>
+            <li>
+              <Button aria-label="opening and closing a menu" className="-mr-4" variant="ghost">
+                {isSheetOpen ? <X /> : <Menu />}
+              </Button>
+            </li>
           </SheetTrigger>
           <SheetContent className="mt-20 flex min-w-[100vw] list-none flex-col items-center justify-start text-center text-xl font-semibold">
             {navElements}

diff --git a/src/components/Quiz/QuizLogic.tsx b/src/components/Quiz/QuizLogic.tsx
@@ -3,45 +3,35 @@
 import { useQuery } from "@tanstack/react-query"
 import { ArrowRight, Check, XCircle } from "lucide-react"
 import { useState } from "react"
-import { GetQuizQuestionsByIdQuery, QuizAnswer, QuizQuestion } from "@/gql/graphql"
+import { QuizAnswer, QuizQuestion } from "@/gql/graphql"
 import { useLocale } from "@/i18n/useLocale"
 import { getQuizQuestionsById } from "@/lib/client"
 import { cn } from "@/utils/cn"
 import { RichText } from "../RichText/RichText"
+import { Skeleton } from "../ui/Skeleton/Skeleton"
 
 type ExtendedQuizAnswer = QuizAnswer & { status?: "clicked" | null }
 
 type ExtendedQuizQuestion = QuizQuestion & { answer: ExtendedQuizAnswer[]; isAnswered?: boolean }
 
-type Quiz = GetQuizQuestionsByIdQuery["quiz"] & {
-  isAnswered: boolean
-  question: ExtendedQuizQuestion[]
-  answer: ExtendedQuizAnswer[]
-  id: string
-}
-
-export type QuizProps = {
-  initialQuiz: Quiz
-}
+export type QuizProps = { id: string }
 
-export function QuizLogic({ initialQuiz }: QuizProps) {
+export function QuizLogic({ id }: QuizProps) {
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
-  const [questions, setQuestions] = useState<ExtendedQuizQuestion[]>(initialQuiz?.question)
+  const [questions, setQuestions] = useState<ExtendedQuizQuestion[]>([])
 
   const locale = useLocale()
-  const { data } = useQuery(
-    ["quiz-questions", initialQuiz?.id],
-    () => getQuizQuestionsById({ locale, id: initialQuiz.id || "", skip: 0 }),
+  const { data, isLoading } = useQuery(
+    ["quiz-questions", id],
+    () => getQuizQuestionsById({ locale, id: id || "", skip: 0 }),
     {
-      placeholderData: initialQuiz?.question,
-      enabled: !!initialQuiz,
       onSuccess: (data) => {
         setQuestions(data as QuizQuestion[])
       },
     }
   )
 
-  const currentQuestion = questions[currentQuestionIndex]
+  const currentQuestion = questions?.[currentQuestionIndex]
 
   const pickAnswer = (id: string) => {
     setQuestions((prev) => {
@@ -93,36 +83,36 @@ export function QuizLogic({ initialQuiz }: QuizProps) {
     setCurrentQuestionIndex((prev) => prev - 1)
   }
 
+  if (isLoading && !data) return <Skeleton className="h-[20vh] w-full rounded-xl bg-custom-gray-200" />
+
   return (
     <div className="w-full flex-col items-center justify-center rounded-xl border-[1px] p-5">
-      {data && (
-        <div className="w-full items-center justify-center">
-          <div className="mx-1 flex items-center justify-between pb-8">
-            <RichText raw={currentQuestion.content.raw} />
-            <p className="font-semibold text-custom-gray-300">
-              {currentQuestionIndex + 1}/{data?.length}
-            </p>
-          </div>
-          <ul className="flex flex-col gap-y-3">
-            {currentQuestion.answer.map((answer: ExtendedQuizAnswer, index) => (
-              <li
-                onClick={() => handleClickQuestion(answer.id)}
-                key={index}
-                className={cn(
-                  answer.status && answer.isValid && "bg-black",
-                  answer.status && !answer.isValid && "bg-custom-gray-200",
-                  !answer.status && !currentQuestion.isAnswered && "cursor-pointer hover:bg-slate-50",
-                  "flex items-center justify-between rounded-xl border-[1px] px-4 py-2"
-                )}
-              >
-                <RichText raw={answer.content.raw} pClassName={cn(answer.status && answer.isValid && "text-white")} />
-                {answer.status && answer.isValid && <Check stroke="white" />}
-                {answer.status && !answer.isValid && <XCircle stroke="#D9D9D9" />}
-              </li>
-            ))}
-          </ul>
+      <div className="w-full items-center justify-center">
+        <div className="mx-1 flex items-center justify-between pb-8">
+          <RichText raw={currentQuestion?.content?.raw} />
+          <p className="font-semibold text-custom-gray-300">
+            {currentQuestionIndex + 1}/{data?.length}
+          </p>
         </div>
-      )}
+        <ul className="flex flex-col gap-y-3">
+          {currentQuestion?.answer?.map((answer: ExtendedQuizAnswer, index) => (
+            <li
+              onClick={() => handleClickQuestion(answer.id)}
+              key={index}
+              className={cn(
+                answer.status && answer.isValid && "bg-black",
+                answer.status && !answer.isValid && "bg-custom-gray-200",
+                !answer.status && !currentQuestion.isAnswered && "cursor-pointer hover:bg-slate-50",
+                "flex items-center justify-between rounded-xl border-[1px] px-4 py-2"
+              )}
+            >
+              <RichText raw={answer?.content?.raw} pClassName={cn(answer.status && answer.isValid && "text-white")} />
+              {answer.status && answer.isValid && <Check stroke="white" />}
+              {answer.status && !answer.isValid && <XCircle stroke="#D9D9D9" />}
+            </li>
+          ))}
+        </ul>
+      </div>
       <div className="mt-8 flex w-full justify-between">
         <button disabled={isFirstQuestion} className="p-4 disabled:text-custom-gray-300" onClick={previousQuestion}>
           Back

diff --git a/src/components/RecentArticles/RecentArticlesInfinite.tsx b/src/components/RecentArticles/RecentArticlesInfinite.tsx
@@ -53,7 +53,7 @@ export function RecentArticlesInfinite({ initialArticles }: RecentArticlesInfini
         })}
       </div>
       {hasNextPage && (
-        <Button className="w-full border p-4" disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
+        <Button className="w-full rounded-xl border p-4" disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
           See more
         </Button>
       )}

diff --git a/src/components/RecommendedArticles/RecommendedArticles.tsx b/src/components/RecommendedArticles/RecommendedArticles.tsx
@@ -17,7 +17,7 @@ export function RecommendedArticles({ id, lang }: RecommendedArticlesProps) {
   return (
     <section className="w-full py-4">
       <h2 className="mb-8 text-2xl font-bold">Related articles</h2>
-      <div className={`grid grid-cols-3 gap-8`}>
+      <div className={`grid gap-8 md:grid-cols-3`}>
         {isLoading &&
           Array.from(Array(3).keys()).map((idx) => {
             return <ArticleSkeleton key={`skeleton-${idx}`} />

diff --git a/src/components/RichText/RichText.tsx b/src/components/RichText/RichText.tsx
@@ -2,9 +2,9 @@
 import { RichText as HygraphRichText } from "@graphcms/rich-text-react-renderer"
 import { EmbedReferences, RichTextContent } from "@graphcms/rich-text-types"
 import Image from "next/image"
+import { cn } from "@/utils/cn"
 import { CodeSnippetDynamic } from "../CodeSnippet/CodeSnippetDynamic"
 import { QuizDynamic } from "../Quiz/QuizDynamic"
-import { cn } from "@/utils/cn"
 
 export function RichText({
   raw,
@@ -46,7 +46,7 @@ export function RichText({
         ),
         embed: {
           Quiz: (props) => {
-            return <QuizDynamic initialQuiz={props} />
+            return <QuizDynamic id={props.id} />
           },
         },
       }}

diff --git a/src/components/Search/SearchDialog.tsx b/src/components/Search/SearchDialog.tsx
@@ -46,7 +46,7 @@ function SearchDialogContent() {
       </DialogTrigger>
       <Popover>
         <InstantSearch searchClient={algoliaClient} indexName={`articles-${lang}`}>
-          <DialogContent className="bottom-auto top-[10%] max-h-[80vh] translate-y-[0%] overflow-auto bg-gray-100 sm:max-w-2xl">
+          <DialogContent className="bottom-auto top-[10%] max-h-[80%] translate-y-[0%] overflow-auto bg-gray-100 sm:max-w-2xl">
             <DialogHeader className="border-b bg-white p-4">
               <RefinementCombobox attribute={"tags"} />
               <DebouncedSearchBox />

diff --git a/src/components/TrendingArticles/TrendingArticles.tsx b/src/components/TrendingArticles/TrendingArticles.tsx
@@ -28,7 +28,7 @@ export async function TrendingArticles({ locale, title }: TrendingArticlesProps)
           <div className={cn(isTwoRowLayout ? "md:grid-cols-3" : "md:grid-cols-2", "grid  grid-cols-1 gap-5")}>
             <div className="col-span-2 flex flex-col gap-5">
               {mainArticle && (
-                <div className="h-[388px]">
+                <div className="md:h-[388px]">
                   <ArticleCard
                     article={hygraphArticleToCardProps(mainArticle)}
                     tagsPosition="over"

diff --git a/src/components/ui/Skeleton/Skeleton.tsx b/src/components/ui/Skeleton/Skeleton.tsx
@@ -0,0 +1,7 @@
+import { cn } from "@/utils/cn"
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("bg-muted animate-pulse rounded-md", className)} {...props} />
+}
+
+export { Skeleton }
diff --git a/src/lib/queries/articles.ts b/src/lib/queries/articles.ts
@@ -104,20 +104,6 @@ export const getArticleBySlugQuery = graphql(`
         references {
           ... on Quiz {
             id
-            question(first: 1) {
-              id
-              answer {
-                id
-                content {
-                  raw
-                }
-                isValid
-              }
-              content {
-                raw
-              }
-            }
-            title
           }
         }
       }