Merge branch 'main' into jay_fix_bugs

client/jest.config.js

@@ -1,21 +1,21 @@
 export default {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
   transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
+    "^.+\\.tsx?$": [
+      "ts-jest",
       {
         diagnostics: {
           ignoreCodes: [1343],
         },
         astTransformers: {
           before: [
             {
-              path: 'ts-jest-mock-import-meta',
+              path: "ts-jest-mock-import-meta",
               options: {
                 metaObjectReplacement: {
                   env: {
-                    VITE_BACKEND_URL: 'http://mocked.url',
+                    VITE_BACKEND_URL: "http://mocked.url",
                   },
                 },
               },
@@ -26,7 +26,8 @@ export default {
     ],
   },
   moduleNameMapper: {
-    '\\.(css|less|scss|sss|styl)$': 'identity-obj-proxy',
+    "\\.(css|less|scss|sss|styl)$": "identity-obj-proxy",
+    "\\.(jpg|jpeg|png|gif|svg)$": "jest-transform-stub",
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
 };

client/package.json

@@ -66,6 +66,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.4",

client/src/components/BoardComponent.tsx

@@ -56,6 +56,7 @@ const BoardComponent: React.FC = () => {
     calculateTotalTime
     // isLoading,
     // setIsLoading
+
   } = useBoard();
 
   const { isTemplate } = useTemplates();
@@ -96,51 +97,6 @@ const BoardComponent: React.FC = () => {
     return <Loading isLoading={isLoading} />;
   }
 
-  // useEffect(() => {
-  //   if (selectedBoard) {
-  //     console.log('exists here');
-  //     console.log('exists here', selectedBoard);
-
-  //     const total =
-  //       selectedBoard.cards?.reduce(
-  //         (sum, card) => sum + (card.details.timeEstimate || 0),
-  //         0
-  //       ) || 0;
-  //     const completedTimeCompletedColumn =
-  //       selectedBoard.cards
-  //         ?.filter((card) => card.column === Columns.completed)
-  //         .reduce((sum, card) => sum + (card.details.timeEstimate || 0), 0) ||
-  //       0;
-
-  //     const completedTimeInProgressColumn =
-  //       selectedBoard.cards
-  //         ?.filter((card) => card.column === Columns.inProgress)
-  //         .reduce((sum, card) => {
-  //           const checkListArray = card?.details?.checklist || [];
-
-  //           const numOfCompletedCheckList = checkListArray.reduce(
-  //             (counter, checkList) => {
-  //               return checkList.checked ? counter + 1 : counter;
-  //             },
-  //             0
-  //           );
-
-  //           const timeEstimate = card?.details?.timeEstimate || 0;
-  //           const totalTime =
-  //             numOfCompletedCheckList > 0
-  //               ? (timeEstimate / checkListArray.length) *
-  //                 numOfCompletedCheckList
-  //               : 0;
-
-  //           return sum + totalTime;
-  //         }, 0) || 0;
-
-  //     setEstimatedTimeTotal(total);
-  //     setCompletedTimeTotal(
-  //       completedTimeCompletedColumn + completedTimeInProgressColumn
-  //     );
-  //   }
-  // }, [selectedBoard!, handlePostNewCard]);
 
   const columns = [
     { title: "Backlog", key: Columns.backlog },

client/src/components/LandingFeatures.tsx

@@ -0,0 +1,59 @@
+import {
+  Box,
+  SimpleGrid,
+  Heading,
+  Text,
+  Icon,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { FaTasks, FaBrain, FaChalkboardTeacher } from "react-icons/fa";
+
+const LandingFeatures = () => {
+  const iconColor = useColorModeValue("blue.400", "blue.200");
+  return (
+    <Box display="flex" justifyContent={"center"}>
+      <SimpleGrid columns={[1, 1, 3]} spacing={10} mt={8} mb={4} width={"80%"}>
+        <Box textAlign="center">
+          <Icon as={FaTasks} w={12} h={12} mb={4} color={iconColor} />
+          <Heading size="md" mb={2}>
+            Stay Organized with Kanban
+          </Heading>
+          <Text>
+            Break down complex topics into manageable pieces & track your
+            progress.
+          </Text>
+        </Box>
+
+        <Box textAlign="center">
+          <Icon as={FaBrain} w={12} h={12} mb={4} color={iconColor} />
+          <Heading size="md" mb={2}>
+            Generate AI Study Tracks
+          </Heading>
+          <Text>
+            Create one-click dynamic study boards with resources tailored to
+            your learning style.
+          </Text>
+        </Box>
+
+        <Box textAlign="center">
+          <Icon
+            as={FaChalkboardTeacher}
+            w={12}
+            h={12}
+            mb={4}
+            color={iconColor}
+          />
+          <Heading size="md" mb={2}>
+            Join our Learning Community
+          </Heading>
+          <Text>
+            Share & discover study tracks created by other learners in the
+            community.
+          </Text>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+};
+
+export default LandingFeatures;

client/src/components/Navbar.tsx

@@ -90,6 +90,7 @@ const Navbar: React.FC = () => {
                 fontWeight="bold"
                 className="font-primary"
                 color={useColorModeValue("black", "white")}
+                display={{ base: "none", sm: "block" }}
               >
                 StudyFlow
               </Box>
@@ -114,10 +115,7 @@ const Navbar: React.FC = () => {
                     <IoHome />
                   </Button>
                 </Tooltip>
-                <Tooltip
-                  label="Magic Wand"
-                  aria-label="magic wand icon button"
-                >
+                <Tooltip label="Magic Wand" aria-label="magic wand icon button">
                   <Button
                     variant={"solid"}
                     bg="pink.500"

client/src/components/SearchGrid.tsx

@@ -72,7 +72,7 @@ const SearchGrid = () => {
     <Grid
       pb={8}
       templateColumns={{
-        base: "repeat(2, 1fr)",
+        base: "repeat(1, 1fr)",
         sm: "repeat(auto-fill, minmax(200px, 1fr))",
       }}
       gap={4}

client/src/components/TitleComponent.tsx

@@ -45,6 +45,7 @@ const TitleComponent = () => {
         setIsTemplate(false);
         setIsSearching(true);
       } else {
+
         setToggleCount(toggleCount + 1);
 
         // const cards = await getCards(selectedBoard.uuid, false);

client/src/pages/Generate.tsx

@@ -19,6 +19,7 @@ import {
   AccordionPanel,
   AccordionIcon,
   useColorMode,
+  Select,
 } from "@chakra-ui/react";
 import {
   CloseIcon,
@@ -71,6 +72,8 @@ const Generate: React.FC = () => {
 
   const [boardName, setBoardName] = useState<string>("");
 
+  const isMdOrLarger = useBreakpointValue({ base: false, md: true });
+
   const { handleAddAIBoard } = useBoard();
 
   const navigate = useNavigate();
@@ -686,16 +689,34 @@ const Generate: React.FC = () => {
             <Heading size={"sm"} as={"h4"} mb={4}>
               How in-depth do you want to go?
             </Heading>
-            <RadioGroup
-              onChange={handleUnderstandingLevelChange}
-              value={understandingLevel}
-            >
-              <Stack direction="row" spacing={4}>
-                <Radio value="brief" borderColor="gray.400">Brief Overview</Radio>
-                <Radio value="good" borderColor="gray.400">Good Understanding</Radio>
-                <Radio value="in-depth" borderColor="gray.400">In-Depth Analysis</Radio>
-              </Stack>
-            </RadioGroup>
+            {isMdOrLarger ? (
+              <RadioGroup
+                onChange={handleUnderstandingLevelChange}
+                value={understandingLevel}
+              >
+                <Stack direction="row" spacing={4}>
+                  <Radio value="brief" borderColor="gray.400">
+                    Brief Overview
+                  </Radio>
+                  <Radio value="good" borderColor="gray.400">
+                    Good Understanding
+                  </Radio>
+                  <Radio value="in-depth" borderColor="gray.400">
+                    In-Depth Analysis
+                  </Radio>
+                </Stack>
+              </RadioGroup>
+            ) : (
+              <Select
+                placeholder="Select Understanding Level"
+                onChange={(e) => handleUnderstandingLevelChange(e.target.value)}
+                value={understandingLevel}
+              >
+                <option value="brief">Brief Overview</option>
+                <option value="good">Good Understanding</option>
+                <option value="in-depth">In-Depth Analysis</option>
+              </Select>
+            )}
           </>
         )}
 

client/src/pages/Home.tsx

@@ -67,8 +67,6 @@ const Home: React.FC = () => {
   const [showWelcomeMessage, setShowWelcomeMessage] = useState(false);
 
   useEffect(() => {
-    console.log("COUNT TOGGLING", toggleCount);
-
     const fetchBoards = async () => {
       try {
         const boardsFromAPI = await getBoards(false); 
@@ -184,16 +182,16 @@ const Home: React.FC = () => {
         <title>StudyFlow - Your Personalized Learning Dashboard</title>
       </Helmet>
 
-      <Flex alignItems="center" mt={8} mb={4}>
-        {/* <Heading
+      {/*<Flex alignItems="center" mt={8} mb={4}>
+         <Heading
           mt={12}
           fontSize={"2xl"}
           fontWeight={600}
           textTransform={"uppercase"}
         >
           Welcome, {user?.given_name ?? user?.nickname}
-        </Heading>  ADD HEADING IN HERE */}
-      </Flex>
+        </Heading>  ADD HEADING IN HERE 
+  </Flex>*/}
 
       <Stack w="80%">
         <Flex justify="center" align="center" w="100%" pt={8}>
@@ -217,7 +215,7 @@ const Home: React.FC = () => {
         <Grid
           pb={8}
           templateColumns={{
-            base: "repeat(2, 1fr)",
+            base: "repeat(1, 1fr)",
             sm: "repeat(auto-fill, minmax(200px, 1fr))",
           }}
           gap={4}