From c367477cb968375ace10cdfb16a475ec0bb5e9ec Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Mon, 18 Dec 2023 13:21:45 -0800
Subject: [PATCH 1/6] build new Problems List UI for iteration

- use mock data to stress-test UI and buid general list layout
---
 .../components/troubleshootingProblems.tsx    | 215 ++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
new file mode 100644
index 00000000..d01221ce
--- /dev/null
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -0,0 +1,215 @@
+'use client';
+
+import * as React from 'react';
+import {
+   Box,
+   Flex,
+   Heading,
+   HStack,
+   Image,
+   SimpleGrid,
+   Stack,
+   Text,
+} from '@chakra-ui/react';
+import { faVolumeXmark } from '@fortawesome/pro-duotone-svg-icons';
+import { FaIcon, FaIconProps } from '@ifixit/icons';
+
+const mockProblems = [
+   {
+      imageSrcLg:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.large',
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTitle: 'GE Refrigerator Temperature Inconsistencies',
+      deviceTitle: 'GE Refrigerator',
+      description:
+         'Fluctuating temperatures in the refrigerator or freezer compartments, often due to a faulty thermostat or temperature sensor.',
+      altText: 'GE Refrigerator image',
+   },
+   {
+      imageSrcLg:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.large',
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTitle: 'GE Refrigerator Water Dispenser Malfunctions',
+      deviceTitle: 'GE Refrigerator',
+      description:
+         'Water dispenser not functioning or dripping water, resulting from a faulty water valve or blocked filter.',
+      altText: 'GE Refrigerator image',
+   },
+   {
+      imageSrcLg:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.large',
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTitle: 'GE Refrigerator Ice Maker Issues',
+      deviceTitle: 'GE Refrigerator',
+      description:
+         'The ice maker is not producing ice or is dispensing ice irregularly, due to clogged water lines or malfunctioning components.',
+      altText: 'GE Refrigerator image',
+   },
+   {
+      imageSrcLg: undefined,
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTypeIcon: faVolumeXmark,
+      problemTitle:
+         'GE Refrigerator Model Number GSS25WSTASS (2008) Temperature Inconsistencies Involving the Fresh Food Compartment',
+      deviceTitle:
+         'GE Refrigerator Model Number GSS25WSTASS (2008) Sub-Model Number GSS25W',
+      description:
+         'Fluctuating temperatures in the refrigerator or freezer compartments, often due to a faulty thermostat or temperature sensor. The following text is for testing purposes only. Lets see how well this long text wraps with a cap on 4 lines.',
+      altText: 'GE Refrigerator image',
+   },
+   {
+      imageSrcLg:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.large',
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTitle: 'GE Refrigerator Door Seal Problems',
+      deviceTitle: 'GE Refrigerator',
+      description:
+         'The refrigerator doors are not closing correctly or are allowing warm air inside, typically related to worn or damaged door seals.',
+      altText: 'GE Refrigerator image',
+   },
+   {
+      imageSrcLg:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.large',
+      imageSrcThumb:
+         'https://guide-images.cdn.ifixit.com/igi/GEQaIapMrXAqEjAS.thumbnail',
+      problemTitle: 'GE Refrigerator Not Cooling Properly',
+      deviceTitle: 'GE Refrigerator',
+      description:
+         'The refrigerator is not maintaining the correct temperature, which could be the result of a damaged condenser, evaporator, or compressor.',
+      altText: 'GE Refrigerator image',
+   },
+];
+
+export default function TroubleshootingProblems({
+   title,
+}: TroubleshootingProblemsProps) {
+   return (
+      <Box className="wrapper" maxWidth="1280px" mt="32px" mx="auto" px="32px">
+         <Stack as="main" spacing="12px">
+            <Box className="header">
+               <Heading color="gray.800" fontSize="30px" fontWeight="medium">
+                  Most Common {title} Troubleshooting Problems
+               </Heading>
+               <Text mt="8px">
+                  When your {title} runs into issues, it can be a source of
+                  frustration and inconvenience. Never fear &mdash; we&apos;ve
+                  compiled a comprehensive guide to diagnose and fix the most
+                  common problems that can plague your refrigerator.{' '}
+               </Text>
+            </Box>
+            <SimpleGrid
+               className="list"
+               columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
+               spacing="24px"
+               py="12px"
+            >
+               {mockProblems.map((problem: ProblemProps, index: number) => (
+                  <Problem
+                     key={index}
+                     imageSrcLg={problem.imageSrcLg}
+                     imageSrcThumb={problem.imageSrcThumb}
+                     problemTypeIcon={problem.problemTypeIcon}
+                     problemTitle={problem.problemTitle}
+                     deviceTitle={problem.deviceTitle}
+                     description={problem.description}
+                     altText={problem.altText}
+                  />
+               ))}
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}
+
+function Problem({
+   problemTitle,
+   deviceTitle,
+   description,
+   imageSrcLg,
+   imageSrcThumb,
+   problemTypeIcon,
+   altText,
+   badges,
+}: ProblemProps) {
+   return (
+      <Flex
+         flexDirection="column"
+         alignSelf="stretch"
+         bgColor="white"
+         border="1px solid"
+         borderColor="gray.300"
+         borderRadius="md"
+         overflow="hidden"
+      >
+         {imageSrcLg ? (
+            <Image src={imageSrcLg} alt={altText} {...lgImageStyles} />
+         ) : (
+            <Flex {...imagePlaceholderStyles}>
+               <FaIcon
+                  icon={problemTypeIcon}
+                  size="3x"
+                  color="brand.400"
+                  m="auto"
+               />
+            </Flex>
+         )}
+         <Stack className="content" spacing="12px" p="16px" flex="auto">
+            <Stack className="title" spacing="4px" flex="1">
+               <Text color="brand.500" fontWeight="semibold" noOfLines={4}>
+                  {problemTitle}
+               </Text>
+               <Text fontSize="sm" noOfLines={4}>
+                  {description}
+               </Text>
+            </Stack>
+            {badges && <HStack className="badges" spacing="6px"></HStack>}
+            <HStack className="device" spacing="6px" alignItems="center">
+               <Image src={imageSrcThumb} alt={altText} {...thumbImageStyles} />
+               <Box fontSize="sm" fontWeight="semibold" noOfLines={2}>
+                  {deviceTitle}
+               </Box>
+            </HStack>
+         </Stack>
+      </Flex>
+   );
+}
+
+export type TroubleshootingProblemsProps = {
+   title: string;
+};
+
+export type ProblemProps = {
+   problemTitle: string;
+   deviceTitle: string;
+   description: string;
+   altText: string;
+   imageSrcLg?: string;
+   imageSrcThumb?: string;
+   problemTypeIcon?: FaIconProps;
+   badges?: string[];
+};
+
+const lgImageStyles = {
+   borderBottom: '1px solid',
+   borderColor: 'gray.300',
+   aspectRatio: '4 / 3',
+};
+
+const imagePlaceholderStyles = {
+   ...lgImageStyles,
+   width: '100%',
+   bgColor: 'brand.100',
+};
+
+const thumbImageStyles = {
+   border: '1px solid',
+   borderColor: 'gray.300',
+   borderRadius: 'md',
+   width: '32px',
+   height: '32px',
+};

From 05a00aab4043ad4a1b567425bd3ca0c8c01c1baa Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Mon, 18 Dec 2023 13:22:35 -0800
Subject: [PATCH 2/6] delete old component

---
 .../components/troubleshootingList.tsx        | 65 -------------------
 1 file changed, 65 deletions(-)
 delete mode 100644 frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingList.tsx

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingList.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingList.tsx
deleted file mode 100644
index 763e742e..00000000
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingList.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { Flex, Heading } from '@chakra-ui/react';
-import { BreadCrumbs } from '@ifixit/breadcrumbs';
-
-type BreadcrumbEntry = {
-   title: string;
-   url: string;
-};
-
-export type TroubleshootingListProps = {
-   title: string;
-   id: number;
-   breadcrumbs: BreadcrumbEntry[];
-};
-
-export default function TroubleshootingList({
-   title,
-   id,
-   breadcrumbs,
-}: TroubleshootingListProps) {
-   return (
-      <>
-         <NavBar breadcrumbs={breadcrumbs} />
-         <Heading>
-            {title} - {id}
-         </Heading>
-      </>
-   );
-}
-
-function NavBar({ breadcrumbs }: { breadcrumbs: BreadcrumbEntry[] }) {
-   const bc = breadcrumbs.map((breadcrumb) => ({
-      label: breadcrumb.title,
-      url: breadcrumb.url,
-   }));
-   const padding = { base: '16px', sm: '32px' };
-   const breadcrumbMinHeight = '48px';
-   return (
-      <Flex
-         w="100%"
-         backgroundColor="white"
-         borderBottomColor="gray.200"
-         borderBottomWidth={{ base: '0', sm: '1px' }}
-         justify="center"
-         minHeight={breadcrumbMinHeight}
-      >
-         <Flex
-            maxW="1280px"
-            width="100%"
-            flexDirection={{ base: 'column-reverse', sm: 'row' }}
-            justify="stretch"
-         >
-            <BreadCrumbs
-               breadCrumbs={bc}
-               paddingInline={padding}
-               minHeight={breadcrumbMinHeight}
-               borderTop={{ base: '1px', sm: '0' }}
-               borderTopColor="gray.200"
-               bgColor={{ base: 'blueGray.50', sm: 'transparent' }}
-            />
-         </Flex>
-      </Flex>
-   );
-}

From f0691b55e45c88cc135a49ef34675cd18a164814 Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Mon, 18 Dec 2023 13:23:16 -0800
Subject: [PATCH 3/6] update page to new component

---
 .../Troubleshooting/[device]/page.tsx         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/page.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/page.tsx
index 29b9f398..9d048e4b 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/page.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/page.tsx
@@ -4,9 +4,9 @@ import { getiFixitOrigin } from '@helpers/path-helpers';
 import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
-import TroubleshootingList, {
-   TroubleshootingListProps,
-} from './components/troubleshootingList';
+import TroubleshootingProblems, {
+   TroubleshootingProblemsProps,
+} from './components/troubleshootingProblems';
 import {
    IFixitAPIClient,
    VarnishBypassHeader,
@@ -25,7 +25,7 @@ export default async function Page({ params, searchParams }: PageProps) {
    ensureFlag();
 
    const pageProps = await getPageProps({ params, searchParams });
-   return <TroubleshootingList {...pageProps} />;
+   return <TroubleshootingProblems {...pageProps} />;
 }
 
 function ensureFlag() {
@@ -37,15 +37,15 @@ function ensureFlag() {
 async function getPageProps({
    params,
    searchParams: _searchParams,
-}: PageProps): Promise<TroubleshootingListProps> {
+}: PageProps): Promise<TroubleshootingProblemsProps> {
    const { device } = params;
-   const data = await getTroubleshootingListData(device);
+   const data = await getTroubleshootingProblemsData(device);
    return data;
 }
 
-async function getTroubleshootingListData(
+async function getTroubleshootingProblemsData(
    device: string
-): Promise<TroubleshootingListProps> {
+): Promise<TroubleshootingProblemsProps> {
    const nextHeaders = headers();
    const ifixitOrigin = getiFixitOrigin(nextHeaders);
 
@@ -57,9 +57,9 @@ async function getTroubleshootingListData(
    const url = `Troubleshooting/Collection/${encodedDevice}`;
 
    try {
-      return await client.get<TroubleshootingListProps>(
+      return await client.get<TroubleshootingProblemsProps>(
          url,
-         'troubleshootingList'
+         'troubleshootingProblems'
       );
    } catch (e) {
       notFound();

From 13e4e54c2193f50d37881015d1e97cfc6e7eea21 Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Mon, 18 Dec 2023 13:57:11 -0800
Subject: [PATCH 4/6] fix type issue

---
 .../[device]/components/troubleshootingProblems.tsx            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
index d01221ce..a2eafb6c 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -11,6 +11,7 @@ import {
    Stack,
    Text,
 } from '@chakra-ui/react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faVolumeXmark } from '@fortawesome/pro-duotone-svg-icons';
 import { FaIcon, FaIconProps } from '@ifixit/icons';
 
@@ -151,7 +152,7 @@ function Problem({
          ) : (
             <Flex {...imagePlaceholderStyles}>
                <FaIcon
-                  icon={problemTypeIcon}
+                  icon={problemTypeIcon as IconProp}
                   size="3x"
                   color="brand.400"
                   m="auto"

From 8ce3be40d12d9c7d2e9d7eed5d814e34e6f2ca77 Mon Sep 17 00:00:00 2001
From: Ian Rohde <ian.rohde@gmail.com>
Date: Mon, 18 Dec 2023 15:05:19 -0800
Subject: [PATCH 5/6] update px values to chakra tokens

---
 .../components/troubleshootingProblems.tsx     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
index a2eafb6c..2f0e8130 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -90,13 +90,13 @@ export default function TroubleshootingProblems({
    title,
 }: TroubleshootingProblemsProps) {
    return (
-      <Box className="wrapper" maxWidth="1280px" mt="32px" mx="auto" px="32px">
-         <Stack as="main" spacing="12px">
+      <Box className="wrapper" maxWidth="1280px" mt={8} mx="auto" px={8}>
+         <Stack as="main" spacing={3}>
             <Box className="header">
                <Heading color="gray.800" fontSize="30px" fontWeight="medium">
                   Most Common {title} Troubleshooting Problems
                </Heading>
-               <Text mt="8px">
+               <Text mt={2}>
                   When your {title} runs into issues, it can be a source of
                   frustration and inconvenience. Never fear &mdash; we&apos;ve
                   compiled a comprehensive guide to diagnose and fix the most
@@ -106,8 +106,8 @@ export default function TroubleshootingProblems({
             <SimpleGrid
                className="list"
                columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
-               spacing="24px"
-               py="12px"
+               spacing={6}
+               py={3}
             >
                {mockProblems.map((problem: ProblemProps, index: number) => (
                   <Problem
@@ -159,8 +159,8 @@ function Problem({
                />
             </Flex>
          )}
-         <Stack className="content" spacing="12px" p="16px" flex="auto">
-            <Stack className="title" spacing="4px" flex="1">
+         <Stack className="content" spacing={3} p={4} flex="auto">
+            <Stack className="title" spacing={1} flex="1">
                <Text color="brand.500" fontWeight="semibold" noOfLines={4}>
                   {problemTitle}
                </Text>
@@ -168,8 +168,8 @@ function Problem({
                   {description}
                </Text>
             </Stack>
-            {badges && <HStack className="badges" spacing="6px"></HStack>}
-            <HStack className="device" spacing="6px" alignItems="center">
+            {badges && <HStack className="badges" spacing={1.5}></HStack>}
+            <HStack className="device" spacing={1.5} alignItems="center">
                <Image src={imageSrcThumb} alt={altText} {...thumbImageStyles} />
                <Box fontSize="sm" fontWeight="semibold" noOfLines={2}>
                   {deviceTitle}

From efb3720b3934b09b7935db8c6a98c39e2cad86e2 Mon Sep 17 00:00:00 2001
From: Ian Rohde <1634505+ianrohde@users.noreply.github.com>
Date: Mon, 18 Dec 2023 16:03:24 -0800
Subject: [PATCH 6/6] Update
 frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx

Co-authored-by: Jarred Stelfox <jarstelfox@mac.com>
---
 .../[device]/components/troubleshootingProblems.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
index 2f0e8130..1fe09d46 100644
--- a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
+++ b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -100,7 +100,7 @@ export default function TroubleshootingProblems({
                   When your {title} runs into issues, it can be a source of
                   frustration and inconvenience. Never fear &mdash; we&apos;ve
                   compiled a comprehensive guide to diagnose and fix the most
-                  common problems that can plague your refrigerator.{' '}
+                  common problems that can plague your refrigerator.
                </Text>
             </Box>
             <SimpleGrid