Skip to content

Commit 843c2ca

Browse files
one-communityone-community
authored
Merge pull request #3926 from OneCommunityGlobal/shravya_bugfix/css-module_3871
Shravya_Bugfix-HeaderIssue-3486_converted css to module.css
2 parents ad9a43b + abec7c4 commit 843c2ca

13 files changed

Lines changed: 492 additions & 1094 deletions

File tree

‎src/components/BMDashboard/Issues/IssueHeader.jsx‎

Lines changed: 74 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,30 @@
11
import { Search, MoreHorizontal, ChevronDown } from 'lucide-react';
22
import styles from './IssueHeader.module.css';
33
import { connect, useDispatch, useSelector } from 'react-redux';
4-
import { getHeaderData, logoutUser } from '~/actions/authActions';
4+
import { getHeaderData } from '~/actions/authActions';
55
import { Link } from 'react-router-dom';
66
import { useState, useEffect, useRef } from 'react';
77
import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
8-
import {
9-
UncontrolledDropdown,
10-
DropdownToggle,
11-
DropdownMenu,
12-
DropdownItem,
13-
Modal,
14-
ModalHeader,
15-
ModalBody,
16-
ModalFooter,
17-
Button,
18-
} from 'reactstrap';
19-
import DarkModeButton from '~/components/Header/DarkModeButton';
20-
import { cantUpdateDevAdminDetails } from '~/utils/permissions';
21-
import { WELCOME, VIEW_PROFILE, UPDATE_PASSWORD, LOGOUT } from '~/languages/en/ui';
22-
import Logout from '~/components/Logout/Logout';
238

