Client web app for atila.ca, demo.atila.ca and staging.atila.ca
npm install; npm start
npm install @orgName/componentScopeName.componentID
npm config set '@atila:registry' https://node.bit.dev
npm i @atila/web-components-library.ui.crypto-payment-form
or yarn add @atila/web-components-library.ui.crypto-payment-form
Taken from PR #8
Go to src/redux/reducers/data
and add a data item to a reducer in the respective .js
file
If you are creating a new reducer you will also need to add the reducer to index.js
in src/redux/reducers/data
For adding actions:
Go to src/redux/actions/<yourActionFile>.js
and add an action that will trigger that data item
Then you can reference the redux state from mapStateToProps()
and state.data.user.loggedInUserProfile
If you are adding an action, you can do: mapDispatchToProps()
npm test
To test a specific file: npm test FileName
for example: npm test Register
This client-web app is connected to multiple external APIs
Environment.apiUrl
: atila-django: main serverEnvironment.apiUrlNotion
: notion-api-worker: get Wiki content from NotionIn order to use these APIs you can either follow the instructions in the linked repos to start the service, use staging APIs instead of localhost (make sure to uncomment before pushing to avoid failed tests in CI) or mock API data (see next section).
If you can't or don't want to use the actual backend API you can mock the responses.
Here are two video tutorials we made specifically on how to Mock API Data in this project.
Steps:
Set ATILA_MOCK_API_CALLS
to true in local storage.
Get the JSON response of the data you want to mock.
Copy that JSON response and put it into src/services/mocks/{Object_name}/{File_name}.json
for example if you wanted to make a scholarship list response you would put it into src/services/mocks/Scholarship/ScholarshipsPreview1.json
you might have to make a new directory if the object name you want to use doesn't exist.
Go to MockAPI.initializeMocks()
in src/services/mocks/MockAPI.js
to add the instructions for how to mock your new data.
We use axios-mock-adapter for our API mocking, see their documentation for how to do more advanced mocking such as returning a certain response based on the request parameters.
Note: You can only mock api calls in the dev environment.
We use Storybook to develop components independently from business logic, see Adding Storybook to our Web App Development Process
To run Storybook:
node_modules
and package-lock.json
NOT package.json
then run npm install
npm run storybook
Error: EEXIST: file already exists, mkdir '/Users/admin/Desktop/tomiwa/codeproj/atila-code/atila-client-web-app/node_modules/.cache/ts-docgen'
npm run storybook:clear-cache
npm start
To add a new component to Storybook: create it in src/stories/{ComponentName}.stories.js
Follow the example in src/stories/ContentCard.stories.js
and create a seperate story for each scenario of that component
NOTE: if there is an error in one of your components, instead of storybook crashing, the error is displayed in the console so make sure to inpect console to see the error
Learn more here:
This project deploys to 3 environments using Netlify
master
deploys to atila.ca
demo
deploys to demo.atila.ca
All other branches that are not master
or demo
deploy to staging.atila.ca
To push to demo
branch and trigger a deploy to demo.atla.ca
from CI run: git push origin <local_branch_name>:demo
The environment variables for these domains are in circleci: https://app.circleci.com/settings/project/github/ademidun/atila-client-web-app/environment-variables