universaldot / front-end Goto Github PK

OnHold for substrate development first

Currently, we are displaying all the decimals in the balance. In substrate, there is a way to properly format the balance.

See the issue below on how to do that.

https://stackoverflow.com/questions/64210673/how-do-you-format-balances-with-the-polkadot-js-api

@slaveatanasov FYI: We are currently pulling the balances from the profile, but we will probably refactor so that you can pull it from based on AccountID as in the issue below. The reason for this is that we don't want to duplicate data.

Please use the following Avatars within the application:

https://www.flaticon.com/packs/spring-avatars-12

There are 60 icons that can be randomly assigned to users.

We must also attribute credit to the author for now: We have to include this in the app somewhere.

This is the info they are providing regarding attribution:

Copy this link and paste it wherever it's visible, close to where you’re using the resource. If that's not possible, place it at the footer of your website, blog or newsletter, or in the credits section.

<a href="https://www.flaticon.com/free-icons/person" title="person icons">Person icons created by Freepik - Flaticon</a>

So maybe we can create Credits Section somewhere in the footer and add credits where its due.

• Remove the events from the task page, and add the events to the Notification bell on the top right corner.
• Adding tasks to the organization is not working. They are added to OrganizationalTasks, but they are not showing up in front end.
• Create a button in MyOrganization to create new organizations.
• Members are not displayed. We query applicantsToOrganization with parameter vision
• Check why changes to DB for some actions don't show up immediately in App via web sockets, while for some actions do. For ex. createOrganization immediately shows the new org. in view, and updateOrganization does after a page refresh.

The calendar is used by freelancers to track their work in progress.

For now, in the initial iteration of the calendar, we can read the deadlines for the task that each user has started and add these deadlines as events to their calendar.

The event on the calendar can be 1 hr timespan

For example, If Alice has 3 Tasks in progress, we add an event called Deadline: <Task Title> for all 3 tasks she has started.

Budget: 70 Euros

The front-end application is avalaible in the following repository: https://github.com/UniversalDot/front-end

Clone the repo and check out the branch that I have created for you.

git fetch origin
git checkout 55-ipfs-file-uploader

Make sure that you commit everything to the existing branch. Once the task is completed, we will create a pull request to merge to develop.

Create a file uploader that allows the user to upload a file into the web application. The file uploader should use existing UI elements and styles. In more detail, the task should fulfill the following conditions:

• Be able to upload a file through the browser
• Be able to remove the file in the browser
• Shows a small preview of the document
• Returns the CID of the document

Implement this file uploader for the Attachment input in src/pages/OrganizationOwn.tsx

Keep in mind that the application is already connected to IPFS node running at http://109.235.70.27:5001. To see how the integration was done, check out the following pull-request: #37

An example of a file uploader can be found here: https://www.npmjs.com/package/react-ipfs-uploader

Current CI results in failure due to warnings of various unused elements being treated as errors.

@JosephKnecht-lab has suggested suppressing warnings as errors for now.

Add dockerfile to front-end that should be published to docker-hub

Create an integration test with Cypress that should.

• Make a request to ensure tensorflow serving is online
• Make a request to ensure we can query the latest version of the model
• Ensure we can receive appropriate response.

Are we using all the npm dependencies? If we are not using some npm packages, please remove from the project.

Alot of packages have been deprecated too. npm WARN deprecated

Also, there are vulnerabilities that need to be resolved.

11 vulnerabilities (2 moderate, 8 high, 1 critical)

• Add CI workflow to check build, which builds on push to any branch
• Add status badge to readme

When we assign deadlines for a task, currently we don't take into account that users come from different timezones.

The DateTime stored in Substrate has to be universal for all users, so we have to store UTC in the backend.

• Create conversations that take into account the local timezone of the user and convert it into UTC.
• Take the UTC coming from substrate and convert it into local timezone of the user.

Needs to investigate if this is already converted by default.

When editing a profile, the save profile button remains disabled.

This is a bug

Ci is unfortunately failing due to an issue introduced with last night's calendar PR merge: https://github.com/UniversalDot/front-end/runs/7877466517?check_suite_focus=true

Failed to compile.

TS7006: Parameter 'params' implicitly has an 'any' type.
    148 |               label="Start date"
    149 |               inputFormat="dd/MM/yyyy hh:mm a"
  > 150 |               renderInput={(params) => <TextField {...params} fullWidth />}
        |                             ^^^^^^
    151 |             />
    152 |           )}
    153 |         />

This can also be seen on the previous CircleCI run for the PR merge: https://app.circleci.com/pipelines/github/UniversalDot/front-end/77/workflows/eb5650da-4024-4591-b68d-a83fd9056067/jobs/111

The notifications are global but need to be made specific to each account.

Implement notifications that only shows events that are related to the proper account.

1. If user inputs wrong organizational input we have get error thrown.

