This is the Challenge application for AnyMind, developed by Victor Shinobi Toshiki Gakiya Cruz.
- React.js
- Jest
- TypeScript
- GraphQl
- Apollo/Client
- Styled-components
- Istanbul-badges-readme
- React-icons
- Clone the repository
git clone https://github.com/shinobig/anymind-frontend-test.git
- Install npm packages in the root directory
npm install
- Run the project
This project uses the default configuration from the NPX react project generator
npm start
Please note that this project was created with the node version 18.1.0, on node version 16.14.2, older versions might not work.
If you see the following message, it means that the application is up and running in http://localhost:3000/ (The application should open a browser tab automatically)
No issues found.
This project matches the following points (Described in the test PDF document):
✔️ Users can talk with eachother.
✔️ User can choose from three predefined users
✔️ User can change the channel
✔️ Whenever a channel change, it displays the latest message
✔️ Whenever the HTML petition returns an error, an error message is displayed and the option to resend the message
✔️ When the user reopen the page, the text editor maintains the text
✔️ Suggested better UI
The application handles 3 main properties in the context API, the channel Id, the selected user and the chat itself. That way, it is easier to manage verification and sending new messages.
All of the components in this project are functional components.
- Please note that this application is not optimized for tablet or mobile devices.
- The Read More button will be active when there are 10 or more messages displayed.
- There is warning related to the installation of some of the modules in the Apollo/Client, please note that this does not affect on the application at all.
src
├── App.tsx
├── components
│ ├── ChatHolder
│ │ ├── ChatHeader
│ │ │ └── ChatHeader.tsx
│ │ ├── ChatHolder.tsx
│ │ ├── ChatWindow
│ │ │ └── ChatWindow.tsx
│ │ ├── MessageHolder
│ │ │ ├── MessageBubble.tsx
│ │ │ ├── MessageHolder.tsx
│ │ │ ├── MessageStatus.tsx
│ │ │ └── UserIcon.tsx
│ │ └── TextBox
│ │ └── Textbox.tsx
│ ├── Header
│ │ └── Header.tsx
│ ├── Menu
│ │ ├── ChannelButton.tsx
│ │ └── Menu.tsx
│ ├── SharedStyles
│ │ └── GeneralButton.ts
│ └── Spinner
│ └── Spinner.tsx
├── context
│ └── chatContext.ts
├── graphql
│ ├── mutations.ts
│ └── queries.ts
├── Hooks
│ └── Hooks.ts
├── Icons
│ ├── JoiseIcon.svg
│ ├── RusselIcon.svg
│ └── SamIcon.svg
├── index.css
├── index.tsx
├── interfaces
│ └── interfaces.ts
├── logo.svg
├── react-app-env.d.ts
├── setupTests.ts
├── __test__
│ ├── App.test.tsx
│ ├── components
│ │ ├── ChatHolder.test.tsx
│ │ ├── Menu.test.tsx
│ │ ├── MessageHolder.test.tsx
│ │ ├── MockAppComponent.tsx
│ │ └── TextBox.test.tsx
│ ├── mockQueries.ts
│ └── testUtils
│ └── icons.test.tsx
└── utils
├── IconSelector.tsx
├── memoizeInput.ts
├── postMessage.ts
└── timeUtils.ts
In order to run the tests and create a report document, run the following command in the root directory:
npm run test
The report document will be stored in the following directory as an HTML file.
__root__/coverage/lcov-report/index.html
Statements | Branches | Functions | Lines |
---|---|---|---|