pagination and placeholder fix - 2117

.coderabbit.yaml

@@ -1,8 +1,8 @@
 # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
-language: "en-US"
+language: 'en-US'
 early_access: false
 reviews:
-  profile: "chill"
+  profile: 'chill'
   request_changes_workflow: true
   high_level_summary: true
   poem: true

.prettierrc

@@ -1,4 +1,4 @@
 {
-    "singleQuote": true,
-    "endOfLine": "auto"
-}
+  "singleQuote": true,
+  "endOfLine": "auto"
+}

CODE_STYLE.md

@@ -25,7 +25,7 @@ code style should not be changed and must be followed.
 
 - Typescript
 
-- React.js 
+- React.js
 
 - CSS module
 
@@ -43,10 +43,9 @@ code style should not be changed and must be followed.
 
 - Should make use of React hooks where appropriate
 
-
 ## Code Style and Naming Conventions
 
-- All React components *must* be written in PascalCase, with their file names, and associated CSS modules being written in PascalCase
+- All React components _must_ be written in PascalCase, with their file names, and associated CSS modules being written in PascalCase
 
 - All other files may follow the camelCase naming convention
 
@@ -55,13 +54,15 @@ code style should not be changed and must be followed.
 - Use of custom classes directly are refrained, use of modular css is encouraged along with bootstrap classes
 
 **Wrong way ❌**
+
 ```
 <div className="myCustomClass">...</div>
 <div className={`${styles.myCustomClass1} myCustomClass2`}>...</div> // No using personal custom classes directly, here you should  not use myCustomClass2
 .container{...} // No changing the property of already existing classes reserved by boostrap directly in css files
 ```
 
-**Correct ways ✅** 
+**Correct ways ✅**
+
 ```
 <div className={styles.myCustomClass}>...</div> // Use custom class defined in modular css file
 <div className={`${styles.myCustomClass} relative bg-danger`}>...</div> // Use classes already defined in Bootstrap
@@ -74,7 +75,8 @@ code style should not be changed and must be followed.
 
 **Wrong way ❌**
 
-Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions. 
+Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions.
+
 ```
     <div class="dropdown">
         <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -87,11 +89,11 @@ Using plain Bootstrap classes and attributes without leveraging the React-Bootst
         </ul>
     </div>
 ```
-
 
 **Correct way ✅**
 
 It's recommended to use the React-Bootstrap library for seamless integration of Bootstrap components in a React application.
+
 ```
 import Dropdown from 'react-bootstrap/Dropdown';
 
