refactor: Refactor code structure for improved readability and maintainability (#1172)

Author: AvivAbachi

.all-contributorsrc

@@ -337,4 +337,4 @@
       ]
     }
   ]
-}
+}

.github/dependabot.yml

@@ -5,8 +5,8 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
     open-pull-requests-limit: 3

.github/pull_request_template.md

@@ -1,5 +1,7 @@
 # Description
+
 <Please describe the suggested changes>
 
 ## screenshots
-<paste here>
+
+<paste here>

.gitpod.yml

@@ -1,5 +1,3 @@
 tasks:
   - init: npm install && npm run build
     command: npm run start
-
-

.prettierignore

@@ -1,2 +1,2 @@
 **/generated/*
-README.md
+.all-contributorsrc

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-standard-scss",
+  "extends": ["stylelint-config-standard-scss", "stylelint-prettier/recommended"],
   "ignoreFiles": [
     "node_modules/**/*",
     "dist/**/*",

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "eslint.experimental.useFlatConfig": true
-}
+  "eslint.experimental.useFlatConfig": true
+}

CHANGELOG.md

@@ -26,8 +26,8 @@ Look at the project and if you see some points which can be improved (it can be
 
 For start working on the project you can use any of options from the below:
 
--   You can set up project locally. This is **highly recommended** for regular/repeat contributions. This setup allows you to work and test your changes.
--   Use Gitpod, a free online dev environment. Clicking the link below will start a ready-to-code dev environment in your browser. It only takes a few minutes.
+- You can set up project locally. This is **highly recommended** for regular/repeat contributions. This setup allows you to work and test your changes.
+- Use Gitpod, a free online dev environment. Clicking the link below will start a ready-to-code dev environment in your browser. It only takes a few minutes.
 
 Click [here](https://gitpod.io/#https://github.com/hasadna/open-bus-map-search) to
 open project in Gitpod
@@ -42,48 +42,48 @@ Follow these steps to run the project on your local machine:
 2. **Clone the Repository:**
    Clone the repository to your local machine. You can do this by running the following command in your terminal:
 
-    ```bash
-    git clone https://github.com/hasadna/open-bus-map-search.git
-    ```
+   ```bash
+   git clone https://github.com/hasadna/open-bus-map-search.git
+   ```
 
 3. **Navigate to the Project Directory:**
    Once the repository is cloned, navigate to the project directory by running:
 
-    ```bash
-    cd open-bus-map-search
-    ```
+   ```bash
+   cd open-bus-map-search
+   ```
 
 4. **Install Dependencies:**
    The project uses npm to manage dependencies. Once Node is installed, you can install the project dependencies by running:
-    ```bash
-    npm install
-    ```
+   ```bash
+   npm install
+   ```
 5. **Run the Project:**
    After all dependencies are installed, you can start the project by running:
-    ```bash
-    npm start
-    ```
-    The project should now be running on your local machine. Open your web browser and navigate to http://localhost:3000 to view the project.
+   ```bash
+   npm start
+   ```
+   The project should now be running on your local machine. Open your web browser and navigate to http://localhost:3000 to view the project.
 
 # How to open the PR
 
--   If you're new to GitHub, here is a [tutorial describing Pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
--   create a branch
--   branch better to be named after issue (or feature) it tries so solve, e.g. `feat/add-close-button-to-modal`
--   Please make sure that the project works on your computer
--   do changes and then - do commit (`git commit -m "feat: add some feature"`)
--   push the branch to remote repo (`git push`)
--   go to the repo and create a pr (by pressing `create a pr` button)
--   tag one of the maintainers as reviewers
+- If you're new to GitHub, here is a [tutorial describing Pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
+- create a branch
+- branch better to be named after issue (or feature) it tries so solve, e.g. `feat/add-close-button-to-modal`
+- Please make sure that the project works on your computer
+- do changes and then - do commit (`git commit -m "feat: add some feature"`)
+- push the branch to remote repo (`git push`)
+- go to the repo and create a pr (by pressing `create a pr` button)
+- tag one of the maintainers as reviewers
 
 # Commit message convention
 
--   commit messages better to be short and explain clearly what the change is about
--   `fix` change that tries to fix some bug, e.g. `fix: make close button visible at mobile`
--   `feat` change that add some new functionality, e.g. `feat: add a modal component`
--   `docs` change that adds some documentation, e.g. `docs: add project description at readme`
--   `refactor` change that makes the code better, e.g. `refactor: split App component to subcomponents`
--   `chore` all the other things `chore: upgrade react package to new 18 version`
+- commit messages better to be short and explain clearly what the change is about
+- `fix` change that tries to fix some bug, e.g. `fix: make close button visible at mobile`
+- `feat` change that add some new functionality, e.g. `feat: add a modal component`
+- `docs` change that adds some documentation, e.g. `docs: add project description at readme`
+- `refactor` change that makes the code better, e.g. `refactor: split App component to subcomponents`
+- `chore` all the other things `chore: upgrade react package to new 18 version`
 
 ## testing the project:
 
@@ -97,35 +97,35 @@ Follow these steps to run the project on your local machine:
 | `npm run test:e2e:ui`  | Run the e2e (playwright) tests with user interface.             |
 | `npm run test`         | Run all the kind of tests.                                      |
 
--   additional helpful flags - https://playwright.dev/docs/test-cli
+- additional helpful flags - https://playwright.dev/docs/test-cli
 
 ## useful resources:
 
--   [the design file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?type=design&node-id=0-1&mode=design&t=Dh8lI3EJ37unxvoe-0)
--   [data model schema](https://github.com/hasadna/open-bus-stride-db/blob/main/DATA_MODEL.md)
--   [API documentation and examples (swagger)](https://open-bus-stride-api.hasadna.org.il/docs)
--   [the deployed website](https://open-bus-map-search.hasadna.org.il/dashboard)
+- [the design file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?type=design&node-id=0-1&mode=design&t=Dh8lI3EJ37unxvoe-0)
+- [data model schema](https://github.com/hasadna/open-bus-stride-db/blob/main/DATA_MODEL.md)
+- [API documentation and examples (swagger)](https://open-bus-stride-api.hasadna.org.il/docs)
+- [the deployed website](https://open-bus-map-search.hasadna.org.il/dashboard)
 
 ## Page Video Descriptions
 
 This section provides video tutorials for some of the key pages in this project.
 
 **Dashboard & Maps Pages**
 
--   **Video:** [How to Use the Dashboard & Maps Pages](https://www.youtube.com/watch?v=MJZrIxjQEH8&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&t=17s)
+- **Video:** [How to Use the Dashboard & Maps Pages](https://www.youtube.com/watch?v=MJZrIxjQEH8&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&t=17s)
 
 **Bug Reporting**
 
--   **Video:** [How to Report Bugs](https://www.youtube.com/watch?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T)
+- **Video:** [How to Report Bugs](https://www.youtube.com/watch?v=F6sD9Bz4Xj0&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T)
 
 ## Troubleshooting
 
 we're here to help! feel free to join our [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ)
 
 # Related Repositories
 
--   the API client
--   the data API
+- the API client
+- the data API
 
 ## API client
 
@@ -144,7 +144,7 @@ https://open-bus-stride-api.hasadna.org.il/docs
 
 ### Why do I get a red `x` commit status?
 
--   lint - you have lint errors. fix them by running `npm run lint:fix`
--   tests - you have test errors. see them by running `npm run test:unit:ci`
--   build - you have build errors. see them by running `npm run build`
--   pr title validation - you have an invalid pr title. please edit the title of your PR with conventional commit formatting. examples: `feat: add new feature`, `fix: fix a bug` or `docs: update README.md`
+- lint - you have lint errors. fix them by running `npm run lint:fix`
+- tests - you have test errors. see them by running `npm run test:unit:ci`
+- build - you have build errors. see them by running `npm run build`
+- pr title validation - you have an invalid pr title. please edit the title of your PR with conventional commit formatting. examples: `feat: add new feature`, `fix: fix a bug` or `docs: update README.md`

CONTRIBUTING.md

@@ -1,61 +1,69 @@
 # Open bus ranking app
 
 ## Welcome!
+
 This is the official repository of the open bus (תחב"צ פתוחה / דאטאבוס) project - also known as "ShameBus".
 [link to the project](https://open-bus-map-search.hasadna.org.il/dashboard)
 
 Please feel free to submit pull requests and contribute to the project.
 For more details about contributing, see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
 
 # Running the project locally
+
 An explanation how to run the project locally you can [read here](CONTRIBUTING.md#running-the-project-on-a-local-environment).
 
 ## View video (Hebrew language):
-### The video will explain you how to contribute to the project:   
+
+### The video will explain you how to contribute to the project:
+
 [![video (hebrew) about the project](https://img.youtube.com/vi/6H6jkJCVhgk/0.jpg)](https://www.youtube.com/watch?v=6H6jkJCVhgk)
 
 # Easter eggs
+
 We've hidden a couple of fun surprises in our web app, just for you. Discovering them is as easy as typing a few magic words on your keyboard.
 
 ## How to Find the Easter Eggs
+
 1. Open our [web app](https://open-bus-map-search.hasadna.org.il/dashboard)
 2. **Unleash the Magic Words:**
    To reveal the hidden gems, use your keyboard to type the following commands:
-
    - **Type "storybook":**
      Watch the magic unfold as you type "storybook" on your keyboard. You might just stumble upon our Storybook, a treasure trove of UI components showcasing the beauty and functionality of our app.
    - **Type "geek":**
      To get some experimental charts with some additional data and aggregation
 
-
 ## deployments
 
 This app is created by the volunteers of [Public Knowledge Workshop](https://www.hasadna.org.il/)
 
 ### submitting pull requests
+
 Thanks for your willingness to invest time and help us improve!
+
 1. If you're new to GitHub, here is a [tutorial describing Pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). if you're familiarized with Merge Requests - it's the same concept.
 2. Please make sure that the project works on your computer
 3. Please tag one of the maintainers as reviewers
-we're here to help! feel free to join our [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ) 
+   we're here to help! feel free to join our [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ)
 
 ## Links for developers
-* [figma file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?node-id=0%3A1&t=EJCQpeg5zSbVXLUx-0)
-* [data model schema](https://github.com/hasadna/open-bus-stride-db/blob/main/DATA_MODEL.md)
-* [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ)
-* [Swagger](https://open-bus-stride-api.hasadna.org.il/docs)
-* [Production](https://open-bus-map-search.hasadna.org.il/dashboard)
 
-## Related Repositories 
+- [figma file](https://www.figma.com/file/Plw8Uuu6U96CcX5tJyRMoW/Public-Transportation-visual-informaiton?node-id=0%3A1&t=EJCQpeg5zSbVXLUx-0)
+- [data model schema](https://github.com/hasadna/open-bus-stride-db/blob/main/DATA_MODEL.md)
+- [Slack channel](https://join.slack.com/t/hasadna/shared_invite/zt-21qipktl1-7yF4FYJVxAqXl0wE4DlMKQ)
+- [Swagger](https://open-bus-stride-api.hasadna.org.il/docs)
+- [Production](https://open-bus-map-search.hasadna.org.il/dashboard)
+
+## Related Repositories
+
 - the API client
 - the data API
 
 ### API client
+
 The client is a JS library that provides methods and data models. for example:  
-https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4   
+https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4  
 [link to repo](https://github.com/iliakap/open-bus-stride-client).
 
-
 ## Contributors
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
@@ -116,7 +124,8 @@ https://github.com/hasadna/open-bus-map-search/blob/main/src/model/busStop.ts#L4
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ### data API
+
 The API is backend code that provides us with data and aggregations from the DB
-You can see it's endpoints here:   
-https://open-bus-stride-api.hasadna.org.il/docs     
-[link to repo](https://github.com/hasadna/open-bus-stride-api).
+You can see it's endpoints here:  
+https://open-bus-stride-api.hasadna.org.il/docs  
+[link to repo](https://github.com/hasadna/open-bus-stride-api).

README.md

@@ -1,7 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    ["@babel/preset-react", { "runtime": "automatic" }]
-  ],
+  "presets": ["@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }]],
   "plugins": ["babel-plugin-transform-import-meta"]
 }

babel.config.json

@@ -24,10 +24,9 @@ export default [
       'test-results',
       'playwright-report',
       'storybook-static',
+      'public',
       '.nx',
-      'jest.config.ts',
       '**/*.js',
-      'public',
       'applitools.config.cjs',
     ],
   },
@@ -41,7 +40,10 @@ export default [
     },
   },
   {
-    settings: { 'import/resolver': { typescript: true }, react: { version: 'detect' } },
+    settings: {
+      'import/resolver': { typescript: true },
+      react: { version: 'detect' },
+    },
     languageOptions: {
       parser: typescriptEslintParser,
       parserOptions: {
@@ -54,34 +56,23 @@ export default [
   },
   {
     rules: {
-      ...typescriptEslintEslintPlugin.configs.recommended.rules,
-      ...typescriptEslintEslintPlugin.configs['recommended-requiring-type-checking'].rules,
-      ...eslintPluginReact.configs.recommended.rules,
+      // React
       'react-hooks/rules-of-hooks': 'error',
       'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
       'react/react-in-jsx-scope': 'off',
+      // TypeScript
       '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/no-unsafe-call': 'off',
       '@typescript-eslint/no-unsafe-member-access': 'off',
       '@typescript-eslint/no-floating-promises': 'off',
       '@typescript-eslint/restrict-template-expressions': 'off',
       '@typescript-eslint/no-base-to-string': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
+      // Import
       'import/no-unused-modules': 'error',
       'import/order': 'error',
-      'prettier/prettier': [
-        'error',
-        {
-          semi: false,
-          tabWidth: 2,
-          printWidth: 100,
-          singleQuote: true,
-          trailingComma: 'all',
-          bracketSameLine: true,
-          jsxSingleQuote: false,
-          endOfLine: 'auto',
-        },
-      ],
+      // Prettier
+      'prettier/prettier': 'error',
     },
   },
 ]