Fixes: Readme, APIs routes, front end .map bug... (#21)

* fix(front end): fix bugs and issues with map

* fix(docs): updated docs to match

* fix(api): fix breaking APIs because of :id

* makefile: add more commands

Makefile

@@ -13,11 +13,17 @@ generate-diagrams: $(OUT)
 $(SRCDIR)/%.$(OUTPUT_FORMAT): $(SRCDIR)/%.mdd
 	npm run generate-diagram -- --input $< --output $@
 
-run: ## run Pokeshop API on docker compose
+run/pokeshop: ## run Pokeshop API on docker compose
 	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml up
 
-down: ## stop Pokeshop API running on docker compose
+down/pokeshop: ## stop Pokeshop API running on docker compose
 	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml  down
 
 run/tracetests: ## run Trace-based tests on Pokeshop API with Tracetest
-	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml run tracebased-tests
+	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml run tracebased-tests
+
+run: ## run Pokeshop API on Docker Compose and run Trace-based tests with Tracetest
+	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml up
+
+down: ## stop Pokeshop API on Docker Compose and run Trace-based tests with Tracetest
+	docker compose -f docker-compose.yml -f ./docker-compose.stream.yml -f ./tracetest/docker-compose.yml down

api/src/api.ts

@@ -31,11 +31,11 @@ async function startApp() {
     healthcheckHandler, // should be first than getByIdHandler since both paths could collide
     createHandler,
     getHandler,
-    getByIdHandler,
     featuredHandler,
+    searchHandler,
+    getByIdHandler,
     importHandler,
     removeHandler,
-    searchHandler,
     updateHandler,
   ];
 

api/src/handlers/get.handler.ts

@@ -2,7 +2,7 @@ import { jsonResponse } from '@pokemon/middlewares/response';
 import { getPokemonRepository } from '@pokemon/repositories';
 
 const get = async (ctx, next) => {
-  const { skip = '0', take = '20' } = ctx.request.query || {};
+  const { skip = '0', take = '100' } = ctx.request.query || {};
   const query = { skip: +skip, take: +take };
 
   const repository = getPokemonRepository();

docker-compose.yml

@@ -28,6 +28,7 @@ services:
 
   queue:
     image: rabbitmq:3.9
+    restart: unless-stopped
     ports:
       - 5672:5672
       - 15672:15672

docs/installing.md

@@ -2,38 +2,52 @@
 
 ## Run it locally
 
-To try it locally, you can use `docker-compose` to run the API, its Worker, and all its dependencies.
+To try it locally, you can use Docker Compose to run the API, its Worker, and all its dependencies.
 
 ### Requirements
-- [docker](https://www.docker.com/get-started/)
-- [docker-compose](https://docs.docker.com/compose/install/)
+
+1. [Docker](https://www.docker.com/get-started/)
+2. [Docker Compose](https://docs.docker.com/compose/install/)
 
 ### Steps
 
 1. Clone the project
-2. Go to the `api` folder inside the project folder
-3. Execute `docker-compose up`
+2. Go to the `pokeshop` project folder
+3. Execute `make run`
 
 ### Script
 
 ```$
 git clone [email protected]:kubeshop/pokeshop.git
-cd pokeshop/api
-docker-compose up
+cd pokeshop
+make run
 ```
 
+This will start the Pokeshop app on `http://localhost:8081` and Tracetest on `http://localhost:11633`.
+
+The `make run` command will also trigger four **Tests** when started.
+
+![tracetest initial tests](https://res.cloudinary.com/djwdcmwdz/image/upload/v1693846733/docs/localhost_11633__10_px4kqa.png)
+
+As well as one **Test Suite**.
+
+![tracetest initial test suite](https://res.cloudinary.com/djwdcmwdz/image/upload/v1693846736/docs/localhost_11633__11_coms2i.png)
+
+
 ## Run on a Kubernetes cluster
 
 If you want to run this project on a real cluster, we provide a helm chart to install it. This installation doesn't create a jaeger instance for you, so you have to install it manually and set the `JAEGER_HOST` and `JAEGER_PORT` on the `env` section of the file `helm-chart/values.yml`.
 
 ### Requirements
+
 1. [helm](https://helm.sh/)
 
 ### Steps
+
 1. Clone the project
 2. Go to the helm-chart folder inside the project folder
 3. Execute `helm dependency update`
 4. Update `JAEGER_HOST` and `JAEGER_PORT` on the file `helm-chart/values.yml` to reflect your cluster's jaeger instance
 5. Execute `helm install -n demo -f values.yaml --create-namespace demo .`
 
-> :warning: **This will create a namespace called "demo" on your cluster**. If you wish to change it, replace `-n demo` on step 5 with `-n <your-namespace>`.
+> :warning: **This will create a namespace called "demo" on your cluster**. If you wish to change it, replace `-n demo` on step 5 with `-n <your-namespace>`.

web/package.json

@@ -19,6 +19,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "antd": "^4.21.6",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.1",
@@ -56,6 +57,7 @@
     "styled-components": "5"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.197",
     "@types/styled-components": "^5.1.25",
     "openapi-typescript": "^5.4.1"
   },

web/src/components/Header/HeaderMenu.tsx

@@ -1,4 +1,4 @@
-import { DOCUMENTATION_URL, GITHUB_URL } from '../../constants/common';
+import { DOCUMENTATION_URL, GITHUB_URL, DISCORD_URL } from '../../constants/common';
 import * as S from './Header.styled';
 
 interface IProps {
@@ -26,6 +26,14 @@ export const HeaderMenu = ({ pathname }: IProps) => {
             </a>
           ),
         },
+        {
+          key: 'discord',
+          label: (
+            <a href={DISCORD_URL} target="_blank" data-cy="discord-link">
+              Discord
+            </a>
+          ),
+        },
       ]}
     />
   );

web/src/components/PokemonList/PokemonList.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { TPokemon } from '../../types/pokemon';
 import PokemonCard from '../PokemonCard';
 import * as S from './PokemonList.styled';
@@ -16,7 +17,7 @@ const PokemonList = ({ pokemonList, totalCount, title, isFeaturedList = false }:
         {title} - {totalCount}
       </S.TitleText>
       <S.PokemonList>
-        {pokemonList.map(pokemon => (
+        {_.map(pokemonList, pokemon => (
           <PokemonCard key={pokemon.id} pokemon={pokemon} isFeaturedList={isFeaturedList} />
         ))}
       </S.PokemonList>

web/src/constants/common.ts

@@ -1,4 +1,4 @@
-export const DOCUMENTATION_URL = 'https://kubeshop.github.io/tracetest/';
+export const DOCUMENTATION_URL = 'https://docs.tracetest.io';
 export const GITHUB_URL = 'https://github.com/kubeshop/tracetest';
 export const GITHUB_ISSUES_URL = 'https://github.com/kubeshop/tracetest/issues/new/choose';
 export const DISCORD_URL = 'https://discord.gg/6zupCZFQbe';

web/src/hooks/usePokemonCrud.ts

@@ -13,12 +13,14 @@ const usePokemonCrud = () => {
   const createPokemon = useMutation(PokemonGateway.create, {
     onSuccess: () => {
       queryClient.invalidateQueries(CACHE_KEY);
+      queryClient.invalidateQueries(FEATURED_CACHE_KEY);
     },
   });
 
   const importPokemon = useMutation(PokemonGateway.import, {
     onSuccess: () => {
       queryClient.invalidateQueries(CACHE_KEY);
+      queryClient.invalidateQueries(FEATURED_CACHE_KEY);
     },
   });
 

web/src/pages/Home/Home.tsx

@@ -20,10 +20,14 @@ const HomePage = () => {
         <PokemonList
           pokemonList={featuredPokemonList}
           totalCount={featuredPokemonList.length}
-          title="Featured"
+          title="Featured Pokémon"
           isFeaturedList
         />
-        <PokemonList pokemonList={pokemonList} totalCount={totalCount} title="All Pokemons" />
+        <PokemonList
+          pokemonList={pokemonList}
+          totalCount={totalCount}
+          title="All Pokémon"
+        />
       </S.Wrapper>
     </Layout>
   );