Restructure project

.circleci/config.yml

@@ -24,16 +24,10 @@ jobs:
           command: |
             cd server-phoenix && mix local.rebar --force && mix test
 
-  build:
+  build-react:
     docker:
       # specify the version you desire here
-       - image: cimg/ruby:2.6.9
-       - image: redis
-       - image: cimg/postgres:14.1
-         environment:
-           POSTGRES_USER: postgres
-           POSTGRES_PASSWORD: postgres
-           POSTGRES_DB: helios_test
+       - image: cimg/node:16.14.0
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -43,85 +37,32 @@ jobs:
     working_directory: ~/repo
 
     steps:
-      - run:
-          name: install node/yarn
-          command: |
-            curl -sL https://deb.nodesource.com/setup_16.x | sudo bash && sudo apt-get update -qq && sudo apt-get install -yq build-essential nodejs unzip && sudo npm install -g yarn
-
       - checkout
 
       - restore_cache:
           keys:
-          - gem-cache-{{ checksum "Gemfile.lock" }}
-          # fallback to using the latest cache if no exact match is found
-          - gem-cache-
-
-      - run:
-          name: install gem dependencies
-          command: |
-            bundle install --jobs=4 --retry=3 --path vendor/bundle
-
-      - save_cache:
-          paths:
-            - ./vendor/bundle
-          key: gem-cache-{{ checksum "Gemfile.lock" }}
-
-      - restore_cache:
-          keys:
-          - yarn-cache-{{ checksum "yarn.lock" }}
+          - yarn-cache-{{ checksum "client-react/yarn.lock" }}
           # fallback to using the latest cache if no exact match is found
           - yarn-cache-
 
       - run:
           name: install yarn dependencies
           command: |
-            yarn install
+            cd client-react && yarn install
 
       - save_cache:
           paths:
             - ~/.yarn-cache
-          key: yarn-cache-{{ checksum "yarn.lock" }}
-
-      - run: yarn run prettier:check
-      - run: yarn run lint
-      - run: yarn run test
+          key: yarn-cache-{{ checksum "client-react/yarn.lock" }}
 
-      - run: bundle exec rubocop
-
-      # Database setup
-      - run: bundle exec rake db:create
-      - run: bundle exec rake db:schema:load
-
-      - run:
-          name: run diff on schema.json
-          command: |
-            bundle exec rake graphql:schema:dump
-            git diff --quiet schema.graphql
-
-      # run tests!
-      - run:
-          name: run tests
-          command: |
-            mkdir /tmp/test-results
-            TEST_FILES="$(circleci tests glob 'spec/**/*_spec.rb' | circleci tests split --split-by=timings)"
-
-            bundle exec rspec --format progress \
-                            --format RspecJunitFormatter \
-                            --out /tmp/test-results/rspec.xml \
-                            --format progress \
-                            $TEST_FILES
-
-      # collect reports
-      - store_test_results:
-          path: /tmp/test-results
-      - store_artifacts:
-          path: /tmp/test-results
-          destination: test-results
+      - run: cd client-react && yarn run prettier:check
+      - run: cd client-react && yarn run lint
+      - run: cd client-react && yarn run test
 
 workflows:
   version: 2
-  build_and_phoenix:
+  build:
     jobs:
       - build-phoenix
-      - build
+      - build-react
 

Procfile.development

@@ -1,2 +1,2 @@
 phoenix: cd ./server-phoenix/ && mix phx.server
-webpack: yarn serve
+webpack: yarn --cwd client-react/ serve

README.md

@@ -1,8 +1,7 @@
 # README
 
 The tech stack for this project consists of:
-- Rails 5.2 Back end
-- or Phoenix 1.6 Back end
+- Phoenix 1.6 Back end
 - webpacker
 - graphQL
 - React Front end
@@ -11,98 +10,11 @@ To use the Phoenix back end set the environment variables as follows:
 - BACKEND_URL=http://localhost:4000
 - BACKEND_LANGUAGE=elixir
 
-To use the Rails back end set the environment variables as follows:
-- BACKEND_URL=http://localhost:5001
-- BACKEND_LANGUAGE=ruby
-
 ## Local development with Phoenix
 
 [View the README] in the server-phoenix directory.
 
 [View the README]: server-phoenix/README.me
