Cleaned up strings for JSON

hackforla · Feb 20, 2024 · 4dd1943 · 4dd1943
1 parent f482c33
commit 4dd1943
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 58 deletions.
diff --git a/frontend/src/context/QualifiersContext.tsx b/frontend/src/context/QualifiersContext.tsx
@@ -38,13 +38,14 @@ export const QualifiersProvider: React.FC<{ children: ReactNode }> = ({
   // Initial state for qualifiers only for testing purposes, actual data should be fetched once the user has an account, and then used to setQualifiers, by using useEffect
   const initialState: QualifiersType = {
     COPs: {
-      // // Uncomment data below for testing
+      // Uncomment data below for testing
       // "UI/UX": [
-      //   "UI/UX Designer",
-      //   "UX Researcher",
-      //   "UX Writing",
-      //   "UX Practice Lead",
+      //   "UI/UX_Designer",
+      //   "UX_Researcher",
+      //   "UX_Writing",
+      //   "UX_Practice_Lead",
       // ],
+      // Data_Science: ["Data_Scientist", "Data_Analyst"],
     },
     // availabilityTimeSlots: [],
   };

diff --git a/frontend/src/pages/QualifierPage/QualifierPageRoles.tsx b/frontend/src/pages/QualifierPage/QualifierPageRoles.tsx
@@ -45,10 +45,14 @@ const QualifierPageRoles: React.FC = () => {
   // Toggle "Select all"/"Deselect all" within each COP
   const handleSelectAll = (copName: string, roles: string[]) => {
     setSelectedRoles((prevState) => {
-      const allSelected = roles.every((role) => prevState[copName]?.[role]); // Check if all roles are selected
+      const allSelected = roles.every((role) => {
+        const cleanRoleName = role.replace(/\s+/g, "_");
+        return prevState[copName]?.[cleanRoleName];
+      }); // Check if all roles are selected
       const updatedRolesState = roles.reduce(
         (acc: { [key: string]: boolean }, role) => {
-          acc[role] = !allSelected; // Set all roles to true if not all are currently selected, otherwise set all to false
+          const cleanRoleName = role.replace(/\s+/g, "_");
+          acc[cleanRoleName] = !allSelected; // Set all roles to true if not all are currently selected, otherwise set all to false
           return acc;
         },
         {}
@@ -94,6 +98,8 @@ const QualifierPageRoles: React.FC = () => {
       </QualifierTitle>
       <div className="flex-center-x">
         {copData.map((cop, index) => {
+          const cleanCopName = cop.title.replace(/\s+/g, "_");
+
           return (
             <Fragment key={index}>
               <div className="row fill flex-center-x my-1">
@@ -106,28 +112,30 @@ const QualifierPageRoles: React.FC = () => {
                         height="21"
                         aria-hidden="true"
                       />
-                      <span className="title-4 ml-1">{cop.title}</span>
+                      <span className="title-4 ml-1">
+                        {cleanCopName.replace(/_/g, " ")}
+                      </span>
                     </div>
                     <span
                       className="links"
                       tabIndex={0}
                       role="button"
                       aria-pressed={
-                        selectedRoles[cop.title] &&
-                        Object.values(selectedRoles[cop.title]).every(
+                        selectedRoles[cleanCopName] &&
+                        Object.values(selectedRoles[cleanCopName]).every(
                           (role) => role
                         )
                       }
-                      onClick={() => handleSelectAll(cop.title, cop.roles)}
+                      onClick={() => handleSelectAll(cleanCopName, cop.roles)}
                       onKeyDown={(e) =>
                         onKey(
-                          () => handleSelectAll(cop.title, cop.roles),
+                          () => handleSelectAll(cleanCopName, cop.roles),
                           "Enter"
                         )(e)
                       }
                     >
-                      {selectedRoles[cop.title] &&
-                      Object.values(selectedRoles[cop.title]).every(
+                      {selectedRoles[cleanCopName] &&
+                      Object.values(selectedRoles[cleanCopName]).every(
                         (role) => role
                       )
                         ? "Deselect All"
@@ -136,15 +144,20 @@ const QualifierPageRoles: React.FC = () => {
                   </div>
                   <div>
                     {cop.roles.map((role, index) => {
+                      const cleanRoleName = role.replace(/\s+/g, "_");
+
                       return (
                         <Chip
                           key={index}
                           variant="multi"
                           addClass="mr-4 mb-4"
-                          checked={selectedRoles[cop.title]?.[role] || false}
-                          value={role}
+                          checked={
+                            selectedRoles[cleanCopName]?.[cleanRoleName] ||
+                            false
+                          }
+                          value={role.replace(/_/g, " ")}
                           onClick={() => {
-                            handleRoleSelect(cop.title, role);
+                            handleRoleSelect(cleanCopName, cleanRoleName);
                           }}
                         />
                       );

diff --git a/mkdocs/docs/developer/frontend.md b/mkdocs/docs/developer/frontend.md
@@ -77,47 +77,46 @@ The files that should be manipulated by developers are housed within the `src/`
 - **frontend/src/:** houses all the files for developers to manipulate. The files here are read by webpack before being bundled into the `static/` and `templates/` directories.
   - **assets/:** this is where we store all of our miscellaneous files, such as .jpegs, .svgs, .gifs, etc.
   - **componenents/:** this is where we store the files that generate our components, such as buttons and cards. To learn more about this in-depth, read the [components](#components-directory) section of this guide.
-  - **context/:** contains the logic and data management utilities related to context providers and consumers. Contexts are used for managing global state within our application, providing a way to pass data through the component tree without having to pass props manually at every level.
-    - **COP (Community of Practice) JSON Structure:** The COP data represents different communities of practice within our organization, each consisting of various roles and descriptions. Below is the JSON structure of the COP data for QualifierPageRoles.tsx:
-    ```
-    {
-      COPs: {
-        "UI/UX": [
-          "UI/UX Designer",
-          "UX Researcher",
-          "UX Writing",
-          "UX Practice Lead",
-        ],
-        Engineering: [
-          "Back End Developer",
-          "Front End Developer",
-          "Full Stack Developer",
-          "Engineering Practice Lead",
-        ],
-        "Data Science": [
-          "Data Scientist",
-          "Data Analyst",
-          "Data Engineer",
-          "Data Science Practice Lead",
-        ],
-        "Project/Product Management": [
-          "Product Manager",
-          "Project Manager",
-          "Business Analyst",
-          "Product Owner",
-          "Special Projects Coordinator",
-          "Product Management Practice Lead",
-        ],
-        "DevOps": [
-          "Site Reliability Engineer",
-          "Data Engineer",
-          "Database Architect",
-          "Security Engineer",
-          "DevOps Practice Lead",
-        ],
-      }
+  - **context/:** contains the logic and data management utilities related to context providers and consumers. Contexts are used for managing global state within our application, providing a way to pass data through the component tree without having to pass props manually at every level. - **COP (Community of Practice) JSON Structure:** The COP data represents different communities of practice within our organization, each consisting of various roles and descriptions. Below is the JSON structure of the COP data for QualifierPageRoles.tsx:
+  ```
+  {
+    "COPs": {
+      "UI/UX": [
+        "UI/UX_Designer",
+        "UX_Researcher",
+        "UX_Writing",
+        "UX_Practice_Lead"
+      ],
+      "Engineering": [
+        "Back_End_Developer",
+        "Front_End_Developer",
+        "Full_Stack_Developer",
+        "Engineering_Practice_Lead"
+      ],
+      "Data_Science": [
+        "Data_Scientist",
+        "Data_Analyst",
+        "Data_Engineer",
+        "Data_Science_Practice_Lead"
+      ],
+      "Project/Product_Management": [
+        "Product_Manager",
+        "Project_Manager",
+        "Business_Analyst",
+        "Product_Owner",
+        "Special_Projects_Coordinator",
+        "Product_Management_Practice_Lead"
+      ],
+      "DevOps": [
+        "Site_Reliability_Engineer",
+        "Data_Engineer",
+        "Database_Architect",
+        "Security_Engineer",
+        "DevOps_Practice_Lead"
+      ]
     }
-    ```
+  }
+  ```
   - **pages/:** contains the React files that pools together various components to generate a page.
   - **router/:** contains the routing logic for the project. It uses the [React-Router library](https://reactrouter.com/docs/en/v6).
   - **templates/:** contains HTML files that are then generated into the regular templates directory. To learn more about how webpack bundle our files, read the [webpack](#webpack-configurations) section of this guide.
@@ -147,7 +146,7 @@ The files that should be manipulated by developers are housed within the `src/`
 │       ├── Cards.js
 │       └── Cards.scss
 │   └── <Components>/
-```
+````
 
 _<p style="text-align: center;">A closer look at a theoretical expansion of the components directory</p>_