feat: 🔥 added redux

added redux
Exlint · Jun 13, 2022 · 7ba5fc5 · 7ba5fc5
1 parent 39687a8
commit 7ba5fc5
Show file tree

Hide file tree

Showing 75 changed files with 1,951 additions and 7,005 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -19,7 +19,7 @@ module.exports = {
 	plugins: ['@typescript-eslint', 'unused-imports', 'import'],
 	rules: {
 		'max-lines': ['error', { max: 100, skipBlankLines: true, skipComments: true }],
-		'indent': ['error', 'tab'],
+		'indent': ['error', 'tab', { SwitchCase: 1 }],
 		'quotes': ['error', 'single', { avoidEscape: true }],
 		'semi': ['error', 'always'],
 		'no-empty': [

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -25,12 +25,12 @@
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
 		"react-i18next": "11.16.9",
-		"react-lineto": "3.3.0",
 		"react-redux": "8.0.2",
 		"react-router-dom": "5",
 		"react-scripts": "5.0.1",
 		"redux": "4.2.0",
-		"typescript": "4.6.4"
+		"typescript": "4.6.4",
+		"uniqid": "5.4.0"
 	},
 	"devDependencies": {
 		"@babel/core": "7.18.2",
@@ -39,6 +39,7 @@
 		"@craco/craco": "6.4.3",
 		"@types/node": "17.0.35",
 		"@types/react-router-dom": "^5.3.3",
+		"@types/uniqid": "5.3.2",
 		"@typescript-eslint/eslint-plugin": "5.25.0",
 		"@typescript-eslint/parser": "5.25.0",
 		"depcheck": "1.4.3",

diff --git a/apps/frontend/src/assets/icons.ts b/apps/frontend/src/assets/icons.ts
@@ -319,6 +319,12 @@ const icons = {
 		</defs>
 		`,
 	],
+	userDefultProfilePicture: [
+		'19 20',
+		`
+		<path d="M9.5 19.5C10.8015 19.5 12.0224 19.2518 13.1628 18.7555C14.3096 18.2591 15.3211 17.5726 16.1974 16.6959C17.0736 15.8257 17.7597 14.8169 18.2558 13.6695C18.7519 12.5221 19 11.2973 19 9.99516C19 8.69304 18.7487 7.4715 18.2462 6.33053C17.7501 5.18312 17.0639 4.17108 16.1877 3.2944C15.3179 2.41773 14.3096 1.73444 13.1628 1.24453C12.0159 0.748176 10.7918 0.5 9.49034 0.5C8.19532 0.5 6.9744 0.748176 5.82757 1.24453C4.68074 1.73444 3.66921 2.41773 2.79298 3.2944C1.92319 4.17108 1.24025 5.18312 0.744151 6.33053C0.24805 7.4715 0 8.69304 0 9.99516C0 11.2973 0.24805 12.5221 0.744151 13.6695C1.24025 14.8169 1.92319 15.8257 2.79298 16.6959C3.66921 17.5726 4.68074 18.2591 5.82757 18.7555C6.9744 19.2518 8.19854 19.5 9.5 19.5ZM9.5 17.8852C8.8235 17.8852 8.14378 17.7918 7.46083 17.6048C6.77789 17.4243 6.12716 17.1601 5.50865 16.812C4.89657 16.4639 4.36182 16.0416 3.90437 15.5453C4.25873 15.0232 4.71617 14.5751 5.2767 14.2013C5.84368 13.8274 6.48152 13.5438 7.19023 13.3504C7.90539 13.157 8.67531 13.0603 9.5 13.0603C10.3118 13.0603 11.0753 13.157 11.7904 13.3504C12.5056 13.5373 13.1434 13.8177 13.704 14.1916C14.2645 14.5655 14.7284 15.0167 15.0956 15.5453C14.6317 16.0416 14.0938 16.4639 13.4817 16.812C12.8696 17.1601 12.2221 17.4243 11.5392 17.6048C10.8562 17.7918 10.1765 17.8852 9.5 17.8852ZM9.5 11.4746C8.90081 11.4681 8.35961 11.3102 7.8764 11.0008C7.39318 10.6913 7.00983 10.2756 6.72635 9.75344C6.44286 9.22485 6.30112 8.62858 6.30112 7.96463C6.30112 7.33935 6.44286 6.76565 6.72635 6.24351C7.00983 5.72137 7.39318 5.3056 7.8764 4.99618C8.35961 4.68032 8.90081 4.52239 9.5 4.52239C10.0927 4.52239 10.6307 4.68032 11.1139 4.99618C11.5972 5.3056 11.9805 5.72137 12.264 6.24351C12.5539 6.76565 12.6989 7.33935 12.6989 7.96463C12.6989 8.62858 12.5571 9.22485 12.2737 9.75344C11.9902 10.282 11.6068 10.7042 11.1236 11.0201C10.6404 11.3295 10.0992 11.481 9.5 11.4746Z" fill="#8B8B8B"/>
+		`,
+	],
 };
 
 export default icons;
diff --git a/apps/frontend/src/components/containers/GroupCenter/GroupCenter.tsx b/apps/frontend/src/components/containers/GroupCenter/GroupCenter.tsx
@@ -13,8 +13,6 @@ const GroupCenter: React.FC<IProps> = () => {
 
 	const [policyLabelInputState, setPolicyLabelInputState] = useState<string | null>(null);
 
-	const [groupsList, setGroupsList] = useState<IGroup[]>([]);
-
 	const onPolicyLabelInputChanged = (input: string) => setPolicyLabelInputState(() => input);
 
 	const onSelectedLibrary = (library: ILibrary) => {
@@ -30,21 +28,15 @@ const GroupCenter: React.FC<IProps> = () => {
 		setSelectLibraryState(() => null);
 	};
 
-	const onCreateNewGroup = () => {
-		setGroupsList([...groupsList, { title: 'Group Label', id: Math.random(), policies: [1, 2, 3, 4] }]);
-	};
-
 	return (
 		<GroupCenterView
 			selectedGroup={selectedGroupState}
 			selectedLibrary={selectedLibraryState}
 			policyLabelInput={policyLabelInputState}
-			groupsList={groupsList}
 			onPolicyLabelInputChanged={onPolicyLabelInputChanged}
 			onSelectedLibrary={onSelectedLibrary}
 			onCancelSelectedLibrary={onCancelSelectedLibrary}
 			onSelectedGroup={onSelectedGroup}
-			onCreateNewGroup={onCreateNewGroup}
 		/>
 	);
 };

diff --git a/apps/frontend/src/components/containers/GroupCenter/GroupCenter.view.tsx b/apps/frontend/src/components/containers/GroupCenter/GroupCenter.view.tsx
@@ -15,12 +15,10 @@ interface IProps {
 	readonly selectedGroup: IGroup | null;
 	readonly selectedLibrary: ILibrary | null;
 	readonly policyLabelInput: string | null;
-	readonly groupsList: IGroup[] | [];
 	readonly onPolicyLabelInputChanged: (input: string) => void;
 	readonly onSelectedLibrary: (library: ILibrary) => void;
 	readonly onCancelSelectedLibrary: () => void;
 	readonly onSelectedGroup: (group: IGroup) => void;
-	readonly onCreateNewGroup: () => void;
 }
 
 const GroupCenterView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
@@ -44,8 +42,6 @@ const GroupCenterView: React.FC<IProps> = (props: React.PropsWithChildren<IProps
 				<div className={classes['innerGroupDetalis']}>
 					<GroupsSidebar
 						selectedGroup={props.selectedGroup}
-						groupsList={props.groupsList}
-						onCreateNewGroup={props.onCreateNewGroup}
 						onSelectedGroup={props.onSelectedGroup}
 					/>
 					<GroupDetails

diff --git a/.../frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/GroupInfo.view.tsx b/.../frontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/GroupInfo.view.tsx
@@ -6,7 +6,6 @@ import VSvg from '@/ui/VSvg';
 // import { Trans, useTranslation } from 'react-i18next';
 import { IGroup } from '@/interfaces/group';
 import { ILibrary } from '@/interfaces/library';
-import { monthsName } from '@/data/monthsName';
 
 import Policies from './Policies';
 import NewPolicy from './Policies/NewPolicy';
@@ -26,12 +25,6 @@ interface IProps {
 }
 
 const GroupInfoView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
-	const currentDate = {
-		day: new Date().getDate(),
-		month: monthsName[new Date().getMonth()],
-		year: new Date().getFullYear(),
-	};
-
 	const route = useLocation();
 
 	let currentPage;
@@ -49,20 +42,13 @@ const GroupInfoView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>)
 			{currentPage === 'group' && (
 				<>
 					<div className={classes['innerGroupInfo']}>
-						<h3 className={classes['innerGroupInfo__name']}>{props.selectedGroup?.title}</h3>
+						<h3 className={classes['innerGroupInfo__name']}>{props.selectedGroup?.label}</h3>
 						<div className={classes['createdTime']}>
 							<span className={classes['createdTime__text']}>Created in:</span>
 							<div className={classes['createdTimeDate']}>
 								<span className={classes['createdTime__text']}>
-									&nbsp;
-									{currentDate.day}
-								</span>
-								<span className={classes['createdTime__text']}>
-									&nbsp;
-									{currentDate.month}
-									&nbsp;
+									{props.selectedGroup?.createdAt}
 								</span>
-								<span className={classes['createdTime__text']}>{currentDate.year}</span>
 							</div>
 						</div>
 						<div className={classes['uniqueIdContainer']}>
@@ -85,6 +71,7 @@ const GroupInfoView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>)
 			<Route path="/groupCenter/group/newPolicy">
 				{currentPage !== 'policyConfiguration' && (
 					<NewPolicy
+						selectedGroup={props.selectedGroup}
 						selectedLibrary={props.selectedLibrary}
 						policyLabelInput={props.policyLabelInput}
 						onPolicyLabelInputChanged={props.onPolicyLabelInputChanged}

diff --git a/...roupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/LibrariesList.view.tsx b/...roupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/LibrariesList.view.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import uniqid from 'uniqid';
 // import { Trans, useTranslation } from 'react-i18next';
 import { ILibrary } from '@/interfaces/library';
 import { librariesList } from '@/data/librariesList';
+
 import Library from './Library';
 
 import classes from './LibrariesList.module.scss';
@@ -20,6 +22,7 @@ const LibrariesListView: React.FC<IProps> = (props: React.PropsWithChildren<IPro
 		<div className={classes['librariesList']}>
 			{libraries.map((library, index) => (
 				<Library
+					id={uniqid()}
 					key={index}
 					logo={librariesList[library].logo}
 					title={librariesList[library].title}

diff --git a/...s/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/Library/Library.tsx b/...s/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/Library/Library.tsx
@@ -13,6 +13,7 @@ interface IProps extends ILibrary {
 const Library: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 	return (
 		<LibraryView
+			id={props.id}
 			logo={props.logo}
 			title={props.title}
 			madeBy={props.madeBy}

diff --git a/...upCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/Library/Library.view.tsx b/...upCenter/GroupDetails/GroupInfo/Policies/NewPolicy/LibrariesList/Library/Library.view.tsx
@@ -38,6 +38,7 @@ const LibraryView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) =
 				type="button"
 				onClick={() =>
 					props.onSelectedLibrary({
+						id: props.id,
 						logo: props.logo,
 						title: props.title,
 						madeBy: props.madeBy,

diff --git a/...components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/NewPolicy.tsx b/...components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/NewPolicy.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 
+import { IGroup } from '@/interfaces/group';
 import { ILibrary } from '@/interfaces/library';
 
 import NewPolicyView from './NewPolicy.view';
 
 interface IProps {
+	readonly selectedGroup: IGroup | null;
 	readonly selectedLibrary: ILibrary | null;
 	readonly policyLabelInput: string | null;
 	readonly onPolicyLabelInputChanged: (input: string) => void;
@@ -36,6 +38,7 @@ const NewPolicy: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) =>
 
 	return (
 		<NewPolicyView
+			selectedGroup={props.selectedGroup}
 			isSortByClicked={isSortByClicketState}
 			selectedLibrary={props.selectedLibrary}
 			policyLabelInput={props.policyLabelInput}

diff --git a/...nents/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/NewPolicy.view.tsx b/...nents/containers/GroupCenter/GroupDetails/GroupInfo/Policies/NewPolicy/NewPolicy.view.tsx
@@ -5,7 +5,9 @@ import { ILibrary } from '@/interfaces/library';
 import VSvg from '@/ui/VSvg';
 import SelectFromOptions from '@/ui/SelectFromOptions';
 
+import { IGroup } from '@/interfaces/group';
 import { sortByOptions } from '@/data/newPolicySortByOptions';
+
 import SideBarFilters from './SideBarFilters';
 import LibrariesList from './LibrariesList';
 import PolicyConfigurationButton from './PolicyConfigurationButton';
@@ -15,6 +17,7 @@ import PolicyConfigurationButton from './PolicyConfigurationButton';
 import classes from './NewPolicy.module.scss';
 
 interface IProps {
+	readonly selectedGroup: IGroup | null;
 	readonly isSortByClicked: boolean;
 	readonly policyLabelInput: string | null;
 	readonly selectedLibrary: ILibrary | null;
@@ -36,22 +39,22 @@ const NewPolicyView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>)
 			<div className={classes['innerNewPolicy']}>
 				<h3 className={classes['innerNewPolicy__title']}>New Policy</h3>
 				<div className={classes['policyConfigurationButtonContainer']}>
-					{props.selectedLibrary && props.policyLabelInput ? (
+					{props.selectedLibrary && props.policyLabelInput?.length !== 0 ? (
 						<Link
 							to="/groupCenter/group/Policy/Configurations-Onboarding"
 							className={classes['policyConfigurationButtonContainer__link']}
 						>
 							<PolicyConfigurationButton
-								selectedLibrary={props.selectedLibrary}
+								isButtonDisabled={false}
+								selectedGroup={props.selectedGroup}
 								policyLabelInput={props.policyLabelInput}
-								onPolicyConfiguratoinClicked={props.onPolicyConfiguratoinClicked}
 							/>
 						</Link>
 					) : (
 						<PolicyConfigurationButton
-							selectedLibrary={props.selectedLibrary}
+							isButtonDisabled
+							selectedGroup={props.selectedGroup}
 							policyLabelInput={props.policyLabelInput}
-							onPolicyConfiguratoinClicked={props.onPolicyConfiguratoinClicked}
 						/>
 					)}
 				</div>

diff --git a/...ails/GroupInfo/Policies/NewPolicy/PolicyConfigurationButton/PolicyConfigurationButton.tsx b/...ails/GroupInfo/Policies/NewPolicy/PolicyConfigurationButton/PolicyConfigurationButton.tsx
@@ -1,26 +1,54 @@
 import React from 'react';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import uniqid from 'uniqid';
 
-import { ILibrary } from '@/interfaces/library';
+import { currentDate } from '@/utils/currentDate';
+
+import { IGroup } from '@/interfaces/group';
+import { IPolicy } from '@/interfaces/policy';
+
+import * as groupsActions from '@/store/actions/groups';
 
 import PolicyConfigurationButtonView from './PolicyConfigurationButton.view';
 
-interface IProps {
-	readonly selectedLibrary: ILibrary | null;
-	readonly onPolicyConfiguratoinClicked: () => void;
+interface IPropsFromDispatch {
+	addPolicy: (groupId: string, policy: IPolicy) => groupsActions.AddPolicy;
+}
+
+interface IProps extends IPropsFromDispatch {
+	readonly isButtonDisabled: boolean;
+	readonly selectedGroup: IGroup | null;
 	readonly policyLabelInput: string | null;
 }
 
 const PolicyConfigurationButton: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
+	const onCreateNewPolicy = () => {
+		props.addPolicy(props.selectedGroup?.id || '', {
+			id: uniqid(),
+			label: props.policyLabelInput || '',
+			createdAt: currentDate(),
+			libraryName: '',
+			rules: null,
+		});
+	};
+
 	return (
 		<PolicyConfigurationButtonView
-			selectedLibrary={props.selectedLibrary}
-			policyLabelInput={props.policyLabelInput}
-			onPolicyConfiguratoinClicked={props.onPolicyConfiguratoinClicked}
+			isButtonDisabled={props.isButtonDisabled}
+			onCreateNewPolicy={onCreateNewPolicy}
 		/>
 	);
 };
 
 PolicyConfigurationButton.displayName = 'PolicyConfigurationButton';
 PolicyConfigurationButton.defaultProps = {};
 
-export default React.memo(PolicyConfigurationButton);
+const mapDispatchToProps = (dispatch: Dispatch<groupsActions.GroupsTypes>): IPropsFromDispatch => {
+	return {
+		addPolicy: (groupId: string, policy: IPolicy): groupsActions.AddPolicy =>
+			dispatch(groupsActions.addPolicy(groupId, policy)),
+	};
+};
+
+export default connect(null, mapDispatchToProps)(React.memo(PolicyConfigurationButton));
diff --git a/...GroupInfo/Policies/NewPolicy/PolicyConfigurationButton/PolicyConfigurationButton.view.tsx b/...GroupInfo/Policies/NewPolicy/PolicyConfigurationButton/PolicyConfigurationButton.view.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 // import { Trans, useTranslation } from 'react-i18next';
-import { ILibrary } from '@/interfaces/library';
 import VSvg from '@/ui/VSvg';
 
 import classes from './PolicyConfigurationButton.module.scss';
 
 interface IProps {
-	readonly selectedLibrary: ILibrary | null;
-	readonly policyLabelInput: string | null;
-	readonly onPolicyConfiguratoinClicked: () => void;
+	readonly isButtonDisabled: boolean;
+	readonly onCreateNewPolicy: () => void;
 }
 
 const PolicyConfigurationButtonView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
@@ -18,22 +16,23 @@ const PolicyConfigurationButtonView: React.FC<IProps> = (props: React.PropsWithC
 		<button
 			className={classes['policyConfigurationButton']}
 			type="button"
+			disabled={props.isButtonDisabled}
 			style={{
-				backgroundColor: !props.selectedLibrary || !props.policyLabelInput ? '#E7E7E7' : '#2049b0',
-				borderColor: !props.selectedLibrary || !props.policyLabelInput ? '#BBB8CA' : '#19357e',
+				backgroundColor: props.isButtonDisabled ? '#E7E7E7' : '#2049b0',
+				borderColor: props.isButtonDisabled ? '#BBB8CA' : '#19357e',
 			}}
-			onClick={props.onPolicyConfiguratoinClicked}
+			onClick={props.onCreateNewPolicy}
 		>
 			<span
 				className={classes['policyConfigurationButton__text']}
-				style={{ color: !props.selectedLibrary || !props.policyLabelInput ? '#8B8B8B' : '#e7e7e7' }}
+				style={{ color: props.isButtonDisabled ? '#8B8B8B' : '#e7e7e7' }}
 			>
 				Continue to Policy Configuration
 			</span>
 			<VSvg
 				className={classes['policyConfigurationButton__icon']}
 				name="arrowRight"
-				style={{ stroke: !props.selectedLibrary || !props.policyLabelInput ? '#8B8B8B' : '#e7e7e7' }}
+				style={{ stroke: props.isButtonDisabled ? '#8B8B8B' : '#e7e7e7' }}
 			/>
 		</button>
 	);

diff --git a/...ontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/Policies.tsx b/...ontend/src/components/containers/GroupCenter/GroupDetails/GroupInfo/Policies/Policies.tsx
@@ -10,7 +10,7 @@ interface IProps {
 }
 
 const Policies: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
-	return <PoliciesView selectedGroup={props.selectedGroup} onCreateNewPolicy={props.onCreateNewPolicy} />;
+	return <PoliciesView selectedGroup={props.selectedGroup} />;
 };
 
 Policies.displayName = 'Policies';