Skip to content

Commit

Permalink
Merge pull request #799 from NSUWAL123/fix-explore-projects
Browse files Browse the repository at this point in the history
Fix explore projects
  • Loading branch information
robsavoye authored Sep 4, 2023
2 parents f0b7a9c + 158f4b1 commit 7f7fc53
Show file tree
Hide file tree
Showing 10 changed files with 688 additions and 201 deletions.
542 changes: 440 additions & 102 deletions src/frontend/main/package-lock.json

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion src/frontend/main/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@mui/icons-material": "^5.11.0",
"@mui/lab": "^5.0.0-alpha.134",
"@mui/material": "^5.11.1",
"@radix-ui/react-switch": "^1.0.3",
"@reduxjs/toolkit": "^1.9.1",
"@sentry/react": "^7.59.3",
"@testing-library/jest-dom": "^5.17.0",
Expand All @@ -58,6 +59,8 @@
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"axios": "^1.2.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"env-cmd": "^10.1.0",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
Expand All @@ -73,7 +76,9 @@
"react-router-dom": "^6.6.0",
"react-spinners": "^0.13.8",
"redux": "^4.2.0",
"redux-persist": "^6.0.0"
"redux-persist": "^6.0.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7"
},
"jest": {
"testEnvironment": "jsdom",
Expand Down
32 changes: 32 additions & 0 deletions src/frontend/main/src/components/common/Switch.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { cn } from '../../utilfunctions/shadcn';

const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
`peer focus-visible:fmtm-ring-offset-background data-[state=checked]:fmtm-bg-primary-900 fmtm-inline-flex fmtm-h-[24px] fmtm-w-[44px] fmtm-shrink-0 fmtm-cursor-pointer
fmtm-items-center fmtm-rounded-full fmtm-border-2 fmtm-border-transparent
fmtm-transition-colors focus-visible:fmtm-outline-none focus-visible:fmtm-ring-2
focus-visible:fmtm-ring-offset-2 disabled:fmtm-cursor-not-allowed disabled:fmtm-opacity-50
data-[state=unchecked]:fmtm-bg-grey-400 `,
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
`fmtm-pointer-events-none fmtm-block fmtm-h-5 fmtm-w-5 fmtm-rounded-full fmtm-bg-white
fmtm-shadow-lg fmtm-ring-0 fmtm-transition-transform
data-[state=checked]:fmtm-translate-x-5 data-[state=unchecked]:fmtm-translate-x-0`,
)}
/>
</SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;

export default Switch;
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default function ExploreProjectCard({ data }) {
<CoreModules.CardMedia
component="img"
src={`${environment.baseApiUrl}/images/${data.organisation_logo}`}
sx={{ width: '50px', height: 50 }}
sx={{ width: 50, height: 50 }}
/>
) : (
<CustomizedImage status={'card'} style={{ width: 50, height: 50 }} />
Expand Down
50 changes: 32 additions & 18 deletions src/frontend/main/src/components/home/HomePageFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import React, { useState } from 'react';
import windowDimention from '../../hooks/WindowDimension';
import CoreModules from '../../shared/CoreModules';
import AssetModules from '../../shared/AssetModules';
import Switch from '../common/Switch';
import { HomeActions } from '../../store/slices/HomeSlice';

//Home Filter
const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount }) => {
const [searchQuery, setSearchQuery] = useState('');
const dispatch = CoreModules.useAppDispatch();

const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme);
const showMapStatus: boolean = CoreModules.useAppSelector((state) => state.home.showMapStatus);

