Simple design for granting categories to user

src/assets/styles/components/_usersPage.scss

@@ -133,3 +133,23 @@
   color: $mainBlue;
   cursor: pointer;
 }
+
+.user-details-middle {
+  display: flex;
+  margin-top: 1rem;
+}
+
+.user-details-middle > div {
+  flex: 1;
+}
+
+.user-details-middle-checkboxes .MuiFormGroup-root {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  flex-direction: row !important;
+}
+
+.user-details-middle-checkboxes .MuiFormGroup-root .MuiFormControlLabel-root {
+  width: calc(100% / 3) !important;
+  margin: 0 !important;
+}

src/pages/LoginPage/LoginPageMUI.js

@@ -83,6 +83,7 @@ const LoginPage = ({ history }) => {
 
   const handleApiResponseSuccess = () => {
     history.push({
+      pathname: FILES_VIEW_PAGE,
       pathname: FILES_VIEW_PAGE,
       state: {
         from: history.location.pathname,

src/pages/UsersPage/UserDetails.js

@@ -18,11 +18,13 @@ import { USERS_PAGE } from "../../constants/pages";
 import { forgetPassword } from "../../store/actions/login/loginActions";
 import { useEffect } from "react";
 import { useTheme } from "@emotion/react";
-import { useMediaQuery } from "@mui/material";
+import { Checkbox, FormControlLabel, FormGroup, useMediaQuery } from "@mui/material";
 import ConfirmDialog from "../../components/MUI/ConfirmDialog";
 import { useTranslation } from "react-i18next";
 import { USER_DETAILS_LOADING } from "../../store/actions/users/usersActionConstants";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+import { selectCategories } from "../../store/selectors/categoriesSelector";
+import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
 
 const UserDetails = ({ history }) => {
   const theme = useTheme();
@@ -33,6 +35,7 @@ const UserDetails = ({ history }) => {
   const [showReset, setReset] = useState(false);
   const [showDelete, setDelete] = useState(false);
   const { t } = useTranslation();
+  const categories = useSelector(selectCategories);
 
   const { user, errorMessage } = useSelector((s) => s.userDetails);
 
@@ -45,6 +48,10 @@ const UserDetails = ({ history }) => {
     );
   };
 
+  useEffect(() => {
+    dispatch(setCategoriesReq());
+  }, []);
+
   const handleApiResponseSuccessReset = () => {
     setReset(false);
   };
@@ -239,75 +246,114 @@ const UserDetails = ({ history }) => {
                 </IconButton>
               </div>
             </div>
-            <div
-              className="flex-center"
-              style={{ justifyContent: "flex-start" }}
-            >
-              <img
-                src={avatar}
-                height="108px"
-                width="108px"
-                style={{ margin: "18px 15px 36px 0px" }}
-              />
-              <p>
-                {user?.position
-                  ? user.position
-                  : t("users.positionNotDeclared")}
-              </p>
-            </div>
-            <div
-              style={{ display: "flex", flexDirection: "column", gap: "18px" }}
-            >
-              <p style={{ fontWeight: "600" }}>{t("users.contact")}</p>
-              <div
-                className="flex-center"
-                style={{ justifyContent: "flex-start" }}
-              >
-                <p style={{ width: "85px" }}>Email:</p>
-                <p className="text-blue">{user && user.email}</p>
-              </div>
-              <div
-                className="flex-center"
-                style={{ justifyContent: "flex-start" }}
-              >
-                <p style={{ width: "85px" }}>{t("users.phone")}:</p>
-                <p className="text-blue">
-                  {user?.phoneNumber
-                    ? user.phoneNumber
-                    : t("users.noPhoneNumber")}
-                </p>
+            <div className="user-details-middle">
+              <div>
+                <div
+                  className="flex-center"
+                  style={{ justifyContent: "flex-start" }}
+                >
+                  <img
+                    src={avatar}
+                    height="108px"
+                    width="108px"
+                    style={{ margin: "18px 15px 36px 0px" }}
+                  />
+                  <p>
+                    {user?.position
+                      ? user.position
+                      : t("users.positionNotDeclared")}
+                  </p>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "18px",
+                  }}
+                >
+                  <p style={{ fontWeight: "600" }}>{t("users.contact")}</p>
+                  <div
+                    className="flex-center"
+                    style={{ justifyContent: "flex-start" }}
+                  >
+                    <p style={{ width: "85px" }}>Email:</p>
+                    <p className="text-blue">{user && user.email}</p>
+                  </div>
+                  <div
+                    className="flex-center"
+                    style={{ justifyContent: "flex-start" }}
+                  >
+                    <p style={{ width: "85px" }}>{t("users.phone")}:</p>
+                    <p className="text-blue">
+                      {user?.phoneNumber
+                        ? user.phoneNumber
+                        : t("users.noPhoneNumber")}
+                    </p>
+                  </div>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "18px",
+                    paddingTop: "36px",
+                  }}
+                >
+                  <p style={{ fontWeight: "600" }}>{t("users.socials")}</p>
+                  <div
+                    className="flex-center"
+                    style={{ justifyContent: "flex-start" }}
+                  >
+                    <p style={{ width: "85px" }}>LinkedIn:</p>
+                    <p className="text-blue">
+                      {user?.linkedIn
+                        ? user.linkedIn
+                        : t("users.noSocialMedia")}
+                    </p>
+                  </div>
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    marginTop: "150px",
+                  }}
+                >
+                  <Link to={"/users"} className="text-blue">
+                    {t("users.backToUsers")}
+                  </Link>
+                </div>
               </div>
-            </div>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "18px",
-                paddingTop: "36px",
-              }}
-            >
-              <p style={{ fontWeight: "600" }}>{t("users.socials")}</p>
-              <div
-                className="flex-center"
-                style={{ justifyContent: "flex-start" }}
-              >
-                <p style={{ width: "85px" }}>LinkedIn:</p>
-                <p className="text-blue">
-                  {user?.linkedIn ? user.linkedIn : t("users.noSocialMedia")}
-                </p>
+              <div>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    marginBottom: "1rem",
+                  }}
+                >
+                  <h1>Granted Categories</h1>
+                </div>
+                <div className="user-details-middle-checkboxes">
+                  <FormGroup>
+                    {categories?.map((tag, index) => (
+                      <FormControlLabel
+                        key={index}
+                        control={
+                          <Checkbox
+                            // onChange={handleCheckboxesCat}
+                            value={tag.name}
+                            checked={tag.isChecked}
+                            className="ad-filters-checkbox"
+                          />
+                        }
+                        label={tag.name}
+                      />
+                    ))}
+                  </FormGroup>
+                </div>
               </div>
             </div>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "flex-end",
-                marginTop: "150px",
-              }}
-            >
-              <Link to={"/users"} className="text-blue">
-                {t("users.backToUsers")}
-              </Link>
-            </div>
           </>
         )}
       </div>