Error handling:

Uncaught (in promise) Error: createType(Call):: Call: failed decoding dao.addTasks:: Struct: failed on args: {"org_id":"H256","task":"H256"}:: Struct: failed on org_id: H256:: Expected at least 32 bytes (256 bits), found 3 bytes
    at createTypeUnsafe (type.js:63:1)
    at TypeRegistry.createTypeUnsafe (registry.js:299:1)
    at extrinsicFn (createUnchecked.js:21:1)
    at Object.decorated [as addTasks] (Decorate.js:393:1)
    at signedTx (useDao.ts:322:1)

2. Check why memberof Returns only last organization, not all?
3. Refreshing page to get updates.
4. Once task is accepted, remove it also from organizational task.
5. Error handling. Task cant be Deleted if Completed.

Create templates for creating issues in Github

Create a settings page that allows the user to set some settings: Among the settings they can change are the following:

• Allow the user to upload their gravatar which is a picture for their profile.
• Connecting to IPFS Node. A dropdown that allows the user to connect to public IPFS nodes or a node running locally.
• Connecting to Tensorflow Server. There should be an input that allows the user to select to public Tensorflow server.

Within the application, we need to establish a chat function in which users can communicate with one another. For example, task volunteers should be able to reach informally to the task creator to ask for further details.

For this, we can incorporate already existing technology such as matrix: https://matrix.org/

Some documentation:
https://spec.matrix.org/latest/
https://matrix.org/docs/guides/usage-of-the-matrix-js-sdk

Matrix already has a React sdk, so we can use it to integrate with it. https://github.com/matrix-org/matrix-react-sdk

Tasks:

• Integrate Matrix-react-sdk into the current application
• Make sure it matches closely in style to the existing application
• A chat dialog should be able to be opened with anyone who has a known public key
• Anyone with an AccountID, should be able to connect with another AccountID

TASK: 100 Euros

We are currently connecting to the IPFS node on our own server.

However, we can't host all files on our server, so we assume most people have IPFS Deamon running on their localhost.

• Implement a check to connect to local IPFS Node first;
• If the local IPFS node is not present, fall back to our own server.
• Implement some general calls to API (such as uploading a file, displaying an ipfs file, etc).

Once we have stabilized the front end, we need to start doing proper testing of the front-end application.

My suggestion is to use Cypress.

This is needed as part of the Web3 Grant Delievery

We are implementing GEO location based on the NAD system.

https://en.wikipedia.org/wiki/Natural_Area_Code

We are storing X and Y coordinates for profiles and tasks that should be implemented in the front-end application as well.

We have automated deployment to Hostinger via webhook. We push all static resources from branch: https://github.com/UniversalDot/front-end/tree/hosting to https://test.universaldot.me/ .

Currently, we deploy on every push to develop, which is fine, but I think in the future, we would like to deploy from master.
Also we need to change the build from using yarn to npm instead.

Maybe we can also have a seperate deployment from develop to a seperate endpoint that we can use for testing also.

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

Change to local host

Basic Example

127.0.0.1:9944

Unresolved questions

No response

The current hosting provider only allows deploys via webhook. Need to firstly check whether they provide a mechanism for builds and if not, use GitHub Actions to build and push to another branch, which Hostinger can then simply pull from in order to deploy the front-end

The blockchain Node understands UnixTime. In the front-end application, we have to expose a human readable, DateTime object which is then converted to Unix time to be stored on the chain.

The application should be able:

• Read UnixTime and convert it to DateTime coming from the back-end
• Write DateTime on the front-end and store it as UnixTime in the backend

Check if the template has appropriate dateTime component?
If not implement custom solution of find some npm package off the shelf.

The stored documents should be retrivable in from IPFS from their original IPFS CID format.

• The CID document identifier should be retrieved from Blockchain Storage
• The document then can be viewed/downloaded from the IPFS node
• Implement Cypress test to verify retrival

We have A Running IPFS node at Host: http://109.235.70.27 on port 5001

We can interact with this node through JS-HTTP-Client Library: https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client

Integrate this Client library into the front end, and connect to the running IPFS node.

For example here how we can get its peers:
curl -X POST http://109.235.70.27:5001/api/v0/swarm/peers

The available JS-API methods are shown here: https://docs.ipfs.io/reference/http/api/#getting-started

Definition of Done:

• Install JS-HTTP-client and connect to running IPFS node
• Implement functionality to add files to IPFS node: https://docs.ipfs.io/reference/http/api/#api-v0-add
• Implement functionality to show IPFS data: https://docs.ipfs.io/reference/http/api/#api-v0-cat
• Implement functionality to show Node info: https://docs.ipfs.io/reference/http/api/#api-v0-id

When uploading attachments for a task, make sure that we only store the IPFS CID of the document.

• Implement file upload in React
• Perform unit test in Cypress