249
export function IssueHeader(props) {
2510
const dispatch = useDispatch();
2611
const darkMode = useSelector(state => state.theme.darkMode);
2712

28-
const { profilePic, firstName, user } = props.auth;
13+
const { profilePic, firstName } = props.auth;
2914
const projects = useSelector(state => state.bmProjects);
30-
const userProfile = useSelector(state => state.userProfile);
3115

3216
const [activeTab, setActiveTab] = useState('info');
3317
const [searchTerm, setSearchTerm] = useState('');
3418
const [isSearchFocused, setIsSearchFocused] = useState(false);
35-
const [logoutPopup, setLogoutPopup] = useState(false);
3619
const searchRef = useRef(null);
3720

38-
const userId = user?.userid || user?.id;
39-
4021
useEffect(() => {
4122
dispatch(fetchBMProjects());
4223
}, [dispatch]);
4324

44-
const filteredProjects = isSearchFocused
45-
? searchTerm
46-
? projects.filter(project => project.name.toLowerCase().includes(searchTerm.toLowerCase()))
47-
: projects
48-
: [];
25+
const filteredProjects = projects.filter(project =>
26+
project.name.toLowerCase().includes(searchTerm.toLowerCase()),
27+
);
4928

5029
useEffect(() => {
5130
function handleClickOutside(event) {
@@ -59,170 +38,89 @@ export function IssueHeader(props) {
5938
}, []);
6039

6140
return (
62-
<div className={darkMode ? styles.issueHeaderContainerDark : styles.issueHeaderContainer}>
63-
<div className={darkMode ? styles.topRowDark : styles.topRow}>
64-
<div className={darkMode ? styles.titleSectionDark : styles.titleSection}>
65-
<h1 className={darkMode ? styles.sectionDark : styles.section}>Issues</h1>
66-
</div>
41+
<div className={`${darkMode ? styles.darkMode : ''}`}>
42+
<div className={`${styles.issueHeaderContainer}`}>
43+
<div className={`${styles.topRow}`}>
44+
<div className={`${styles.titleSection}`}>
45+
<h1 className={`${styles.section}`}>Issues</h1>
46+
</div>
6747

68-
<div className={styles.actionSection}>
69-
<UncontrolledDropdown>
70-
<DropdownToggle
71-
tag="button"
72-
className={darkMode ? styles.moreButtonDark : styles.moreButton}
73-
type="button"
74-
>
75-
<MoreHorizontal size={20} color={darkMode ? '#ffffff' : '#000000'} />
76-
</DropdownToggle>
77-
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
78-
<DropdownItem header className={darkMode ? 'text-light' : ''}>
79-
More Options
80-
</DropdownItem>
81-
<DropdownItem divider />
82-
<DropdownItem
83-
tag={Link}
84-
to="/bmdashboard/issues"
85-
className={darkMode ? 'text-light' : ''}
86-
>
87-
View All Issues
88-
</DropdownItem>
89-
<DropdownItem
90-
tag={Link}
91-
to="/bmdashboard/projects"
92-
className={darkMode ? 'text-light' : ''}
93-
>
94-
Projects
95-
</DropdownItem>
96-
</DropdownMenu>
97-
</UncontrolledDropdown>
98-
<Link to="/bmdashboard" style={{ textDecoration: 'none' }}>
99-
<button className={darkMode ? styles.backButtonDark : styles.backButton} type="button">
100-
Back to Projects
48+
<div className={`${styles.actionSection}`}>
49+
<button className={`${styles.moreButton}`} type="button" label="More Button">
50+
<MoreHorizontal size={20} />
10151
</button>
102-
</Link>
103-
<UncontrolledDropdown>
104-
<DropdownToggle
105-
tag="div"
106-
className={styles.avatar}
107-
style={{ cursor: 'pointer' }}
108-
caret={false}
109-
>
52+
<Link to="/bmdashboard/projects" style={{ textDecoration: 'none' }}>
53+
<button className={`${styles.backButton}`} type="button">
54+
Back to Projects
55+
</button>
56+
</Link>
57+
<div className={`${styles.avatar}`}>
11058
{profilePic ? (
11159
<img src={profilePic} alt={`${firstName}'s avatar`} />
11260
) : (
11361
<img src="/pfp-default-header.png" alt="Default avatar" />
11462
)}
115-
</DropdownToggle>
116-
<DropdownMenu className={darkMode ? 'bg-yinmn-blue' : ''}>
117-
<DropdownItem header className={darkMode ? 'text-light' : ''}>
118-
Hello {firstName}
119-
</DropdownItem>
120-
<DropdownItem divider />
121-
<DropdownItem
122-
tag={Link}
123-
to={`/userprofile/${userId}`}
124-
className={darkMode ? 'text-light' : ''}
125-
>
126-
{VIEW_PROFILE}
127-
</DropdownItem>
128-
{!cantUpdateDevAdminDetails(userProfile?.email, userProfile?.email) && (
129-
<DropdownItem
130-
tag={Link}
131-
to={`/updatepassword/${userId}`}
132-
className={darkMode ? 'text-light' : ''}
133-
>
134-
{UPDATE_PASSWORD}
135-
</DropdownItem>
136-
)}
137-
<DropdownItem className={darkMode ? 'text-light' : ''}>
138-
<DarkModeButton />
139-
</DropdownItem>
140-
<DropdownItem divider />
141-
<DropdownItem
142-
onClick={() => setLogoutPopup(true)}
143-
className={darkMode ? 'text-light' : ''}
144-
>
145-
{LOGOUT}
146-
</DropdownItem>
147-
</DropdownMenu>
148-
</UncontrolledDropdown>
149-
</div>
150-
</div>
151-
152-
<div className={darkMode ? styles.bottomRowDark : styles.bottomRow}>
153-
<div className={darkMode ? styles.projectTabDark : styles.projectTab}>
154-
<button
155-
type="button"
156-
className={`${styles.tabItem} ${activeTab === 'info' ? 'active' : ''} ${
157-
darkMode ? styles.tabItemDark : ''
158-
}`}
159-
onClick={() => setActiveTab('info')}
160-
>
161-
Project Info
162-
</button>
163-
<button
164-
type="button"
165-
className={`${styles.tabItem} ${activeTab === 'dates' ? 'active' : ''} ${
166-
darkMode ? styles.tabItemDark : ''
167-
}`}
168-
onClick={() => setActiveTab('dates')}
169-
>
170-
Project Dates
171-
</button>
63+
<ChevronDown size={20} color="#828282" />
64+
</div>
65+
</div>
17266
</div>
17367

174-
<div className={styles.searchContainer} ref={searchRef}>
175-
<div className={darkMode ? styles.searchIconDark : styles.searchIcon}>
176-
<Search size={20} color={darkMode ? '#ffffff' : '#828282'} />
68+
<div className={`${styles.topRow}`}>
69+
<div className={`${styles.projectTab}`}>
70+
<button
71+
type="button"
72+
className={`${styles.tabItem} ${activeTab === 'info' ? styles.active : ''}`}
73+
onClick={() => setActiveTab('info')}
74+
>
75+
Project 1
76+
</button>
77+
<button
78+
type="button"
79+
className={`${styles.tabItem} ${activeTab === 'dates' ? styles.active : ''}`}
80+
onClick={() => setActiveTab('dates')}
81+
>
82+
Dates of Project 1
83+
</button>
17784
</div>
178-
<input
179-
type="text"
180-
placeholder="Search projects..."
181-
className={darkMode ? styles.searchInputDark : styles.searchInput}
182-
value={searchTerm}
183-
onChange={e => setSearchTerm(e.target.value)}
184-
onFocus={() => setIsSearchFocused(true)}
185-
/>
18685

187-
{isSearchFocused && (
188-
<div className={darkMode ? styles.searchResultsDark : styles.searchResults}>
189-
{filteredProjects.length > 0 ? (
190-
<div className={styles.searchResultsList}>
191-
{filteredProjects.map(project => (
192-
<Link
193-
to={`/bmdashboard/projects/${project._id}`}
194-
key={project._id || project.id}
195-
style={{ textDecoration: 'none' }}
196-
onClick={() => {
197-
setIsSearchFocused(false);
198-
setSearchTerm('');
199-
}}
200-
>
201-
<div
202-
className={darkMode ? styles.searchResultItemDark : styles.searchResultItem}
203-
>
204-
<span className={darkMode ? styles.resultNameDark : styles.resultName}>
205-
{project.name}
206-
</span>
207-
<span
208-
className={darkMode ? styles.resultCategoryDark : styles.resultCategory}
209-
>
210-
{project.category || 'No category'}
211-
</span>
212-
</div>
213-
</Link>
214-
))}
215-
</div>
216-
) : (
217-
<div className={darkMode ? styles.searchNoResultsDark : styles.searchNoResults}>
218-
{searchTerm ? 'No matching projects found' : 'Start typing to search projects'}
219-
</div>
220-
)}
86+
<div className={`${styles.searchContainer}`} ref={searchRef}>
87+
<div className={`${styles.searchIcon}`}>
88+
<Search size={20} />
22189
</div>
222-
)}
90+
<input
91+
type="text"
92+
placeholder="Search..."
93+
className={`${styles.searchInput}`}
94+
value={searchTerm}
95+
onChange={e => setSearchTerm(e.target.value)}
96+
onFocus={() => setIsSearchFocused(true)}
97+
/>
98+
99+
{searchTerm && isSearchFocused && (
100+
<div className={`${styles.searchResults}`}>
101+
{filteredProjects.length > 0 ? (
102+
<div className={`${styles.searchResultsList}`}>
103+
{filteredProjects.map(project => (
104+
<Link
105+
to={`/bmdashboard/projects/${project._id}`}
106+
key={project.id}
107+
style={{ textDecoration: 'none' }}
108+
>
109+
<div className={`${styles.searchResultItem}`}>
110+
<span className={`${styles.resultName}`}>{project.name}</span>
111+
<span className={`${styles.resultCategory}`}>{project.category}</span>
112+
</div>
113+
</Link>
114+
))}
115+
</div>
116+
) : (
117+
<div className={`${styles.searchNoResults}`}>No matching projects found</div>
118+
)}
119+
</div>
120+
)}
121+
</div>
223122
</div>
224123
</div>
225-
<Logout setLogoutPopup={setLogoutPopup} open={logoutPopup} />
226124
</div>
227125
);
228126
}

0 commit comments

Comments
 (0)