Fetch all tools from APi for both main view page and tool directory pages

[Kehinded]

Before submitting your PR for review

• Run npm run eslint to find errors in code syntax/format
• Run npm run eslint:fix to fix all auto-fixable errors in source code and auto-format with prettier
• Ensure you fix any linting errors displayed after running any of the above commands
• Ensure you fix all merge conflicts before sending PR

What does this PR do?

Fixes #issue_number (replace issue_number with the issue number this PR solves)

Summarise the main tasks handled in the pull request

Description of Task to be completed?

Describe (in detail) what the task completed in the pull request does as per the relevant task

How should this be manually tested?

Give bullet point instructions on how to setup the code and test it manually (Assume no prior experience on JS or code)

Any background context you want to provide?

Any pertinent information that should be considered

What is the link to the issue on Github?

Issue #240

Questions:

If something is unclear or you want some questions to be addressed by your peers, mention them here

[hokagedemehin]

Hi kehinde,

You have merge conflicts, please work them out

Also, on the main page where the list of installed tools are shown, the "Add Tools" button is not working, Please work on this as you are the one that wrote the code for this section

Thanks