moduslabs / modir

Modite Directory

Modite Directory

Modite Directory brings distributed teams at Modus closer together with clever data patterns. Uses 3rd party API services from Slack, Harvest, Google Suite, GitHub, HeyTaco, etc.

Modite Directory uses:

• Ionic 4
• React
• Cloudflare Workers
• Workers KV store
• Cloudflare Access

Developing

Use Docker

The benefit of Docker is that the specific versions of node_modules and Node JS required to build/run this can be encapsulated within a Docker container rather than having to have those versions of software installed on your workstation.

NOTES

1. Node version 12 seems to be required for node-sass to work.

Shell scripts

The Dockerfile is used to build a Docker image that has no node_modules/ directory.

There are 4 .sh (shell) scripts to make using Docker easy:

docker-build.sh

The docker-build.sh script uses the Dockerfile to create an image, then mounts a named volume over node_modules and does the npm install into that volume.

You use npm/yarn to add modules to package.json on the workstation. When you run the docker-build.sh script, your local node_modules/ will be removed (since it's not needed by the container).

This script might be slow the first time you run it, but should be quite fast each successive time - as long as the node_modules in the named container are preserved.

docker-debug.sh

The docker-debug.sh script uses an image built with docker-build.sh and runs it (not as a deamon) so you can see any outoput from the program run via npm start within the container. The working dir ($PWD) is mounted at /home/app where the app is run. This allows you to edit files on your workstation and the changes take effect as if the code were running natively on the workstation. The named volume is mounted on /home/app/node_modules so they are available.

You can change the port the server listens on by editing this file.

docker-prod-build.sh

This script does an npm build within the container but generates its output files in the build/ directory on the host so you can use them accordingly.

docker-clean.sh

This script cleans up the Docker files for this project (removes them), including the named volume and the Docker image.

Typical workflow:

1. ./docker-build.sh (to build the container and node_modules volume)
2. ./docker-debug.sh (to run the container so you can edit and debug)
3. ./docker-prod-build.sh (eventually, to make a production build/ set of files)

Without Docker

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Modus Create

Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

This project is part of Modus Labs.

modir's Issues

replace ModiteLand with ModusLand

small nit :) Modites live in ModusLand, not ModiteLand.

Loading placeholder should be replaced with a message when no matching results are found

As an example search for "Hello World" under the Team or Project views. In either case, a placeholder is displayed which indicates to the user that results are still loading. Instead, if no rows match the search term a message should be displayed to the user to indicate that no modites or projects match the search string.

All search results should be visible on map

When searching, all modites which match the search should be made visible on the map.

As an example, when searching for "AARP", my colleagues in the southern hemisphere are not visible on the map.

Filtering Projects

There's one small thing I found, when the Project tab is active, if I search for my name there are no matching results because it's searching for project names instead of modites working on projects, but it seems like it's eternally looking for something, so maybe the search bar could say "Filter Projects" instead so it's clear.

Alt text for Profile Pictures overflows.

If a profile picture src is unavailable. The alt text overflows.

Last element listing is hidden

Dates adding a couple of weeks on profile screen

this screenshot taking at 9:55 PST on May 15th, 2019

Other screenshots from other profiles:

Fix dependabot issues

See https://github.com/moduslabs/modir/security/dependabot

Husky not installed.

This is on switching to master from a branch we merged.

Switched to branch 'master'
Your branch is up to date with 'origin/master'.
Can't find Husky, skipping post-checkout hook
You can reinstall it using 'npm install husky --save-dev' or delete this hook
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 5 (delta 3), reused 3 (delta 3), pack-reused 0
Unpacking objects: 100% (5/5), done.
From github.com:moduslabs/modir
 * branch            master     -> FETCH_HEAD
   5c63711..b3aaff6  master     -> upstream/master
Merge made by the 'recursive' strategy.
 Dockerfile           |   4 +++
 README.md            |  48 +++++++++++++++++++++++++++++++
 api/modites.js       |  37 ++++++++++++++----------
 docker-build.sh      |  12 ++++++++
 docker-clean.sh      |   9 ++++++
 docker-debug.sh      |  12 ++++++++
 docker-prod-build.sh |  20 +++++++++++++
 package.json         |   4 +--
 yarn.lock            | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------
 9 files changed, 219 insertions(+), 96 deletions(-)
 create mode 100644 Dockerfile
 create mode 100755 docker-build.sh
 create mode 100755 docker-clean.sh
 create mode 100755 docker-debug.sh
 create mode 100755 docker-prod-build.sh
Can't find Husky, skipping post-merge hook
You can reinstall it using 'npm install husky --save-dev' or delete this hook
Can't find Husky, skipping pre-push hook
You can reinstall it using 'npm install husky --save-dev' or delete this hook
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 20 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 345 bytes | 345.00 KiB/s, done.
Total 2 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:mschwartz/modir
   f67a61f..5fdf622  master -> master

Opening the app on a detail view, then pressing Left arrow to go to main causes entire site reflow

Small issue, but def worth logging.

Steps to reproduce:

Go to: https://dir.modus.app/details/UCCG3T2TF

Press <-.

Demo:

Automation feeding Modir is failing due to 2FA

When google auth was enabled for Harvest, it broke API access for the current scripts. Definitely need to get this resolved as the data is currently stale.

Locations are not showing on map properly

VA, not California

It shows me as being in China.

