diff --git a/example/package-lock.json b/example/package-lock.json index 57a689d..017b5ea 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -33,7 +33,7 @@ }, "../build": { "name": "@iavofficial/frontend-framework", - "version": "0.1.0", + "version": "1.1.0", "license": "Apache-2.0", "dependencies": { "i18next": "^22.4.13", @@ -61,14 +61,9 @@ "@types/node": "^18.15.5", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", - "@typescript-eslint/eslint-plugin": "^8.6.0", - "@typescript-eslint/parser": "^8.6.0", "aws-amplify": "^6.3.4", "babel-plugin-inline-react-svg": "^2.0.2", "conventional-changelog-conventionalcommits": "^8.0.0", - "eslint": "^8.57.0", - "eslint-plugin-react": "^7.36.1", - "eslint-plugin-react-hooks": "^4.6.2", "jest": "^29.7.0", "prettier": "^3.3.2", "semantic-release": "^24.1.0", diff --git a/src/components/uiLayer.tsx b/src/components/uiLayer.tsx index 2e0d576..0a4a61c 100644 --- a/src/components/uiLayer.tsx +++ b/src/components/uiLayer.tsx @@ -46,112 +46,114 @@ import {useCookies} from "react-cookie"; import {ACCEPTED_COOKIES_NAME} from "../constants"; export interface AuthOptions { - backgroundImage?: string; - companyText?: string; - preventDarkmode?: boolean; + backgroundImage?: string; + companyText?: string; + preventDarkmode?: boolean; } export interface NavbarOptions { - staticCollapsedState?: StaticCollapsedState; + staticCollapsedState?: StaticCollapsedState; } export interface Props { - // This indicates that the passed objects should have the type's properties at least. - tabAndContentWrappers: TabAndContentWrapper[]; - startingPoint: string; - disableLogin?: boolean; - disableCookieBanner?: boolean; - authenticationView?: React.ComponentType; - documentsComponent?: React.ComponentType; - documentsLabelKey?: string; - settingsMenuOptions?: SettingsMenuOptions; - userMenuOptions?: UserMenuOptions; - headerOptions?: HeaderOptions; - authOptions?: AuthOptions; - hideLegalDocuments?: boolean; - navbarOptions?: NavbarOptions; + // This indicates that the passed objects should have the type's properties at least. + tabAndContentWrappers: TabAndContentWrapper[]; + startingPoint: string; + disableLogin?: boolean; + disableCookieBanner?: boolean; + authenticationView?: React.ComponentType; + documentsComponent?: React.ComponentType; + documentsLabelKey?: string; + settingsMenuOptions?: SettingsMenuOptions; + userMenuOptions?: UserMenuOptions; + headerOptions?: HeaderOptions; + authOptions?: AuthOptions; + hideLegalDocuments?: boolean; + navbarOptions?: NavbarOptions; } export const UILayer = (props: Props) => { - const authContext = useContext(AuthContext); + const authContext = useContext(AuthContext); - const [, setCookie] = useCookies([ACCEPTED_COOKIES_NAME]); + const [, setCookie] = useCookies([ACCEPTED_COOKIES_NAME]); - const AuthenticationView = props.authenticationView - ? props.authenticationView - : BasicAuthenticationView; + const AuthenticationView = props.authenticationView + ? props.authenticationView + : BasicAuthenticationView; - // If the login is disabled, the user should not be able to log out. - const userMenuOptions = {...props.userMenuOptions}; - if (props.disableLogin) { - userMenuOptions.hideLogoutButton = true; - } - - useEffect(() => { - if (props.disableCookieBanner) { - setAcceptCookies(setCookie); + // If the login is disabled, the user should not be able to log out. + const userMenuOptions = {...props.userMenuOptions}; + if (props.disableLogin) { + userMenuOptions.hideLogoutButton = true; } - }, [props.disableCookieBanner, setCookie]); - - return ( - - {!props.disableCookieBanner && } - - - {!props.disableLogin && ( - - } - /> - )} - {!props.disableLogin && !authContext?.hasAuthenticated() && ( - - ) : ( - - ) - } - /> - )} - - } - /> - - - ); + + useEffect(() => { + if (props.disableCookieBanner) { + setAcceptCookies(setCookie); + } + }, [props.disableCookieBanner, setCookie]); + + return ( + + {!props.disableCookieBanner && } + + + + {!props.disableLogin && ( + + } + /> + )} + + {!props.disableLogin && !authContext?.hasAuthenticated() && ( + + ) : ( + + ) + } + /> + )} + + {!authContext?.hasAuthenticated() ? ( + }/> + ) : ( + <> + + } + /> + + )} + + + ); }; interface RedirectorProps { - startingPoint: string; - disableLogin?: boolean; + startingPoint: string; + disableLogin?: boolean; } /** @@ -161,46 +163,46 @@ interface RedirectorProps { * @constructor */ const Redirector = (props: RedirectorProps) => { - const disableLogin = props.disableLogin; + const disableLogin = props.disableLogin; - const [, setIntialNavigationDone] = useState(false); + const [, setIntialNavigationDone] = useState(false); - const authContext = useContext(AuthContext); - const userIsAuthenticated = authContext!.hasAuthenticated(); + const authContext = useContext(AuthContext); + const userIsAuthenticated = authContext!.hasAuthenticated(); - const currentPath = useLocation().pathname; - const navigate = useNavigate(); + const currentPath = useLocation().pathname; + const navigate = useNavigate(); - useEffect(() => { - // Case: Login is disabled. - if (disableLogin) { - setIntialNavigationDone((prevState) => { - if (!prevState) { - navigate(props.startingPoint.valueOf()); + useEffect(() => { + // Case: Login is disabled. + if (disableLogin) { + setIntialNavigationDone((prevState) => { + if (!prevState) { + navigate(props.startingPoint.valueOf()); + } + // At this point the state should always be true. + return true; + }); + return; } - // At this point the state should always be true. - return true; - }); - return; - } - // Case: Login is enabled. - if (!userIsAuthenticated) { - if (currentPath !== "/documents") { - navigate("/login"); - } - } else { - if (currentPath === "/login" || currentPath === "/") { - navigate(props.startingPoint.valueOf()); - } - } - }, [ - disableLogin, - currentPath, - userIsAuthenticated, - navigate, - props.startingPoint, - ]); - - return ; + // Case: Login is enabled. + if (!userIsAuthenticated) { + if (currentPath !== "/documents") { + navigate("/login"); + } + } else { + if (currentPath === "/login" || currentPath === "/") { + navigate(props.startingPoint.valueOf()); + } + } + }, [ + disableLogin, + currentPath, + userIsAuthenticated, + navigate, + props.startingPoint, + ]); + + return ; };