-## Local development with Rails
-### Ruby version
-
-MRI 2.6.9
-
-### Installation options
-
-You can either install the deps directly on your box or you can use the Docker support.
-
-## Native
-
-### Getting ready
-
-Prequisites:
-- libpq
-  - Ubuntu: sudo apt install libpq-dev
-  - OSX: brew install libpq && brew link --force libpq
-- libsqlite3
-  - Ubuntu: sudo apt install sqlite3 libsqlite3-dev
-  - OSX: brew install sqlite3 && brew link --force sqlite3
-- asdf OR nvm
-  - OSX/Ubuntu (asdf): https://asdf-vm.com/guide/getting-started.html#_1-install-dependencies
-  - OSX/Ubuntu (nvm): https://github.com/nvm-sh/nvm
-- freedesktop mime database
-  - Ubuntu: should work out of the box. https://github.com/mimemagicrb/mimemagic#dependencies
-  - OSX: brew install shared-mime-info
-
-- Depending on whether asdf or nvm worked for you: `asdf install` OR add the following to your ~/.zshrc after the configuration details for nvm to pin the nodejs version:
-  ```shell
-  autoload -U add-zsh-hook
-  load-nvmrc() {
-    if [[ -f .nvmrc && -r .nvmrc ]]; then
-      nvm use
-    elif [[ $(nvm version) != $(nvm version default)  ]]; then
-      echo "Reverting to nvm default version"
-      nvm use default
-    fi
-  }
-  add-zsh-hook chpwd load-nvmrc
-  load-nvmrc
-  ```
-- `gem install bundler:2.2.32`
-- `gem install pg -v '1.1.3' --source 'https://rubygems.org/'`
-- `gem install sqlite3 -v '1.3.13' --source 'https://rubygems.org/'`
-- `gem install foreman`
-- `bundle install`
-- `yarn install`
-- `cp .env.sample .env` -- dotenv loads variables from a **.env** in your project's root directory. Fill in env vars where applicable
-- Configure Redis:
-
-OSX:
-  ```shell
-  brew install redis
-  redis-server &
-  redis-cli CONFIG SET dir /tmp/
-  redis-cli CONFIG SET dbfilename temp.rdb
-  redis-cli ping  # Should respond with PONG
-  rake db:setup
-  ```
-Ubuntu:
-- Update system
-  ```shell
-  sudo apt update
-  ```
-- Install redis server
-  ```shell
-  sudo apt install redis-server
-  ```
-- Update configuration
-  ```shell
-  sudo sh -c 'echo "supervised systemd" >> /etc/redis/redis.config'
-  ```
-- Restart running service
-  ```shell
-  sudo systemctl restart redis.service
-  ```
-- Configure and verify redis
-  ```shell
-  redis-cli CONFIG SET dir /tmp/
-  redis-cli CONFIG SET dbfilename temp.rdb
-  redis-cli ping  # Should respond with PONG
-  rake db:setup
-  ```
 
 ### Start it up
 
@@ -127,8 +39,6 @@ Ubuntu:
 
 ### Commands for local lint/testing steps:
 
-**NOTE**: cypress tests depend on latest `rake db:seed` and a server running locally
-
 - Command prints detected errors, stylistic/formatting issues, and bugs
 - `yarn run lint`
 
@@ -144,33 +54,12 @@ Ubuntu:
 - Opens cypress test interface
 - `yarn run cy:open`
 
-- Ruby-specific code style checker, reports and automaticaly fixes errors
-- `bundle exec rubocop`
-
-#### Spin up Rails Console
-
-- have the docker image running in one terminal tab (`docker-compose up`)
-- in a second tab run `docker-compose exec web bundle exec rails console`
-  - if it gives any errors, try the following command:
-    - `docker-compose run web bundle exec rake app:update:bin`
-
 ### Integrations
 
 There are a number of integrations used within the Helios app.
 A more detailed desctipition of these integrations including how to
 get started using them can be found [here](./INTEGRATIONS.md)
 
-### Production Start up
-
-- `export PATH=<node path>`
-- `export PATH=<rails path>`
-- ```bash
-  RAILS_ENV=production \
-      SECRET_KEY_BASE=<some secret> \
-      RAILS_SERVE_STATIC_FILES=1 \
-      rails s
-  ```
-
 ### Designs
 
 https://app.zeplin.io/project/5ad8bfb98c928b070d6e1589
