refactor: reorganize the code to make it cleaner

hotosm · Feb 23, 2024 · 7e5ea37 · 7e5ea37
1 parent 877fc68
commit 7e5ea37
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/frontend/src/views/Home.jsx b/src/frontend/src/views/Home.jsx
@@ -11,6 +11,12 @@ import AssetModules from '@/shared/AssetModules';
 import ProjectListMap from '@/components/home/ProjectListMap';
 
 const Home = () => {
+  const dispatch = CoreModules.useAppDispatch();
+  //dispatch function to perform redux state mutation
+
+  const { type } = windowDimention();
+  //get window dimension
+
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [paginationPage, setPaginationPage] = useState(1);
@@ -21,23 +27,16 @@ const Home = () => {
   // const state:any = CoreModules.useAppSelector(state=>state.project.projectData)
   // console.log('state main :',state)
 
-  const { type } = windowDimention();
-  //get window dimension
-
-  const dispatch = CoreModules.useAppDispatch();
-  //dispatch function to perform redux state mutation
-
   const stateHome = CoreModules.useAppSelector((state) => state.home);
   //we use use selector from redux to get all state of home from home slice
+
   const filteredProjectCards = stateHome.homeProjectSummary;
 
   let cardsPerRow = new Array(
     type == 'xl' ? 7 : type == 'lg' ? 5 : type == 'md' ? 4 : type == 'sm' ? 3 : type == 's' ? 2 : 1,
   ).fill(0);
   //calculating number of cards to to display per row in order to fit our window dimension respectively and then convert it into dummy array
 
-  const theme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
-
   const handleSearch = (query) => {
     setSearchQuery(query);
   };

diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx
@@ -23,10 +23,6 @@ const Organisation = () => {
   const token = CoreModules.useAppSelector((state) => state.login.loginToken);
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
 
-  const handleSearchChange = (event) => {
-    setSearchKeyword(event.target.value);
-  };
-
   const organisationData: GetOrganisationDataModel[] = CoreModules.useAppSelector(
     (state) => state.organisation.organisationData,
   );
@@ -38,6 +34,14 @@ const Organisation = () => {
   const myOrganisationDataLoading = CoreModules.useAppSelector((state) => state.organisation.myOrganisationDataLoading);
   // loading states for the organisations from selector
 
+  let cardsPerRow = new Array(
+    type == 'xl' ? 3 : type == 'lg' ? 3 : type == 'md' ? 3 : type == 'sm' ? 2 : type == 's' ? 2 : 1,
+  ).fill(0);
+  // calculate number of cards to display according to the screen size
+
+  const handleSearchChange = (event) => {
+    setSearchKeyword(event.target.value);
+  };
   const filteredBySearch = (data, searchKeyword) => {
     const filteredCardData: GetOrganisationDataModel[] = data?.filter((d) =>
       d.name.toLowerCase().includes(searchKeyword.toLowerCase()),
@@ -55,11 +59,6 @@ const Organisation = () => {
     }
   }, [verifiedTab]);
 
-  let cardsPerRow = new Array(
-    type == 'xl' ? 3 : type == 'lg' ? 3 : type == 'md' ? 3 : type == 'sm' ? 2 : type == 's' ? 2 : 1,
-  ).fill(0);
-  // calculate number of cards to display according to the screen size
-
   return (
     <CoreModules.Box
       sx={{