@@ -114,29 +116,29 @@ function BasicExample() {
 export default BasicExample;
 ```
 
+## Test and Code Linting
 
-## Test and Code Linting 
-
-Unit tests must be written for *all* code submissions to the repository, 
+Unit tests must be written for _all_ code submissions to the repository,
 the code submitted must also be linted ESLint and formatted with Prettier.
 
 ## Folder/Directory Structure
 
 ### Sub Directories of `src`
 
 `assets` - This houses all of the static assets used in the project
-  - `css` - This houses all of the css files used in the project
-  - `images` - This houses all of the images used in the project
-  - `scss` - This houses all of the scss files used in the project
-    - `components -` All Sass files for components
-    - `content -` All Sass files for content
-    - `forms -` All Sass files for forms
-    - `_talawa.scss` - Partial Sass file for Talawa
-    - `_utilities.scss` - Partial Sass file for utilities
-    - `_variables.scss` - Partial Sass file for variables
-    - `app.scss` - Main Sass file for the app, imports all other partial Sass files
-
-`components`  - The directory for base components that will be used in the various views/screens
+
+- `css` - This houses all of the css files used in the project
+- `images` - This houses all of the images used in the project
+- `scss` - This houses all of the scss files used in the project
+  - `components -` All Sass files for components
+  - `content -` All Sass files for content
+  - `forms -` All Sass files for forms
+  - `_talawa.scss` - Partial Sass file for Talawa
+  - `_utilities.scss` - Partial Sass file for utilities
+  - `_variables.scss` - Partial Sass file for variables
+  - `app.scss` - Main Sass file for the app, imports all other partial Sass files
+
+`components` - The directory for base components that will be used in the various views/screens
 
 `Constant` - This houses all of the constants used in the project
 
@@ -148,7 +150,6 @@ the code submitted must also be linted ESLint and formatted with Prettier.
 
 `utils` - This holds the utility functions that do not fall into any of the other categories
 
-
 ## Imports
 
 Absolute imports have been set up for the project, so imports may be done directly from `src`.
@@ -161,13 +162,12 @@ import Navbar from 'components/Navbar/Navbar';
 
 Imports should be grouped in the following order:
 
-  - React imports
-  - Third party imports
-  - Local imports
-
+- React imports
+- Third party imports
+- Local imports
 
 If there is more than one import from a single library, they should be grouped together
-  
+
 Example - If there is single import from a library, both ways will work
 
 ```
@@ -190,38 +190,40 @@ Follow this [link](https://getbootstrap.com/docs/5.3/customize/sass/) to learn h
 **File Structure**
 
 - `src/assets/scss/components/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
-  - **_accordion.scss**
-  - **_alert.scss**
-  - **_badge.scss**
-  - **_breadcrumb.scss**
-  - **_buttons.scss**
-  - **_card.scss**
-  - **_carousel.scss**
-  - **_close.scss**
-  - **_dropdown.scss**
-  - **_list-group.scss**
-  - **_modal.scss**
-  - **_nav.scss**
-  - **_navbar.scss**
-  - **_offcanvas.scss**
-  - **_pagination.scss**
-  - **_placeholder.scss**
-  - **_progress.scss**
-  - **_spinners.scss**
+
+  - **\_accordion.scss**
+  - **\_alert.scss**
+  - **\_badge.scss**
+  - **\_breadcrumb.scss**
+  - **\_buttons.scss**
+  - **\_card.scss**
+  - **\_carousel.scss**
+  - **\_close.scss**
+  - **\_dropdown.scss**
+  - **\_list-group.scss**
+  - **\_modal.scss**
+  - **\_nav.scss**
+  - **\_navbar.scss**
+  - **\_offcanvas.scss**
+  - **\_pagination.scss**
+  - **\_placeholder.scss**
+  - **\_progress.scss**
+  - **\_spinners.scss**
 
 - `src/assets/scss/content/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
-  - **_table.scss**
-  - **_typography.scss**
 
+  - **\_table.scss**
+  - **\_typography.scss**
 
 - `src/assets/scss/forms/{'{partialFile}'}.scss` - where the {'{partialFile}'} are the following files
-  - **_check-radios.scss**
-  - **_floating-label.scss**
-  - **_form-control.scss**
-  - **_input-group.scss**
-  - **_range.scss**
-  - **_select.scss**
-  - **_validation.scss**
+
+  - **\_check-radios.scss**
+  - **\_floating-label.scss**
+  - **\_form-control.scss**
+  - **\_input-group.scss**
+  - **\_range.scss**
+  - **\_select.scss**
+  - **\_validation.scss**
 
 - `src/assets/scss/_utilities.scss` - The utility API is a Sass-based tool to generate utility classes.
 - `src/assets/scss/_variables.scss` - This file contains all the Sass variables used in the project
@@ -245,9 +247,11 @@ To watch the Sass file for changes and compile it automatically, run the followi
 ```
 npx sass src/assets/scss/app.scss src/assets/css/app.css --watch
 ```
+
 The `src/assets/css/app.css.map` file associates the generated CSS code with the original SCSS code. It allows you to see your SCSS code in the browser's developer tools for debugging.
 
 To skip generating the map file, run
+
 ```
 npx sass --no-source-map src/assets/scss/app.scss src/assets/css/app.css
 ```

DOCUMENTATION.md

@@ -1,4 +1,5 @@
 # Documentation
+
 Welcome to our documentation guide. Here are some useful tips you need to know!
 
 # Table of Contents
@@ -15,18 +16,21 @@ Welcome to our documentation guide. Here are some useful tips you need to know!
 
 Our documentation can be found in ONLY TWO PLACES:
 
-1. ***Inline within the repository's code files***: We have automated processes to extract this information and place it in our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/). 
-1. ***In our `talawa-docs` repository***: Our [Talawa-Docs](https://github.com/PalisadoesFoundation/talawa-docs) repository contains user edited markdown files that are automatically integrated into our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/) using the [Docusaurus](https://docusaurus.io/) package.
+1. **_Inline within the repository's code files_**: We have automated processes to extract this information and place it in our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/).
+1. **_In our `talawa-docs` repository_**: Our [Talawa-Docs](https://github.com/PalisadoesFoundation/talawa-docs) repository contains user edited markdown files that are automatically integrated into our Talawa documentation site [docs.talawa.io](https://docs.talawa.io/) using the [Docusaurus](https://docusaurus.io/) package.
 
 ## How to use Docusaurus
+
 The process in easy:
+
 1. Install `talawa-docs` on your system
-1. Launch docusaurus on your system according to the `talawa-docs`documentation. 
-    - A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
+1. Launch docusaurus on your system according to the `talawa-docs`documentation.
+   - A local version of `docs.talawa.io` should automatically launched in your browser at http://localhost:3000/
 1. Add/modify the markdown documents to the `docs/` directory of the `talawa-docs` repository
 1. If adding a file, then you will also need to edit the `sidebars.js` which is used to generate the [docs.talawa.io](https://docs.talawa.io/) menus.
-1. Always monitor the local website in your brower to make sure the changes are acceptable. 
-    - You'll be able to see errors that you can use for troubleshooting in the CLI window you used to launch the local website.
+1. Always monitor the local website in your brower to make sure the changes are acceptable.
+   - You'll be able to see errors that you can use for troubleshooting in the CLI window you used to launch the local website.
 
 ## Other information
-***PLEASE*** do not add markdown files in this repository. Add them to `talawa-docs`!
+
+**_PLEASE_** do not add markdown files in this repository. Add them to `talawa-docs`!

INSTALLATION.md

@@ -65,31 +65,34 @@ First you need a local copy of `talawa-admin`. Run the following command in the
 
 1. On your computer, navigate to the folder where you want to setup the repository.
 2. Open a `cmd` (Windows) or `terminal` (Linux or MacOS) session in this folder.
-    1. An easy way to do this is to right-click and choose appropriate option based on your OS.
+   1. An easy way to do this is to right-click and choose appropriate option based on your OS.
 3. **For Our Open Source Contributor Software Developers:**
-    1. Next, we'll fork and clone the `talawa-admin` repository.
-    1. In your web browser, navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](https://github.com/PalisadoesFoundation/talawa-admin/) and click on the `fork` button. It is placed on the right corner opposite the repository name `PalisadoesFoundation/talawa-admin`.
 
-       ![Image with fork](public/markdown/images/install1.png)
+   1. Next, we'll fork and clone the `talawa-admin` repository.
+   1. In your web browser, navigate to [https://github.com/PalisadoesFoundation/talawa-admin/](https://github.com/PalisadoesFoundation/talawa-admin/) and click on the `fork` button. It is placed on the right corner opposite the repository name `PalisadoesFoundation/talawa-admin`.
 
-    2. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+      ![Image with fork](public/markdown/images/install1.png)
 
-       ![Image of user's clone](public/markdown/images/install2.png)
+   1. You should now see `talawa-admin` under your repositories. It will be marked as forked from `PalisadoesFoundation/talawa-admin`
+
+      ![Image of user's clone](public/markdown/images/install2.png)
+
+   1. Clone the repository to your local computer (replacing the values in `{{}}`):
+      ```bash
+      $ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
+      cd talawa-admin
+      git checkout develop
+      ```
+      - **Note:** Make sure to check out the `develop` branch
+   1. You now have a local copy of the code files. For more detailed instructions on contributing code, and managing the versions of this repository with `git`, checkout our [CONTRIBUTING.md](./CONTRIBUTING.md) file.
 
-    3. Clone the repository to your local computer (replacing the values in `{{}}`):
-        ```bash
-        $ git clone https://github.com/{{YOUR GITHUB USERNAME}}/talawa-admin.git
-        cd talawa-admin
-        git checkout develop
-        ```
-        - **Note:** Make sure to check out the `develop` branch
-    4. You now have a local copy of the code files. For more detailed instructions on contributing code, and managing the versions of this repository with `git`, checkout our [CONTRIBUTING.md](./CONTRIBUTING.md) file.
 4. **Talawa Administrators:**
-      1. Clone the repository to your local computer using this command:
 
-          ```bash
-          $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
-          ```
+   1. Clone the repository to your local computer using this command:
+
+      ```bash
+      $ git clone https://github.com/PalisadoesFoundation/talawa-admin.git
+      ```
 
 ## Install node.js
 
@@ -98,26 +101,26 @@ Best way to install and manage `node.js` is making use of node version managers.
 Follow these steps to install the `node.js` packages in Windows, Linux and MacOS.
 
 1. For Windows:
-    1. first install `node.js` from their website at https://nodejs.org
-        1. When installing, don't click the option to install the `necessary tools`. These are not needed in our case. 
-    2. then install [fnm](https://github.com/Schniz/fnm). Please read all the steps in this section first.
-        1. All the commands listed on this page will need to be run in a Windows terminal session in the `talawa-admin` directory.
-        2. Install `fnm` using the `winget` option listed on the page.
-        3. Setup `fnm` to automatically set the version of `node.js` to the version required for the repository using these steps:
-            1. First, refer to the `fnm` web page's section on `Shell Setup` recommendations.
-            2. Open a `Windows PowerShell` terminal window
-            3. Run the recommended `Windows PowerShell` command to open `notepad`.
-            4. Paste the recommended string into `notepad`
-            5. Save the document.
-            6. Exit `notepad`
-            7. Exit PowerShell
-            8. This will ensure that you are always using the correct version of `node.js`
+   1. first install `node.js` from their website at https://nodejs.org
+      1. When installing, don't click the option to install the `necessary tools`. These are not needed in our case.
+   2. then install [fnm](https://github.com/Schniz/fnm). Please read all the steps in this section first.
+      1. All the commands listed on this page will need to be run in a Windows terminal session in the `talawa-admin` directory.
+      2. Install `fnm` using the `winget` option listed on the page.
+      3. Setup `fnm` to automatically set the version of `node.js` to the version required for the repository using these steps:
+         1. First, refer to the `fnm` web page's section on `Shell Setup` recommendations.
+         2. Open a `Windows PowerShell` terminal window
+         3. Run the recommended `Windows PowerShell` command to open `notepad`.
+         4. Paste the recommended string into `notepad`
+         5. Save the document.
+         6. Exit `notepad`
+         7. Exit PowerShell
+         8. This will ensure that you are always using the correct version of `node.js`
 2. For Linux and MacOS, use the terminal window.
    1. install `node.js`
    2. then install `fnm`
-         1. Refer to the installation page's section on the `Shell Setup` recommendations.
-         2. Run the respective recommended commands to setup your node environment
-         3. This will ensure that you are always using the correct version of `node.js`
+      1. Refer to the installation page's section on the `Shell Setup` recommendations.
+      2. Run the respective recommended commands to setup your node environment
+      3. This will ensure that you are always using the correct version of `node.js`
 
 ## Install TypeScript
 
@@ -196,7 +199,7 @@ If you are trying to access Talawa Admin from a remote host with the API URL con
 REACT_APP_TALAWA_URL="http://YOUR-REMOTE-ADDRESS:4000/graphql/"
 ```
 
-For additional details, please refer  the `How to Access the Talawa-API URL` section in the INSTALLATION.md file found in the [Talawa-API repo](https://github.com/PalisadoesFoundation/talawa-api).
+For additional details, please refer the `How to Access the Talawa-API URL` section in the INSTALLATION.md file found in the [Talawa-API repo](https://github.com/PalisadoesFoundation/talawa-api).
 
 ## Setting up REACT_APP_RECAPTCHA_SITE_KEY in .env file