fixed the logo problem

README.md

@@ -49,7 +49,7 @@
 
 <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="150%">
 
-![GSSoC Logo](/Refixly/client/public/gssoc%20logo.png)
+![GSSoC Logo](client/public/gssoc_logo.png)
 
 **🌟 Exciting News...**
 

client/eslint.config.js

@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig, globalIgnores } from 'eslint/config';
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -15,7 +15,12 @@ export default defineConfig([
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.commonjs,
+        vi: true,
+      },
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },
@@ -26,4 +31,14 @@ export default defineConfig([
       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
     },
   },
-])
+  {
+    files: ['**/test/*.js'], // Target test files specifically
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.commonjs,
+        vi: true,
+      },
+    },
+  },
+]);

client/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext js,jsx --fix",
+    "lint": "eslint \"**/*.{js,jsx}\" --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint \"**/*.{js,jsx}\" --fix",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",

client/src/Pages/Tutorial.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useCallback} from "react";
 import NavBar from "../components/NavBar";
 import { Loader, Bookmark, FileQuestion, XCircle, Filter } from "lucide-react";
 import toast from "react-hot-toast";
@@ -35,7 +35,7 @@ const Tutorial = () => {
       setRecentlyViewed(JSON.parse(storedRecentlyViewed));
     if (storedBookmarkedTutorials)
       setBookmarkedTutorials(JSON.parse(storedBookmarkedTutorials));
-  }, []);
+  }, [fetchTutorials]);
 
   useEffect(() => {
     localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
@@ -52,7 +52,7 @@ const Tutorial = () => {
     );
   }, [bookmarkedTutorials]);
 
-  const fetchTutorials = async (objectName, pageToken = "", append = false) => {
+  const fetchTutorials = useCallback(async (objectName, pageToken = "", append = false) => {
     if (!objectName.trim()) {
       setError("Please enter a search term or select a category.");
       setTutorials([]);
@@ -84,7 +84,9 @@ const Tutorial = () => {
     } finally {
       setLoading(false);
     }
-  };
+  },
+  [setError, setTutorials, setNextPageToken, setSearchHistory]
+);
 
   const handleSearch = (e) => {
     e.preventDefault();

client/src/Pages/TutorialsPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback} from 'react';
 import { useParams, Link } from 'react-router-dom';
 import { Loader, Search, Bookmark } from 'lucide-react';
 import NavBar from '../components/NavBar';
@@ -13,35 +13,59 @@ const TutorialsPage = () => {
   const [nextPageToken, setNextPageToken] = useState('');
   const [savedTutorials, setSavedTutorials] = useState([]); 
 
-  const fetchTutorials = async (loadMore = false) => {
-    setIsLoading(true);
-    setError(null);
-    if (!loadMore) {
-      setTutorials([]);
+  // const fetchTutorials = async (loadMore = false) => {
+  //   setIsLoading(true);
+  //   setError(null);
+  //   if (!loadMore) {
+  //     setTutorials([]);
+  //   }
+  //   try {
+  //     let apiUrl = `https://refixly.onrender.com/api/tutorials/${searchTerm}`;
+  //     if (loadMore && nextPageToken) {
+  //       apiUrl += `?pageToken=${nextPageToken}`;
+  //     }
+  //     const response = await fetch(apiUrl);
+  //     if (!response.ok) {
+  //       throw new Error('Failed to fetch tutorials.');
+  //     }
+  //     const data = await response.json();
+  //     setTutorials(prev => loadMore ? [...prev, ...data.tutorials] : data.tutorials);
+  //     setNextPageToken(data.nextPageToken || '');
+  //   } catch (err) {
+  //     setError(err.message);
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
+  const fetchTutorials = useCallback(async (loadMore = false) => {
+  setIsLoading(true);
+  setError(null);
+  if (!loadMore) {
+    setTutorials([]);
+  }
+  try {
+    let apiUrl = `https://refixly.onrender.com/api/tutorials/${searchTerm}`;
+    if (loadMore && nextPageToken) {
+      apiUrl += `?pageToken=${nextPageToken}`;
     }
-    try {
-      let apiUrl = `https://refixly.onrender.com/api/tutorials/${searchTerm}`;
-      if (loadMore && nextPageToken) {
-        apiUrl += `?pageToken=${nextPageToken}`;
-      }
-      const response = await fetch(apiUrl);
-      if (!response.ok) {
-        throw new Error('Failed to fetch tutorials.');
-      }
-      const data = await response.json();
-      setTutorials(prev => loadMore ? [...prev, ...data.tutorials] : data.tutorials);
-      setNextPageToken(data.nextPageToken || '');
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setIsLoading(false);
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      throw new Error('Failed to fetch tutorials.');
     }
-  };
+    const data = await response.json();
+    setTutorials(prev => loadMore ? [...prev, ...data.tutorials] : data.tutorials);
+    setNextPageToken(data.nextPageToken || '');
+  } catch (err) {
+    setError(err.message);
+  } finally {
+    setIsLoading(false);
+  }
+}, [searchTerm, nextPageToken]);
 
   useEffect(() => {
     setSearchTerm(objectName);
     fetchTutorials();
-  }, [objectName]);
+  }, [objectName,fetchTutorials]);
 
   const handleSearch = (e) => {
     e.preventDefault();

client/src/components/AIDamageDetection.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import {useState } from "react";
 import axios from "axios";
 import AIResponseSection from "./AIResponseSection";
 

client/src/components/FAQAccordion.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 
 const FAQAccordion = ({ faqs }) => {
   const [openIndex, setOpenIndex] = useState(null);

client/src/components/HomeFAQ.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import {AnimatePresence } from "framer-motion";
 
 const HomeFAQ = ({ faqs }) => {
   const [openIndex, setOpenIndex] = useState(null);

client/src/context/ThemeContext.jsx

@@ -1,30 +1,4 @@
-// src/context/ThemeContext.jsx
-import { createContext, useState, useEffect } from "react";
+// src/context/ThemeContext.js
+import { createContext } from "react";
 
-export const ThemeContext = createContext();
-
-export const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState("light");
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme) setTheme(savedTheme);
-  }, []);
-
-  useEffect(() => {
-    if (theme === "dark") {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  const toggleTheme = () => setTheme((prev) => (prev === "light" ? "dark" : "light"));
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
+export const ThemeContext = createContext();

client/src/context/ThemeProvider.jsx

@@ -0,0 +1,28 @@
+// src/context/ThemeProvider.jsx
+import { useState, useEffect } from "react";
+import { ThemeContext } from "./ThemeContext.jsx"; // Import the context from the new file
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme) setTheme(savedTheme);
+  }, []);
+
+  useEffect(() => {
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((prev) => (prev === "light" ? "dark" : "light"));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};