Incorporate the skills that each modite has into the directory

Randall Gonzalez wrote at 2019-10-15T13:42:00:

hi all, are there any future plans to incorporate the skills that each modite has into the directory (or an appendix to it)? I recall there were some surveys sent to people a few weeks back to start collecting this data. I have been reading about graph db Neo4j and playing around with fake data in a local instance and figured a "skills tracker" might be a really good use case for a graph db? I recall there were some surveys sent to people a few weeks back to start collecting this data. I have been reading about graph db Neo4j and playing around with fake data in a local instance and figured a "skills tracker" might be a really good use case for a graph db

Show a beautiful photo as a profile background with a daytime or nighttime scene appropriate to the location

One of our customers had a similar app. One thing it did is show either a daytime or nighttime picture of a location in the time zone, depending on what time it was there. I really liked that. The 2 main locations for their app were Geneva, Switzerland and San Francisco, California.

The sun or moon is good here but psychologically I really liked the day / night picture - it put much more of the UI in service of psychologically telling people it was day or night.

We could have pictures pictures that varied by multiple factor that we select:

• While we could just do day / night it would be really awesome to have the ability to have as many photos per location as we want, with time-of-day information in them. That way we could have midnight, dawn, morning, noon, dusk, evening pictures for some locations and just day / night for some others.

• We could store a day or night flag in there to look at local time (there are APIs that will give you sunrise / sunset times) to bias the selection to the most appropriate picture

• We could have a set of fixed locations to start, but this might be clunky

• Adding photo sets for arbitrary locations would be awesome! Then we could pick the location closest to the location of the user

If we have arbitrarily many day / night photos of arbitrary locations this will work Well Enough for any location.

That way we could arbitrarily expand the set of beautiful photos of Reston, VA or of Cluj, RO or San Jose, CR, and also of more remote locations where our people are (Lagos, Nigeria for instance).

Slack image failures (stale data?) for Jonathan Caballero & Jay Garcia

Seems like there is a two problems with the slack data that may be related:

• Image data is old for the slack user
• Old images are no longer hosted by

Jonathan Caballero

https://dir.modus.app/details/U0AV0F4EM

His real slack image: https://ca.slack-edge.com/T025W8CSY-U0AV0F4EM-5f103b9cd707-72

Search shows the old image:

Exception in browser:

585362525239_54c1816ccf29d0490c15_72.jpg:1 Failed to load resource: the server responded with a status of 403 ()

URL for JPG:
https://avatars.slack-edge.com/2019-03-21/585362525239_54c1816ccf29d0490c15_72.jpg

Jay Garcia

Search for Jay Garcia, a broken image shows up in the results. Click on the record, the image appears. Search again, the image appears. Still the wrong image.

Current image:

Make it so that the search bar doesn't cover the map in the initial screen - I want to see the whole map when I also see the search bar and the list.

Please review all dependabot auto-generated PRs

Dependabot is trying its best to keep our repo up to date. Please review the PRs that are auto-generated by dependabot and close the ones that are irrelevant.

Tests

Unit and Snapshot tests so that we can have confidence in present code and also when we add new code to the application seeing that it is going to be used for a LONG time.

Maybe integration tests with the workers on confluence.

Once i clear some of the things on my plate, i'll be happy to jump on this.

When you click on the globe immediately after starting the program, it should show the search box and a clear world map, not zoom to the first Modite in the list.

Console.log() calls in production

Data.tsx spits out a Modite object in production.

You should be able to click on a dot on the map and show a user from the world map

User thumbnails are very low quality

Can we please choose a higher quality photo from the Slack API to render thumbnails? They are very low quality and are scaled up.

Thumb:

Thumb in the app (notice it's blurry).

Modite detail view animation does not take into account slow networks

On slow networks, the images are loaded on detail views, but after some time, the animation shows images for prior detail views. I noticed this without throttling, which is why I'm reporting. Using "Fast 3G" within Chrome helps display the lag time more.

Steps to reproduce:

• Launch app
• pop open chrome debugger & setup network to "Fast 3G"
• Hard Invalidate cache by spamming CMD + SHIFT + R 3 - 4 times quickly. (sometimes, hitting the key combo a single time really doesn't do the job well. :( )
• Load one or two detail views on the top of the list
• Scroll > 50% of the list
• Load some detail views.

Demo:

Sorting for all modites doesn't seem logical.

When viewing all modites, we should have some sort of sorting mechanism. Last, First or First, Last perhaps?

Search field should be able to be cleared without focus

It would be great to be able to clear the search input field with the X icon without having to first focus it.

Fetch users in Harvest to show their project in the UI

Looks like for this we'll need to set up a personal API key: https://help.getharvest.com/api-v2/authentication-api/authentication/authentication/#personal-access-tokens

Here is a list of users:
https://help.getharvest.com/api-v2/users-api/users/users/#list-all-users

But, the list of users doesn't list the project a user is on. You can list out all of the user assignments and it'll show all of the projects and each user connected to it:
https://help.getharvest.com/api-v2/projects-api/projects/user-assignments/#list-all-user-assignments

All users on a project are here:
https://help.getharvest.com/api-v2/projects-api/projects/user-assignments/#list-all-user-assignments-for-a-specific-project

The user object has a user ID and the user's email. If the email doesn't match between Slack and Harvest we'll have to bridge those and make a relationship object we can use to marry the records.