const { windowSize } = windowDimention();
const searchableInnerStyle: any = {
toolbar: {
Expand Down Expand Up @@ -114,29 +119,38 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount })
</button>
</CoreModules.Link>
</div>
<div className="fmtm-mt-3 fmtm-flex fmtm-items-center fmtm-gap-1">
<div className=" fmtm-border-[#E7E2E2] fmtm-border-2 fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-p-2 fmtm-items-center">
<input
type="search"
className="fmtm-h-7 fmtm-p-2"
placeholder="Search Projects"
onChange={(e) => onSearch(e.target.value)}
></input>
<i className="material-icons">search</i>
<div className="fmtm-flex fmtm-justify-between">
<div className="fmtm-mt-3 fmtm-flex fmtm-items-center fmtm-gap-1">
<div className=" fmtm-border-[#E7E2E2] fmtm-border-2 fmtm-w-fit fmtm-flex fmtm-bg-white fmtm-p-2 fmtm-items-center">
<input
type="search"
className="fmtm-h-7 fmtm-p-2"
placeholder="Search Projects"
onChange={(e) => onSearch(e.target.value)}
></input>
<i className="material-icons">search</i>
</div>
<AssetModules.FilterAltIcon
sx={{
fontSize: 25,
color: '#9B9999',
cursor: 'pointer',
}}
/>
</div>
<div className="fmtm-flex fmtm-items-center fmtm-gap-2">
<p>Show Map</p>
<Switch
checked={showMapStatus}
onCheckedChange={() => dispatch(HomeActions.SetShowMapStatus(!showMapStatus))}
/>
</div>
<AssetModules.FilterAltIcon
sx={{
fontSize: 25,
color: '#9B9999',
cursor: 'pointer',
}}
/>
</div>
<div className="fmtm-mt-6 fmtm-mb-1 fmtm-flex fmtm-items-center fmtm-justify-between">
<p className="fmtm-text-[#A8A6A6]">
showing {filteredProjectCount} of {totalProjectCount} projects
</p>
<div className="fmtm-flex fmtm-gap-1">
{/* <div className="fmtm-flex fmtm-gap-1">
<AssetModules.WindowIcon
sx={{
fontSize: 25,
Expand All @@ -151,7 +165,7 @@ const HomePageFilters = ({ onSearch, filteredProjectCount, totalProjectCount })
cursor: 'pointer',
}}
/>
</div>
</div> */}
</div>
</div>
{/* <CoreModules.Stack
Expand Down
56 changes: 49 additions & 7 deletions src/frontend/main/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@tailwind components;
@tailwind utilities;


body {
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
Expand Down Expand Up @@ -60,32 +59,44 @@ button {

@font-face {
font-family: 'BarlowBold';
src: local('BarlowBold'), url('./assets/fonts/Barlow/Barlow-Bold.ttf') format('truetype');
src:
local('BarlowBold'),
url('./assets/fonts/Barlow/Barlow-Bold.ttf') format('truetype');
}

@font-face {
font-family: 'BarlowMedium';
src: local('BarlowMedium'), url('./assets/fonts/Barlow/Barlow-Medium.ttf') format('truetype');
src:
local('BarlowMedium'),
url('./assets/fonts/Barlow/Barlow-Medium.ttf') format('truetype');
}

@font-face {
font-family: 'ArchivoBold';
src: local('ArchivoBold'), url('./assets/fonts/Archivo/Archivo/Archivo-Bold.ttf') format('truetype');
src:
local('ArchivoBold'),
url('./assets/fonts/Archivo/Archivo/Archivo-Bold.ttf') format('truetype');
}

@font-face {
font-family: 'ArchivoRegular';
src: local('ArchivoRegular'), url('./assets/fonts/Archivo/Archivo/Archivo-Regular.ttf') format('truetype');
src:
local('ArchivoRegular'),
url('./assets/fonts/Archivo/Archivo/Archivo-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'ArchivoMedium';
src: local('ArchivoMedium'), url('./assets/fonts/Archivo/Archivo/Archivo-Medium.ttf') format('truetype');
src:
local('ArchivoMedium'),
url('./assets/fonts/Archivo/Archivo/Archivo-Medium.ttf') format('truetype');
}

@font-face {
font-family: 'ArchivoLight';
src: local('ArchivoLight'), url('./assets/fonts/Archivo/Archivo/Archivo-Light.ttf') format('truetype');
src:
local('ArchivoLight'),
url('./assets/fonts/Archivo/Archivo/Archivo-Light.ttf') format('truetype');
}

.swiper-button-next,
Expand Down Expand Up @@ -133,3 +144,34 @@ button {
border: 1px solid #d73f3e;
border-radius: 10px;
}

@layer utilities {
@variants responsive {
.no-scrollbar::-webkit-scrollbar {
display: none;
}

.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

.scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: transparent;
margin-block: 6px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #bdbdbd;
border-radius: 100vh;
padding-inline: 4px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #bdbdbd;
}
}
}
4 changes: 4 additions & 0 deletions src/frontend/main/src/shared/AssetModules.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ import {
Window as WindowIcon,
FormatListBulleted as ListViewIcon,
FilterAlt as FilterAltIcon,
ArrowLeft as ArrowLeftIcon,
ArrowRight as ArrowRightIcon,
} from '@mui/icons-material';
import LockPng from '../assets/images/lock.png';
import RedLockPng from '../assets/images/red-lock.png';
Expand Down Expand Up @@ -82,4 +84,6 @@ export default {
WindowIcon,
ListViewIcon,
FilterAltIcon,
ArrowLeftIcon,
ArrowRightIcon,
};
68 changes: 35 additions & 33 deletions src/frontend/main/src/store/slices/HomeSlice.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@

import CoreModules from "../../shared/CoreModules";
import CoreModules from '../../shared/CoreModules';
const HomeSlice = CoreModules.createSlice({
name: 'home',
initialState: {
homeProjectSummary: [],
homeProjectLoading: true,
selectedProject: {},
dialogStatus: false,
snackbar: {
open: false,
message: '',
variant: 'info',
duration: 0
},
name: 'home',
initialState: {
homeProjectSummary: [],
homeProjectLoading: true,
selectedProject: {},
dialogStatus: false,
snackbar: {
open: false,
message: '',
variant: 'info',
duration: 0,
},
reducers: {
SetHomeProjectSummary(state, action) {
state.homeProjectSummary = action.payload
},
HomeProjectLoading(state, action) {
state.homeProjectLoading = action.payload
},
SetSelectedProject(state, action) {
state.selectedProject = action.payload
},
SetDialogStatus(state, action) {
state.dialogStatus = action.payload
},
SetSnackBar(state, action) {
state.snackbar = action.payload
},
}
})

showMapStatus: false,
},
reducers: {
SetHomeProjectSummary(state, action) {
state.homeProjectSummary = action.payload;
},
HomeProjectLoading(state, action) {
state.homeProjectLoading = action.payload;
},
SetSelectedProject(state, action) {
state.selectedProject = action.payload;
},
SetDialogStatus(state, action) {
state.dialogStatus = action.payload;
},
SetSnackBar(state, action) {
state.snackbar = action.payload;
},
SetShowMapStatus(state, action) {
state.showMapStatus = action.payload;
},
},
});

export const HomeActions = HomeSlice.actions;
export default HomeSlice;
6 changes: 6 additions & 0 deletions src/frontend/main/src/utilfunctions/shadcn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Loading

0 comments on commit 7f7fc53

Please sign in to comment.