@@ -180,11 +69,3 @@ https://app.zeplin.io/project/5ad8bfb98c928b070d6e1589
 ### GraphqQL fetch caching
 
 We have switched our client's default fetchPolicy to network-only, preferring to have a loading state prior to fetching the most up to date data.
-
-### ActiveAdmin User Interface
-
-Use the admin interface to navigate models and edit their parameters. Can be used to alter the displayed wifi and bathroom codes, rearrange and adjust widget screen time, or even delete a traffic cam from view.
-- Accessible through http://localhost:3000/admin
-- user email: [email protected]
-- password: password
-

.eslintrc.js → client-react/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
       'error',
       {
         env: 'apollo',
-        schemaJson: require('./app/javascript/schema.json'),
+        schemaJson: require('./src/schema.json'),
       },
     ],
     'react/jsx-one-expression-per-line': [0],

package.json → client-react/package.json

@@ -109,43 +109,43 @@
     "webpack-sources": "^1.3.0"
   },
   "scripts": {
-    "lint": "./node_modules/.bin/eslint --ext js --ext jsx app/javascript/",
+    "lint": "./node_modules/.bin/eslint --ext js --ext jsx src/",
     "test": "jest",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "relative-to-alias": "jscodeshift --extensions jsx -t ./config/transforms/relative_to_alias_path.js ./ ",
-    "prettier:format": "prettier --write '{app/javascript/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
-    "prettier:check": "prettier --check '{app/javascript/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
+    "prettier:format": "prettier --write '{src/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
+    "prettier:check": "prettier --check '{src/,__mocks__}/**/*.{js,jsx}' package.json webpack.config.js",
     "build": "webpack",
     "serve": "webpack-dev-server"
   },
   "jest": {
     "verbose": true,
     "testURL": "http://localhost/",
     "roots": [
-      "app/javascript"
+      "src"
     ],
     "moduleNameMapper": {
       "\\.(png|jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js",
       "react-hls-player": "<rootDir>/__mocks__/emptyMock.js",
       "^@root(.*)$": "<rootDir>/$1",
-      "^@app(.*)$": "<rootDir>/app$1",
-      "^@javascript(.*)$": "<rootDir>/app/javascript$1",
-      "^@lib(.*)$": "<rootDir>/app/javascript/lib$1",
-      "^@components(.*)$": "<rootDir>/app/javascript/components$1",
-      "^@widgets(.*)$": "<rootDir>/app/javascript/components/widgets$1",
-      "^@messages(.*)$": "<rootDir>/app/javascript/components/widgets/messages$1",
-      "^@numbers(.*)$": "<rootDir>/app/javascript/components/widgets/numbers$1",
-      "^@weather(.*)$": "<rootDir>/app/javascript/components/widgets/weather$1",
-      "^@twitter(.*)$": "<rootDir>/app/javascript/components/widgets/twitter$1",
-      "^@hocs(.*)$": "<rootDir>/app/javascript/components/hocs$1",
+      "^@app(.*)$": "<rootDir>/src$1",
+      "^@javascript(.*)$": "<rootDir>/src$1",
+      "^@lib(.*)$": "<rootDir>/src/lib$1",
+      "^@components(.*)$": "<rootDir>/src/components$1",
+      "^@widgets(.*)$": "<rootDir>/src/components/widgets$1",
+      "^@messages(.*)$": "<rootDir>/src/components/widgets/messages$1",
+      "^@numbers(.*)$": "<rootDir>/src/components/widgets/numbers$1",
+      "^@weather(.*)$": "<rootDir>/src/components/widgets/weather$1",
+      "^@twitter(.*)$": "<rootDir>/src/components/widgets/twitter$1",
+      "^@hocs(.*)$": "<rootDir>/src/components/hocs$1",
       "^@assets(.*)$": "<rootDir>/app/assets$1",
       "^@images(.*)$": "<rootDir>/app/assets/images$1",
       "^@icons(.*)$": "<rootDir>/app/assets/images/icons$1"
     },
     "moduleDirectories": [
       "node_modules",
-      "app/javascript"
+      "src"
     ]
   }
 }

app/javascript/packs/application.js → client-react/src/packs/application.js

@@ -11,7 +11,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import App from '../components/app';
 
-import '@app/assets/stylesheets/base.scss';
+import '@assets/stylesheets/base.scss';
 
 document.addEventListener('DOMContentLoaded', () => {
   const container = document.body.appendChild(document.createElement('div'));