From 482d644b2f5dd196aa48daa49c23b15bff63f0fc Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Thu, 26 Oct 2023 13:50:06 +0300
Subject: [PATCH] feat: fixed displaying field and visibility forms

---
 src/profile/ProfilePage.test.jsx              |  28 -
 .../__snapshots__/ProfilePage.test.jsx.snap   | 714 ++++--------------
 2 files changed, 143 insertions(+), 599 deletions(-)

diff --git a/src/profile/ProfilePage.test.jsx b/src/profile/ProfilePage.test.jsx
index 024d776e7..411ca4536 100644
--- a/src/profile/ProfilePage.test.jsx
+++ b/src/profile/ProfilePage.test.jsx
@@ -148,34 +148,6 @@ describe('<ProfilePage />', () => {
       expect(tree).toMatchSnapshot();
     });
 
-    it('viewing other profile with name and country', () => {
-      const contextValue = {
-        authenticatedUser: { userId: 123, username: 'staff', administrator: true },
-        config: getConfig(),
-      };
-
-      const component = (
-        <ProfilePageWrapper
-          contextValue={contextValue}
-          params={{ username: 'verified' }} // Override default params
-          store={mockStore({
-            ...storeMocks.viewOtherProfile,
-            profilePage: {
-              ...storeMocks.viewOtherProfile.profilePage,
-              account: {
-                ...storeMocks.viewOtherProfile.profilePage.account,
-                name: 'user',
-                country: 'EN',
-              },
-            },
-          })}
-          match={{ params: { username: 'verified' } }} // Override default match
-        />
-      );
-      const tree = renderer.create(component).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
     it('while saving an edited bio', () => {
       const contextValue = {
         authenticatedUser: { userId: 123, username: 'staff', administrator: true },
diff --git a/src/profile/__snapshots__/ProfilePage.test.jsx.snap b/src/profile/__snapshots__/ProfilePage.test.jsx.snap
index 0100236ed..28229bb4e 100644
--- a/src/profile/__snapshots__/ProfilePage.test.jsx.snap
+++ b/src/profile/__snapshots__/ProfilePage.test.jsx.snap
@@ -5643,7 +5643,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
 </div>
 `;
 
-exports[`<ProfilePage /> Renders correctly in various states viewing other profile 1`] = `
+exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
 <div
   className="profile-page"
 >
@@ -5704,7 +5704,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             <h1
               className="h2 mb-0 font-weight-bold"
             >
-              verified
+              staff
             </h1>
             <p
               className="mb-0"
@@ -5747,7 +5747,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
         <div
           className="d-none d-md-block float-right"
-        />
+        >
+          <a
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
+              </span>
+            </span>
+          </a>
+        </div>
       </div>
     </div>
     <div
@@ -5765,7 +5810,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             <h1
               className="h2 mb-0 font-weight-bold"
             >
-              verified
+              staff
             </h1>
             <p
               className="mb-0"
@@ -5808,7 +5853,52 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
         </div>
         <div
           className="d-md-none mb-4"
-        />
+        >
+          <a
+            className="pgn__hyperlink default-link standalone-link btn btn-primary"
+            href="http://localhost:18150/records"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            View My Records
+            <span
+              className="pgn__hyperlink__external-icon"
+              title="Opens in a new tab"
+            >
+              <span
+                className="pgn__icon"
+                style={
+                  Object {
+                    "height": "1em",
+                    "width": "1em",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden={true}
+                  fill="none"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 19H5V5h7V3H3v18h18v-9h-2v7ZM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7Z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  className="sr-only"
+                >
+                  in a new tab
+                </span>
+              </span>
+            </span>
+          </a>
+        </div>
         <div
           className="pgn-transition-replace-group position-relative mb-5"
           style={
@@ -5937,10 +6027,6 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
             </p>
           </div>
         </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
         <div
           className="pgn-transition-replace-group position-relative mb-5"
           style={
@@ -5963,595 +6049,81 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
                 className="edit-section-header"
                 id={null}
               >
-                About Me
+                Social Links
               </h2>
             </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              bio
-            </p>
+            <ul
+              className="list-unstyled"
+            />
           </div>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states viewing other profile with all fields 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
       <div
-        className="col-auto col-md-4 col-lg-3"
+        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
       >
         <div
-          className="d-flex align-items-center d-md-block"
+          className="pgn-transition-replace-group position-relative mb-5"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
           <div
-            className="profile-avatar-wrap position-relative"
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
             <div
-              className="profile-avatar rounded-circle bg-light"
+              className="editable-item-header mb-2"
             >
-              <IconMock
-                aria-hidden={true}
-                className="text-muted"
-                focusable="false"
-                role="img"
-                viewBox="0 0 24 24"
-              />
+              <h2
+                className="edit-section-header"
+                id={null}
+              >
+                About Me
+              </h2>
             </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
+            <p
+              className="lead"
+              data-hj-suppress={true}
             >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
+              bio
+            </p>
           </div>
         </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
         <div
-          className="d-md-none"
+          className="pgn-transition-replace-group position-relative mb-4"
+          style={
+            Object {
+              "height": null,
+            }
+          }
         >
-          <span
-            data-hj-suppress={true}
+          <div
+            style={
+              Object {
+                "padding": ".1px 0",
+              }
+            }
           >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              verified
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
             <div
-              className="d-flex align-items-center mt-3 mb-2rem"
+              className="editable-item-header mb-2"
             >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <div
-                className="username-description"
+              <h2
+                className="edit-section-header"
+                id={null}
               >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
+                My Certificates
+              </h2>
             </div>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
+            You don't have any certificates yet.
+          </div>
         </div>
-        <div
-          className="d-none d-md-block float-right"
-        />
       </div>
     </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              verified
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <div
-              className="d-flex align-items-center mt-3 mb-2rem"
-            >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <div
-                className="username-description"
-              >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
-            </div>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        />
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              user
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            />
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Primary Language Spoken
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            />
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Education
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              Other education
-            </p>
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      >
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                About Me
-              </h2>
-            </div>
-            <p
-              className="lead"
-              data-hj-suppress={true}
-            >
-              bio
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<ProfilePage /> Renders correctly in various states viewing other profile with name and country 1`] = `
-<div
-  className="profile-page"
->
-  <div
-    className="profile-page-bg-banner bg-primary d-none d-md-block p-relative"
-  />
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="row align-items-center pt-4 mb-4 pt-md-0 mb-md-0"
-    >
-      <div
-        className="col-auto col-md-4 col-lg-3"
-      >
-        <div
-          className="d-flex align-items-center d-md-block"
-        >
-          <div
-            className="profile-avatar-wrap position-relative"
-          >
-            <div
-              className="profile-avatar rounded-circle bg-light"
-            >
-              <IconMock
-                aria-hidden={true}
-                className="text-muted"
-                focusable="false"
-                role="img"
-                viewBox="0 0 24 24"
-              />
-            </div>
-            <form
-              encType="multipart/form-data"
-              onSubmit={[Function]}
-            >
-              <input
-                accept=".jpg, .jpeg, .png"
-                className="d-none form-control-file"
-                id="photo-file"
-                name="file"
-                onChange={[Function]}
-                type="file"
-              />
-            </form>
-          </div>
-        </div>
-      </div>
-      <div
-        className="col pl-0"
-      >
-        <div
-          className="d-md-none"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              verified
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <div
-              className="d-flex align-items-center mt-3 mb-2rem"
-            >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <div
-                className="username-description"
-              >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
-            </div>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-none d-md-block float-right"
-        />
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-md-4 col-lg-4"
-      >
-        <div
-          className="d-none d-md-block mb-4"
-        >
-          <span
-            data-hj-suppress={true}
-          >
-            <h1
-              className="h2 mb-0 font-weight-bold"
-            >
-              verified
-            </h1>
-            <p
-              className="mb-0"
-            >
-              Member since 
-              2017
-            </p>
-            <div
-              className="d-flex align-items-center mt-3 mb-2rem"
-            >
-              <span
-                className="pgn__icon icon-visibility-off"
-              >
-                <svg
-                  aria-hidden={true}
-                  fill="none"
-                  focusable={false}
-                  height={24}
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width={24}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM3.42 2.45L2.01 3.87l2.68 2.68A11.738 11.738 0 001 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l3.43 3.43 1.41-1.41L3.42 2.45zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 00-2.64-2.64l2.64 2.64z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <div
-                className="username-description"
-              >
-                Your profile information is only visible to you. Only your username is visible to others on localhost.
-              </div>
-            </div>
-            <hr
-              className="d-none d-md-block"
-            />
-          </span>
-        </div>
-        <div
-          className="d-md-none mb-4"
-        />
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Full Name
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            >
-              user
-            </p>
-          </div>
-        </div>
-        <div
-          className="pgn-transition-replace-group position-relative mb-5"
-          style={
-            Object {
-              "height": null,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "padding": ".1px 0",
-              }
-            }
-          >
-            <div
-              className="editable-item-header mb-2"
-            >
-              <h2
-                className="edit-section-header"
-                id={null}
-              >
-                Location
-              </h2>
-            </div>
-            <p
-              className="h5"
-              data-hj-suppress={true}
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        className="pt-md-3 col-md-8 col-lg-7 offset-lg-1"
-      />
-    </div>
   </div>
 </div>
 `;