refactor code

src/ui/components/alert/alert.scss

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 .alert {
 	width: 100%;
 	padding: 24px;

src/ui/components/alert/index.tsx

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import "./alert.scss";
 
 type AlertProps = {

src/ui/components/auth/SignOutBtn.tsx

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import useAuthService from "../../../api";
 import Button from "../button";
 import "./SignOutBtn.scss";

src/ui/components/badge/badge.scss

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 .badge {
 	display: flex;
 	justify-content: center;

src/ui/components/badge/index.tsx

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import "./badge.scss";
 
 export type BadgeProps = {

src/ui/components/dialog/dialog.scss

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 .dialog-overlay {
 	background: rgba(0, 0, 0, 0.4);
 	position: fixed;

src/ui/components/dialog/index.tsx

@@ -1,49 +1,53 @@
-import { createContext, useContext } from "react";
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
 
 import React from "react";
 import { ReactComponent as CloseIcon } from "../../../assets/close.svg";
 import "./dialog.scss";
 
-type DialogContextType = {
-	closeDialog: () => void;
-};
-
-const DialogContext = createContext<DialogContextType | undefined>(undefined);
-
-function useDialog() {
-	const context = useContext(DialogContext);
-
-	if (context === undefined) {
-		throw Error("useMenubarContext is used outside the MenubarContext provider.");
-	}
-
-	return context;
-}
-
 type DialogCommonProps = {
 	children: React.ReactNode;
 	className?: string;
 };
 
 type DialogProps = DialogCommonProps & {
+	title: string;
 	closeOnOverlayClick?: boolean;
-} & DialogContextType;
+	onCloseDialog: () => void;
+};
 
 function Dialog(props: DialogProps) {
-	const { children, className = "", closeOnOverlayClick = false, closeDialog } = props;
+	const { children, className = "", closeOnOverlayClick = false, onCloseDialog, title } = props;
 
 	return (
-		<DialogContext.Provider value={{ closeDialog }}>
+		<>
 			<div
 				className="dialog-overlay"
 				onClick={() => {
 					if (closeOnOverlayClick === true) {
-						closeDialog();
+						onCloseDialog();
 					}
 				}}
 			/>
-			<div className={`dialog-container ${className}`}>{children}</div>
-		</DialogContext.Provider>
+			<div className={`dialog-container ${className}`}>
+				<div className="dialog-header">
+					{title} <CloseIcon onClick={onCloseDialog} />
+				</div>
+				{children}
+			</div>
+		</>
 	);
 }
 
@@ -53,18 +57,6 @@ function DialogContent(props: DialogCommonProps) {
 	return <div className={`dialog-content ${className}`}>{children}</div>;
 }
 
-function DialogHeader(props: DialogCommonProps) {
-	const { children, className = "" } = props;
-
-	const { closeDialog } = useDialog();
-
-	return (
-		<div className={`dialog-header ${className}`}>
-			{children} <CloseIcon onClick={closeDialog} />
-		</div>
-	);
-}
-
 type DialogFooterProps = DialogCommonProps & {
 	flexDirection?: "row" | "column";
 	justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
@@ -83,4 +75,4 @@ function DialogFooter(props: DialogFooterProps) {
 	return <div className={`dialog-footer ${flexDirection} ${justifyContent} ${border} ${className}`}>{children}</div>;
 }
 
-export { Dialog, DialogContent, DialogFooter, DialogHeader };
+export { Dialog, DialogContent, DialogFooter };

src/ui/components/inputField/TagsInputField.tsx

@@ -29,7 +29,7 @@ type TagsInputFieldProps = Omit<JSX.IntrinsicElements["input"], "onChange"> & {
 };
 
 export default function TagsInputField(props: TagsInputFieldProps) {
-	const { focusText = "", addTag, removeTag, tags, tagProps, ...rest } = props;
+	const { focusText, addTag, removeTag, tags, tagProps, ...rest } = props;
 	const [isFocused, setIsFocused] = useState(false);
 
 	return (
@@ -61,7 +61,7 @@ export default function TagsInputField(props: TagsInputFieldProps) {
 					/>
 				</div>
 			</div>
-			{focusText && isFocused ? <p>{focusText}</p> : null}
+			{focusText !== undefined && isFocused ? <p>{focusText}</p> : null}
 			<div className="tags-container">
 				{tags.map((tag) => {
 					return (

src/ui/components/pagination/index.tsx

@@ -1,17 +1,31 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import { getImageUrl } from "../../../utils";
 
 import "./pagination.scss";
 
 type PaginationProps = {
 	className?: string;
-	page: number;
+	currentActivePage: number;
 	limit: number;
 	offset: number;
 	totalPages: number;
 	totalItems: number;
 	handleNext: () => void;
 	handlePrevious: () => void;
-	isLoading: boolean;
 };
 
 export default function Pagination({
@@ -21,19 +35,18 @@ export default function Pagination({
 	offset,
 	handleNext,
 	handlePrevious,
-	isLoading,
-	page,
+	currentActivePage,
 	className,
 }: PaginationProps) {
 	return (
 		<div className={["pagination", className].join(" ")}>
 			<p className="pagination-count text-small">
-				{limit * (page - 1) + 1}-{offset + limit * (page - 1)} of {totalItems}
+				{limit * (currentActivePage - 1) + 1}-{offset + limit * (currentActivePage - 1)} of {totalItems}
 			</p>
 			<div className="pagination-navigation">
 				<button
 					className="pagination-button"
-					disabled={page <= 1 || isLoading}
+					disabled={currentActivePage <= 1}
 					onClick={handlePrevious}>
 					<img
 						src={getImageUrl("chevron-left.svg")}
@@ -42,7 +55,7 @@ export default function Pagination({
 				</button>
 				<button
 					className="pagination-button"
-					disabled={page === totalPages || isLoading}
+					disabled={currentActivePage === totalPages}
 					onClick={handleNext}>
 					<img
 						src={getImageUrl("chevron-right.svg")}

src/ui/components/pagination/pagination.scss

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 @import "../../styles/mixin.scss";
 
 .pagination {

src/ui/components/sidebar/index.tsx

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import { Link, useLocation } from "react-router-dom";
 
 import { ReactComponent as PermissionsIcon } from "../../../assets/roles-and-permissions.svg";

src/ui/components/table/index.tsx

@@ -1,3 +1,18 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
 import * as React from "react";
 
 import "./table.scss";

src/ui/components/userDetail/userRoles/UserRolesList.tsx

@@ -117,7 +117,7 @@ export default function UserRolesList(props: UserRolesListProps) {
 							userId={userId}
 							assignedRoles={assignedRoles}
 							setAssignedRoles={setAssignedRoles}
-							closeDialog={() => setShowAddRoleDialog(false)}
+							onCloseDialog={() => setShowAddRoleDialog(false)}
 						/>
 					) : null}
 					{showDeleteRoleDialog && roleToDelete ? (
@@ -126,7 +126,7 @@ export default function UserRolesList(props: UserRolesListProps) {
 							userId={userId}
 							assignedRoles={assignedRoles}
 							setAssignedRoles={setAssignedRoles}
-							closeDialog={() => {
+							onCloseDialog={() => {
 								setRoleToDelete(undefined);
 								setShowDeleteDialogRole(false);
 							}}