mithi

See comment below thanks :)

mithi

Ideally your PR should not include too many changes. Split a huge PR to several small once so that it's easier to quickly find any regressions might be introduced by your code.

Pledge of Code Quality

• ✅ To the best of my ability, I have made sure that the code I have written is as simple and as straight forward as possible.

• ✅ I have kept the following in mind as I was writing my code

  • ✅ Single Responsibility Principle to avoid god components and methods
  • ✅ Loose Coupling, Sependency Injection, Complex logic simplification

• ✅ Component Composition model for crafting reusable code

mithi

PR Checklist

I noticed that I keep writing the same review comments over and over again for the last 3 months so I'm writing down this check list.

I'm going to add this as our default pull request template. Comments, questions, violent reactions? Please let me know. Please populate this checklist before asking for a review. I will add more as I encounter and/or remember them.

If you find your PR to have so many requested changes, It's best to reread this article again: https://github.com/mithi/react-philosophies

mithi

1. Create a droplet, use ssh key, 4GB ram

2. Connect to your Droplet via ssh https://docs.digitalocean.com/products/droplets/how-to/connect-with-ssh/openssh/

3. Do the initial server setup: create new user, access that user on your local via ss etc https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-20-04

4. On your user, setup python 3, pip3, python3-venv, and other essential dev tools https://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set-up-a-programming-environment-on-an-ubuntu-20-04-server

5. Follow as in the README (https://github.com/datature/portal), which will result to errors

git clone https://github.com/datature/portal
cd portal

mithi

(env_tensorflow) ➜  portal python3.8 -m pip install datature-hub==0.2.0
Collecting datature-hub==0.2.0
  Using cached datature_hub-0.2.0-py3-none-any.whl (9.4 kB)
Collecting opencv-python==4.5.1.48
  Using cached opencv-python-4.5.1.48.tar.gz (88.3 MB)
  Installing build dependencies ... error
  error: subprocess-exited-with-error
  
  × pip subprocess to install build dependencies did not run successfully.
  │ exit code: 1

mithi

declare module '@vx/axis' {
  import React from 'react';
  import { ScaleTime } from 'd3-scale';

  interface Point {
    x: number;
    y: number;
  }

  interface AxisProps {

mithi

import { useCallback, useState } from 'react';
/*******************

This custom hook `useSwipeMotion()` return the props to be passed 
to <motion.div /> and <AnimatePresence /> from framer-motion (among other things)
inorder to produce the swiping effect for whatever component that needs it. 

animation that will be produced by using this hook is heavily based on:
https://www.framer.com/docs/examples/
https://codesandbox.io/s/framer-motion-image-gallery-pqvx3

mithi

import {
  useState,
  useCallback,
  useLayoutEffect,
  useRef,
  useEffect,
} from 'react';

const wait = () => new Promise((resolve) => setTimeout(resolve, 3000));

mithi

import { useState, useCallback } from 'react'

const getTotalPages = (total: number, perPage: number) => Math.ceil(total / perPage)
const usePagination = () => {
  const [state, setPaginationState] = useState<{
    totalItems: number
    itemsPerPage: number
    currentPage: number
  }>({ totalItems: 0, itemsPerPage: 1, currentPage: 1 })

mithi

Also about exercise 2, extra credit 3... The solution has this:

function asyncReducer(state, action) {
  switch (action.type) {
    case 'pending': {
      return {status: 'pending', data: null, error: null}
    }
    case 'resolved': {
      return {status: 'resolved', data: action.data, error: null}