groovinads-ui 1.2.40 → 1.2.42

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.40",
+	"version": "1.2.42",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownFilter.jsx

@@ -21,7 +21,6 @@ const DropdownFilter = ({
 	onToggle,
 	overflow = false,
 	className = '',
-
 }) => {
 	const [query, setQuery] = useState('');
 
@@ -37,24 +36,24 @@ const DropdownFilter = ({
 					<p>It looks like this value does not exist.</p>
 				</div>
 			</div>
-		)
-	}
+		);
+	};
 
 	const handleCheckbox = (value, i) => {
-        if (value) setValuesSelected([...valuesSelected, values[i]]);
-        else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
-    };
+		if (value) setValuesSelected([...valuesSelected, values[i]]);
+		else setValuesSelected(valuesSelected.filter((item) => item !== values[i]));
+	};
 
 	const selectAll = () => {
 		setValuesSelected([...values]);
-	}
+	};
 
 	const clearSelection = () => {
 		setValuesSelected([]);
-	}
+	};
 
 	const handlePill = (index) =>
-        setValuesSelected(valuesSelected.filter((item, i) => i !== index));
+		setValuesSelected(valuesSelected.filter((item, i) => i !== index));
 
 	return (
 		<Dropdown
@@ -63,20 +62,13 @@ const DropdownFilter = ({
 			className={`dropdown-filter ${locked ? 'locked' : ''} ${className}`}
 			autoClose={false}
 		>
-			<Dropdown.Toggle
-				variant='toggle-filter'
-			>
+			<Dropdown.Toggle variant='toggle-filter'>
 				<div className='filter-heading'>
-
 					<div className='filter-title'>
 						<span>{title}</span>
 						{locked && (
-                            <Icon
-                                style={'solid'}
-                                iconName={'lock-keyhole'}
-                                scale={0.7}
-                            />
-                        )}
+							<Icon style={'solid'} iconName={'lock-keyhole'} scale={0.7} />
+						)}
 					</div>
 					<Icon
 						style={'solid'}
@@ -86,7 +78,11 @@ const DropdownFilter = ({
 					/>
 				</div>
 				<div className='filter-values'>
-					{ valuesSelected.length === values.length ? 'All selected' : valuesSelected.length ? valuesSelected.join('; ') : 'None'}
+					{valuesSelected.length === values.length
+						? 'All selected'
+						: valuesSelected.length
+							? valuesSelected.join('; ')
+							: 'None'}
 				</div>
 			</Dropdown.Toggle>
 			{!locked && (
@@ -100,9 +96,17 @@ const DropdownFilter = ({
 			)}
 
 			{menuType === 'simple' && (
-                <Dropdown.Menu
+				<Dropdown.Menu
 					className='dropdown-menu-simple'
-					popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
+					popperConfig={
+						overflow
+							? {
+									strategy: 'fixed',
+									onFirstUpdate: () =>
+										window.dispatchEvent(new CustomEvent('scroll')),
+								}
+							: undefined
+					}
 				>
 					<div className='dropdown-menu-wrapper'>
 						<Input
@@ -111,35 +115,50 @@ const DropdownFilter = ({
 							icon='magnifying-glass'
 							className='w-100'
 							value={query}
-							onChange={({target}) => setQuery(target.value)}
+							onChange={({ target }) => setQuery(target.value)}
 							customRef={show}
 						/>
-						{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
+						{values.filter((item) =>
+							item.toString().toLowerCase().includes(query.toLowerCase()),
+						).length > 0 ? (
 							<ul className='dropdown-filter-list'>
 								{/* List values */}
-								{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
-									return (
-										<Checkbox
-											setStatus={ (status) => {handleCheckbox(status, index)} }
-											status={valuesSelected.includes(value)}
-											key={'Dropdown.Simple.Checkbox' + index}
-										>
-											{value}
-										</Checkbox>
+								{values
+									.filter((item) =>
+										item.toString().toLowerCase().includes(query.toLowerCase()),
 									)
-								})}
+									.map((value, index) => {
+										return (
+											<Checkbox
+												setStatus={(status) => {
+													handleCheckbox(status, index);
+												}}
+												status={valuesSelected.includes(value)}
+												key={'Dropdown.Simple.Checkbox' + index}
+											>
+												{value}
+											</Checkbox>
+										);
+									})}
 							</ul>
 						) : (
 							<EmptySpace />
 						)}
 					</div>
-
-                </Dropdown.Menu>
-            )}
-            {menuType === 'selection' && (
-                 <Dropdown.Menu
-				 	className='dropdown-menu-selection'
-					popperConfig={overflow ? { strategy: 'fixed', onFirstUpdate: () => window.dispatchEvent(new CustomEvent('scroll')) } : undefined}
+				</Dropdown.Menu>
+			)}
+			{menuType === 'selection' && (
+				<Dropdown.Menu
+					className='dropdown-menu-selection'
+					popperConfig={
+						overflow
+							? {
+									strategy: 'fixed',
+									onFirstUpdate: () =>
+										window.dispatchEvent(new CustomEvent('scroll')),
+								}
+							: undefined
+					}
 				>
 					<div className='dropdown-menu-wrapper'>
 						<div className='dropdown-filter-list-wrapper'>
@@ -149,25 +168,36 @@ const DropdownFilter = ({
 								icon='magnifying-glass'
 								className='w-100'
 								value={query}
-								onChange={({target}) => setQuery(target.value)}
+								onChange={({ target }) => setQuery(target.value)}
 								customRef={show}
 							/>
 							<h4>All values ({values.length})</h4>
-							{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).length > 0 ? (
+							{values.filter((item) =>
+								item.toString().toLowerCase().includes(query.toLowerCase()),
+							).length > 0 ? (
 								<>
 									<ul className='dropdown-filter-list'>
 										{/* List values */}
-										{values.filter( (item) => item.toLowerCase().includes(query.toLowerCase() ) ).map((value, index) => {
-											return (
-												<Checkbox
-													setStatus={ (status) => {handleCheckbox(status, index)} }
-													status={valuesSelected.includes(value)}
-													key={'Dropdown.Selection.Checkbox' + index}
-												>
-													{value}
-												</Checkbox>
+										{values
+											.filter((item) =>
+												item
+													.toString()
+													.toLowerCase()
+													.includes(query.toLowerCase()),
 											)
-										})}
+											.map((value, index) => {
+												return (
+													<Checkbox
+														setStatus={(status) => {
+															handleCheckbox(status, index);
+														}}
+														status={valuesSelected.includes(value)}
+														key={'Dropdown.Selection.Checkbox' + index}
+													>
+														{value}
+													</Checkbox>
+												);
+											})}
 									</ul>
 								</>
 							) : (
@@ -201,19 +231,20 @@ const DropdownFilter = ({
 										<PillComponent
 											color='light'
 											closeButton={true}
-											onClick={ () => { handlePill(index) } }
+											onClick={() => {
+												handlePill(index);
+											}}
 											key={'Dropdown.PillComponent' + index}
 										>
 											{value}
 										</PillComponent>
-									)
+									);
 								})}
 							</div>
 						</div>
 					</div>
-
-                </Dropdown.Menu>
-            )}
+				</Dropdown.Menu>
+			)}
 		</Dropdown>
 	);
 };
@@ -232,4 +263,4 @@ DropdownFilter.propTypes = {
 	className: PropTypes.string,
 };
 
-export default DropdownFilter;
+export default DropdownFilter;

package/src/components/Navigation/Dropdowns/DeckDropdown.jsx

@@ -19,7 +19,6 @@ const DeckDropdown = () => {
 		try {
 			const resp = await ComponentsService.applications();
 			resp.forEach((element) => {
-				//element.app_icon = `fa-duotone fa-${element.application_icon}`; // Solo para Deck
 				element.app_icon_sm = element.application_icon;
 				element.app_name = element.application_name;
 			});
@@ -34,7 +33,6 @@ const DeckDropdown = () => {
 
 	const linkToApp = (path, title) => {
 		// if path begins with /, path is a subdomain, linkUrl must be window.location.origin + path + '/'
-		// else linkUrl must be path
 		let linkUrl;
 		const base_domain = useGetBaseDomain();
 		const nextState = { additionalInformation: 'Updated the URL' };
@@ -43,12 +41,10 @@ const DeckDropdown = () => {
 		if (path.startsWith('/')) {
 			if (base_domain === 'groovinads.com') {
 				linkUrl = window.location.origin + path + '/';
-				// we update the browser history window.history.pushState({ additionalInformation: 'URL updated' }, title, linkUrl);
 				window.history.pushState(nextState, title, linkUrl);
 			} else {
 				linkUrl = 'https://deck-dev.groovinads.com' + path + '/';
 			}
-			// Else return complete path
 		} else linkUrl = path;
 
 		return linkUrl;
@@ -68,8 +64,6 @@ const DeckDropdown = () => {
 			});
 		} catch (error) {
 			console.error('favApp error', error);
-			//setShowAPIerrorModal(true);
-			//setErrorModalDetail(`${error}`);
 		}
 	};
 
@@ -88,8 +82,6 @@ const DeckDropdown = () => {
 			}
 		} catch (error) {
 			console.error('unfavApp error', error);
-			//setShowAPIerrorModal(true);
-			//setErrorModalDetail(`${error}`);
 		}
 	};
 
@@ -144,7 +136,6 @@ const DeckDropdown = () => {
 									className='link-app'
 								>
 									<span className='icon-app'>
-										{/* <i className={element.app_icon_sm}></i> */}
 										<Icon
 											style={'solid'}
 											iconName={element.app_icon_sm}
@@ -189,7 +180,6 @@ const DeckDropdown = () => {
 									className='link-app'
 								>
 									<span className='icon-app'>
-										{/* <i className={element.app_icon_sm}></i> */}
 										<Icon
 											style={'solid'}
 											iconName={element.app_icon_sm}
@@ -213,43 +203,6 @@ const DeckDropdown = () => {
 					})}
 			</Dropdown.Menu>
 
-			{/* 			<Dropdown.Menu as={'ul'}>
-				<Dropdown.Item as={'li'}>
-					<h4 className='dropdown-header'>Favoritos</h4>
-				</Dropdown.Item>
-
-				<Dropdown.Item as={'li'}>
-					<div
-						onClick={() => {
-							console.log('link');
-						}}
-						className='link-app'
-					>
-						<span className='icon-app'>
-							<Icon
-								style={'solid'}
-								iconName={'book'}
-								scale={1}
-							/>
-						</span>
-
-						<span>La app va a acá</span>
-					</div>
-					<button
-						className='deck-fav'
-						onClick={(e) => {
-							e.stopPropagation();
-							console.log('fav');
-						}}
-					>
-						<Icon
-							style={'regular'}
-							iconName={'star'}
-							scale={1}
-						/>
-					</button>
-				</Dropdown.Item>
-			</Dropdown.Menu> */}
 		</Dropdown>
 	);
 };

package/src/components/Navigation/Dropdowns/UserDropdown.jsx

@@ -13,6 +13,14 @@ const UserDropdown = () => {
 
 	const [groovinProfile, setGroovinProfile] = useState({});
 
+	const handleLogout = async() => {
+		const resp = await ComponentsService.authLogout().then(() => {
+			window.location.href = '/';
+		}).catch((error) => {
+			console.error( error)
+		})
+	}
+
 	useEffect(() => {
 		ComponentsService.authStatus().then((resp) => {
 
@@ -46,9 +54,7 @@ const UserDropdown = () => {
 			</Dropdown.Toggle>
 			<Dropdown.Menu as={'ul'} align={'end'}>
 				<Dropdown.Item as={'li'}
-					onClick={() => {
-						window.location.href = '/logout';
-					}}
+					onClick={handleLogout}
 				>
 					<Icon
 						iconName={'right-from-bracket'}

package/src/services/components.services.js

@@ -3,6 +3,8 @@ import { POST, GET, DELETE } from './helpers';
 
 export const authStatus = async () => await GET({ url: urlPath.authStatus });
 
+export const authLogout = async () => await POST({ url: urlPath.authLogout });
+
 export const applications = async () => await GET({ url: urlPath.applications });
 
 export const favApplication = async (appToFav) => await POST({url: `${urlPath.favApps}/${appToFav}`, data: appToFav})

package/src/services/helpers.js

@@ -1,6 +1,8 @@
 import axios from 'axios';
 import urlPath from './url.path';
 
+axios.defaults.withCredentials = true;
+
 export const GET = async ({ url }) => {
 	return await axios
 		.get(url, urlPath.headers)

package/src/services/url.path.js

@@ -9,11 +9,13 @@ export const basePath =
 
 export default {
 	authStatus: basePath + 'v2/auth/status',
+	authLogout: basePath + 'v2/auth/logout',
 
 	/* APPS FOR DROPDOWN */
 	applications: basePath + 'v2/applications',
 	favApps: basePath + 'v2/applications/favorite',
 
+
 	headers: {
 		headers: {
 			'Content-Type': 'application/json',