Features/dynamic env

README.md

@@ -57,18 +57,15 @@ Install wap_ui dependencies
 npm install
 ```
 
-Create a .env files at the root of the repository with the following values
+If you want to contribute and develop on wap UI you need a .env file
+Create a .env file at the root of the repository with the following values
 
 ```
-BASE_API_URL=YOUR_BASE_API_URL
 BASE_URL=YOUR_BASE_URL
-HOSTNAME=YOUR_HOSTNAME
 ```
 ex.
 ```
-BASE_API_URL=https://myserver.fr/api/
 BASE_URL=https://myserver.fr
-HOSTNAME=myserver.fr
 ```
 
 Finally if you want to run the application:

next.config.js

@@ -2,20 +2,13 @@
 const nextConfig = {
     reactStrictMode: true,
     env: {
-        BASE_API_URL: process.env.BASE_API_URL,
         BASE_URL: process.env.BASE_URL,
     },
     devIndicators: {
         buildActivity: false
     },
     images: {
         unoptimized: true,
-        remotePatterns: [
-            {
-                protocol: 'https',
-                hostname: process.env.HOSTNAME,
-            },
-        ],
     },
     trailingSlash: true,
 }

src/features/global/navigation/NavBar.tsx

@@ -29,7 +29,7 @@ const NavBar = () => {
     if (page === "/home/pld/generator" || page === "/home/pld/images" || page === "/home/pld/changes")
         page = "/home/pld";
 
-    return pathname.includes("home") && userRole && width >= 800 ? (
+    return pathname.includes("home") && userRole && width >= 800 && user ? (
         <Navbar p="xs" width={{ base: 275 }} style={{borderWidth: 0}} className={classes.navbar}>
             <Navbar.Section>
                 <UserButton

src/features/global/navigation/NavigationDrawer.tsx

@@ -26,13 +26,14 @@ const NavigationDrawer: React.FC<Props> = ({ opened, onClose }) => {
         page = "/home/pld";
 
     return pathname.includes("home") && userRole ? (
-        <Drawer opened={opened} onClose={onClose} withCloseButton={false} size={"60%"}>
+        <Drawer opened={opened} onClose={onClose} withCloseButton={false} size={"50%"}>
             <Stack style={{height: "95vh"}} justify={"space-between"}>
                 <div>
                     <UserButton
                         firstname={user?.firstname}
                         lastname={user?.lastname}
                         email={user?.email}
+                        onClose={onClose}
                     />
                     <div style={{ marginTop: 30 }}>
                         <Navigationtabs active={page} userRole={userRole} onClose={onClose} />

src/features/global/navigation/components/fullNavBar/UserButton.tsx

@@ -1,33 +1,57 @@
-import { Group, Text } from '@mantine/core';
+import { Group, Text, UnstyledButton, createStyles, useMantineTheme } from '@mantine/core';
 
 import style from "../../styles/userButton.module.css";
 
 import LittleColorScheme from 'components/littleColorScheme/LittleColorScheme';
+import { MdOutlineChevronRight } from 'react-icons/md';
+import { useRouter } from 'next/router';
 
 interface Props {
     firstname: string;
     lastname: string;
     email: string;
+    onClose?: () => void;
 }
 
-const UserButton: React.FC<Props> = ({ firstname, lastname, email }) => {
+const useStyles = createStyles((theme) => ({
+    user: {
+        padding: 7,
+        borderRadius: 5,
+
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],
+        },
+    },
+}));
+
+const UserButton: React.FC<Props> = ({ firstname, lastname, email, onClose }) => {
+    const theme = useMantineTheme();
+    const { classes } = useStyles();
+
+    const fullName = firstname + " " + lastname;
+
+    const router = useRouter();
+
     return (
         <Group className={style.container}>
             <LittleColorScheme />
-            <Group>
-                <div style={{ flex: 1, height: 40 }}>
+            <UnstyledButton className={classes.user} onClick={() => (router.push("/home/profile"), onClose && onClose())}>
+                <div style={{ display: "flex", height: 40, alignItems: "center" }}>
                     { firstname !== undefined &&
                         <>
-                            <Text size="sm" weight={500}>
-                                {firstname} {lastname}
-                            </Text>
-                            <Text color="dimmed" size="xs">
-                                {email}
-                            </Text>
+                            <div>
+                                <Text size="sm" weight={500} style={{ maxWidth: "calc(100%)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+                                    {fullName.length > 18 ? fullName.slice(0, 18) + "..." : fullName}
+                                </Text>
+                                <Text color="dimmed" size="xs" style={{ maxWidth: "calc(100%)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+                                    {email.length > 24 ? email.slice(0, 21) + "..." : email}
+                                </Text>
+                            </div>
+                            {<MdOutlineChevronRight style={{ marginLeft: 7 }} size={20} color={theme.colors.dark[2]} />}
                         </>
                     }
                 </div>
-            </Group>
+            </UnstyledButton>
         </Group>
     );
 }

src/features/global/navigation/styles/useNavBarStyles.ts

@@ -19,7 +19,7 @@ export const useNavBarStyles = createStyles((theme, _params) => {
             alignItems: 'center',
             textDecoration: 'none',
             fontSize: theme.fontSizes.sm,
-            color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],
+            color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[7],
             padding: 5,
             marginTop: 5,
             marginLeft: 5,

src/features/global/navigation/styles/userButton.module.css

@@ -1,5 +1,4 @@
 .container {
     width: 100%;
-    padding: 10px;
-    border-radius: 6px;
+    padding: 8px;
 }

src/features/global/navigation/utils/links.ts

@@ -10,7 +10,6 @@ export const userTabs = [
     { link: '/home', label: 'Dashboard', icon: AiOutlineDashboard },
     { link: '/home/mycards', label: 'My cards', icon: RxCardStack },
     { link: '/home/meetings', label: 'Meetings', icon: MdOutlineCallToAction },
-    { link: '/home/profile', label: 'Profile', icon: AiOutlineUser },
     { link: '/home/pld', label: 'PLD', icon: HiOutlineDocumentText },
 ];
 

src/features/home/editor/pld/ImagesDropzone.tsx

@@ -18,6 +18,7 @@ interface Props {
 }
 
 const ImagesDropZone: React.FC<Props> = ({ fileName }) => {
+    const url = process.env.BASE_URL || "";
     const [setImage, result] = useSetPLDImagesMutation();
 
     const [imageError, setImageError] = useState(false);
@@ -55,7 +56,7 @@ const ImagesDropZone: React.FC<Props> = ({ fileName }) => {
                     ) : (
                         <>
                             <Image
-                                src={process.env.BASE_URL + "/pldAssets/" + fileName + `?${new Date().getTime()}`}
+                                src={url + "/pldAssets/" + fileName + `?${new Date().getTime()}`}
                                 alt={fileName}
                                 fill
                                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw,33vw"

src/features/home/editor/pld/PldTable.tsx

@@ -7,6 +7,8 @@ interface Props {
 }
 
 const PldTable: React.FC<Props> = ({ pldList }) => {
+    const url = process.env.BASE_URL || "";
+
     return (
         <Table mt={50} striped highlightOnHover>
             <thead>
@@ -24,7 +26,7 @@ const PldTable: React.FC<Props> = ({ pldList }) => {
                         <td>{pld.sprint.name}</td>
                         <td>{pld.versionInSprint}</td>
                         <td>
-                            <Anchor href={process.env.BASE_URL! + pld.downloadPath}>
+                            <Anchor href={url + pld.downloadPath}>
                                 {pld.downloadPath}
                             </Anchor>
                         </td>

src/features/home/user/meetings/components/Meeting.tsx

@@ -19,6 +19,9 @@ interface Props {
 const Meeting: React.FC<Props> = ({ meeting, refetch }) => {
     const theme = useMantineTheme();
 
+    for (let i = 0; i < meeting.userAttendances.length; i++)
+        console.log(meeting.userAttendances[i])
+
     // Get endtime of the meeting with the duration
     const startTime = moment(meeting.date).utc().format("H:mm");
     const endTime = moment(meeting.date).utc().add(meeting.duration, 'minutes').format("H:mm");
@@ -94,7 +97,7 @@ const Meeting: React.FC<Props> = ({ meeting, refetch }) => {
                         <Group mt={20} position={"center"} align={"center"} spacing={10}>
                             {meeting.userAttendances.map((attendance) => (
                                 <Tooltip key={attendance.id} label={attendance.attendance === "PRESENT" ? "Present" : "ABSENT" ? "Absent" : "Excused"} transitionProps={{duration: 300, transition: "pop", timingFunction: "ease"}} withinPortal withArrow arrowSize={6} arrowRadius={4}>
-                                    <Badge style={{cursor: "pointer"}} radius={"sm"} size={"lg"} variant={"dot"} color={attendance.attendance === "PRESENT" ? "green" : "ABSENT" ? "red" : "orange"}>
+                                    <Badge style={{cursor: "pointer"}} radius={"sm"} size={"lg"} variant={"dot"} color={attendance.attendance === "PRESENT" ? "green" : attendance.attendance === "UNDEFINED" ? "orange" : "red"}>
                                         {attendance.user.firstname} {attendance.user.lastname}
                                     </Badge>
                                 </Tooltip>

src/hooks/api/useGetCardList.ts

@@ -7,10 +7,13 @@ import { useGetCardListQuery } from "store/api/cardAPI";
 import { checkError } from "./utils/checkError";
 
 import { useGetSprint } from "./useGetSprint";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetCardList = () => {
+    const isLoggedIn = useAppSelector(state => state.user.isLoggedIn);
+
     const { data: sprint } = useGetSprint();
-    const { data, error, refetch } = useGetCardListQuery(sprint?.id ?? 0, { skip: !sprint?.id });
+    const { data, error, refetch } = useGetCardListQuery(sprint?.id ?? 0, { skip: !sprint?.id || !isLoggedIn });
 
     const router = useRouter();
 

src/hooks/api/useGetConfig.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { useGetConfigQuery } from "store/api/configAPI";
 
 import { checkError } from "./utils/checkError";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetConfig = () => {
-    const { data, error, refetch } = useGetConfigQuery();
+    const isLoggedIn = useAppSelector(state => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetConfigQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetGenerator.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { checkError } from "./utils/checkError";
 
 import { useGetGeneratorQuery } from "store/api/pldAPI";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetGenerator = () => {
-    const { data, error, refetch } = useGetGeneratorQuery();
+    const isLoggedIn = useAppSelector(state => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetGeneratorQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetMeetings.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { checkError } from "./utils/checkError";
 
 import { useGetMeetingsQuery } from "store/api/meetingsAPI";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetMeetings = () => {
-    const { data, error, refetch } = useGetMeetingsQuery();
+    const isLoggedIn = useAppSelector(state => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetMeetingsQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetPLD.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { checkError } from "./utils/checkError";
 
 import { useListPLDQuery } from "store/api/pldAPI";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetPLDs = () => {
-    const { data, error, refetch } = useListPLDQuery();
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
+    const { data, error, refetch } = useListPLDQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetPLDChanges.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { checkError } from "./utils/checkError";
 
 import { useGetPLDChangesQuery } from "store/api/pldAPI";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetPLDChanges = () => {
-    const { data, error, refetch } = useGetPLDChangesQuery();
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetPLDChangesQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetPLDImages.ts

@@ -5,9 +5,12 @@ import { useRouter } from "next/router";
 import { checkError } from "./utils/checkError";
 
 import { useGetPLDImagesQuery } from "store/api/pldAPI";
+import { useAppSelector } from "store/hooks/hooks";
 
 export const useGetPLDImages = () => {
-    const { data, error, refetch } = useGetPLDImagesQuery();
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetPLDImagesQuery(undefined, { skip: !isLoggedIn });
+
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetSprint.ts

@@ -6,8 +6,11 @@ import { useGetSprintQuery } from "store/api/cardAPI";
 
 import { checkError } from "./utils/checkError";
 
+import { useAppSelector } from "store/hooks/hooks";
+
 export const useGetSprint = () => {
-    const { data, error, refetch } = useGetSprintQuery();
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
+    const { data, error, refetch } = useGetSprintQuery(undefined, { skip: !isLoggedIn });
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useGetUserCards.ts

@@ -10,12 +10,15 @@ import { useAppSelector } from "store/hooks/hooks";
 import { useGetSprint } from "./useGetSprint";
 
 export const useGetUserCards = (variant: "all" | "user") => {
+    const router = useRouter();
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
     const userId = useAppSelector((state) => state.user.auth.userId);
+
     const { data: sprint } = useGetSprint();
+
     const query = variant === "user" ? {userId: userId!, sprintId: sprint?.id ?? 0} : {sprintId: sprint?.id ?? 0}
-    const { data, error, refetch } = useGetCardsQuery(query, { skip: !sprint?.id });
-
-    const router = useRouter();
+
+    const { data, error, refetch } = useGetCardsQuery(query, { skip: !sprint?.id || !isLoggedIn });
 
     useEffect(() => {
         if (error)

src/hooks/api/useGetUserInfos.ts

@@ -11,8 +11,9 @@ import { checkError } from "./utils/checkError";
 export const useGetUserInfos = () => {
     const router = useRouter();
     const user = useAppSelector((state) => state.user.auth);
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
 
-    const { data, error, refetch } = useUserInfosQuery<any>(user.userId!);
+    const { data, error, refetch } = useUserInfosQuery<any>(user.userId!, { skip: !isLoggedIn });
 
     useEffect(() => {
         if (error)

src/hooks/api/useListParts.ts

@@ -10,8 +10,9 @@ import { useAppSelector } from "store/hooks/hooks";
 
 export const useListParts = (permission: boolean) => {
     const role = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
 
-    const { data, error, refetch } = useListPartsQuery();
+    const { data, error, refetch } = useListPartsQuery(undefined, {skip: !isLoggedIn});
     const router = useRouter();
 
     useEffect(() => {

src/hooks/api/useListUsers.ts

@@ -8,9 +8,10 @@ import { checkError } from "./utils/checkError";
 import { useAppSelector } from "store/hooks/hooks";
 
 export const useListUsers = (permission: boolean) => {
+    const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
     const role = useAppSelector((state) => state.user.auth.accessToken?.charAt(0));
 
-    const { data, error, refetch } = useListUsersQuery();
+    const { data, error, refetch } = useListUsersQuery(undefined, {skip: !isLoggedIn});
     const router = useRouter();
 
     useEffect(() => {