2024 - new changes on top of Next.js branch

.env.development

@@ -0,0 +1,16 @@
+NEXT_PUBLIC_BASE_URL = http://localhost:3000
+NEXT_PUBLIC_API_ENV = http://localhost:4000
+
+AUTH0_DOMAIN = https://guesstimate-development.auth0.com
+AUTH0_CLIENT_ID = "9UwzFayrqvJerFA3BQQKYluCRJ5ani0g"
+
+# Sorry! To use auth in dev, you'll need to be on QURI team; otherwise, you can register your own Auth0 tenant and use those credentials.
+AUTH0_CLIENT_SECRET=""
+
+# If this is set correctly then Sentry will be enabled.
+NEXT_PUBLIC_SENTRY_DSN=""
+
+# These are required for Sentry sourcemaps to work, but not strictly nesecceary.
+SENTRY_ORG=""
+SENTRY_PROJECT=""
+SENTRY_AUTH_TOKEN=""

.eslintrc.json

@@ -1,54 +1,67 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "extends": "eslint:recommended",
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "import"
-    ],
-    "rules": {
-        "quotes": 0,
-        "no-unused-vars": 1,
-        "camelcase": 1,
-        "no-underscore-dangle": 0,
-        "react/display-name": 0,
-        "react/jsx-boolean-value": 1,
-        "react/jsx-closing-bracket-location": 1,
-        "react/jsx-curly-spacing": 1,
-        "react/jsx-indent-props": 1,
-        "react/jsx-max-props-per-line": 1,
-        "react/jsx-no-duplicate-props": 1,
-        "react/jsx-no-literals": 1,
-        "react/jsx-no-undef": 1,
-        "jsx-quotes": 1,
-        "react/sort-prop-types": 1,
-        "react/jsx-sort-props": 1,
-        "react/jsx-uses-react": 1,
-        "react/jsx-uses-vars": 1,
-        "react/no-danger": 1,
-        "react/no-did-mount-set-state": 1,
-        "react/no-did-update-set-state": 1,
-        "react/no-multi-comp": 0,
-        "react/no-set-state": 0,
-        "react/no-unknown-property": 1,
-        "react/prop-types": 1,
-        "react/react-in-jsx-scope": 1,
-        "import/extensions": 1,
-        "react/self-closing-comp": 1,
-        "react/sort-comp": 1,
-        "react/jsx-wrap-multilines": 1
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
     }
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "import",
+    "@typescript-eslint",
+    "@wogns3623/better-exhaustive-deps"
+  ],
+  "rules": {
+    // Replace exhaustive-deps hook with a better fork
+    // Context: https://github.com/facebook/react/issues/16873
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+    "@wogns3623/better-exhaustive-deps/exhaustive-deps": [
+      "warn",
+      {
+        "checkMemoizedVariableIsStatic": true,
+        "staticHooks": {
+          "useAppDispatch": true
+        }
+      }
+    ],
+    "quotes": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-explicit-any": "off", // not viable yet
+    "camelcase": "off",
+    "no-underscore-dangle": 0,
+    "react/display-name": 0,
+    "react/jsx-boolean-value": "off",
+    "react/jsx-closing-bracket-location": 1,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/react-in-jsx-scope": "off",
+    "jsx-quotes": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/no-danger": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 0,
+    "react/no-set-state": 0,
+    "react/no-unknown-property": 1,
+    "react/prop-types": "off",
+    "import/extensions": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": "off",
+    "react/jsx-wrap-multilines": 1,
+    "no-redeclare": "warn"
+  }
 }

.github/workflows/ci.yml

@@ -0,0 +1,18 @@
+name: Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up node ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: yarn
+      - name: Test once
+        run: yarn ci:test

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,69 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+  pull_request:
+  schedule:
+    - cron: '23 16 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.gitignore

@@ -1,9 +1,15 @@
 node_modules
 npm-debug.log
 .DS_Store
-/public
 
 tags
 .tern-project
 
 .netlify
+
+/.next
+/tsconfig.tsbuildinfo
+/.vscode
+/yarn-error.log
+
+/.env.local

README.md

@@ -1,107 +1,84 @@
-
-Guesstimate is a tool for performing estimates using [monte carlo experiments](https://en.wikipedia.org/wiki/Monte_Carlo_method).  It can be used similarly to excel, but provides the option of providing ranges and distributions as values instead of individual points.  Other metrics can do mathematical operations on these cells/metrics.  After each new input is added or changed, a set of 5000 samples is randomly generated from each input and goes through the specified operations to produce confidence intervals in the output. 
-
+Guesstimate is a tool for performing estimates using [monte carlo experiments](https://en.wikipedia.org/wiki/Monte_Carlo_method). It can be used similarly to excel, but provides the option of providing ranges and distributions as values instead of individual points. Other metrics can do mathematical operations on these cells/metrics. After each new input is added or changed, a set of 5000 samples is randomly generated from each input and goes through the specified operations to produce confidence intervals in the output.
 
 # Using Guesstimate
-See [GetGuesstimate.com](http://alpha.getguesstimate.com/) to use.
+
+See [GetGuesstimate.com](http://www.getguesstimate.com/) to use.
 
 ## Create a Collection
+
 ![create_collection](http://g.recordit.co/ixzpn44TRr.gif)
 
 ## Create a Metric with a Guess
+
 ![create_guess](http://g.recordit.co/Ug32xX0o3l.gif)
-You can enter individual numbers or ranges.  
-- ```[25,35]```: A 90% confidence interval between 25 and 35.
+You can enter individual numbers or ranges.
 
-Currently all ranges are converted into normal distributions by default, but can be changed to uniform distributions.  
+- `[25,35]`: A 90% confidence interval between 25 and 35.
+
+Currently all ranges are converted into normal distributions by default, but can be changed to uniform distributions.
 
 ## Create a Metric with a Function input
+
 ![create_function](http://g.recordit.co/jhz3aaqobk.gif)
-Use the ```=``` sign as the first character of a guesstimate input to make it a function (similar to Excel and Google Sheets).  Each metric has a variable name which is made of two randomly chosen letters.  When the function input is selected, you can either type a metric's symbol to use it in a calculation, or simply click on it.  
+Use the `=` sign as the first character of a guesstimate input to make it a function (similar to Excel and Google Sheets). Each metric has a variable name which is made of two randomly chosen letters. When the function input is selected, you can either type a metric's symbol to use it in a calculation, or simply click on it.
 
-The functions are processed using [Math.js](http://mathjs.org/).  As such, it has several mathematical [constants](http://mathjs.org/docs/reference/constants.html) and [functions](http://mathjs.org/docs/reference/functions/categorical.html) that are useable.  
+The functions are processed using [Math.js](http://mathjs.org/). As such, it has several mathematical [constants](http://mathjs.org/docs/reference/constants.html) and [functions](http://mathjs.org/docs/reference/functions/categorical.html) that are useable.
 
 ## Different Visualization Methods
+
 ![visualizations](http://g.recordit.co/lckIfpAkiA.gif)
 
 ### Metric Visualizations
-There are a few different ways of visualizing metrics.  These are the following:  
+
+There are a few different ways of visualizing metrics. These are the following:
+
 - Normal: A view with metric names, basic distribution stats (mean & std deviation), and a picture of the distribution in the background.
-- Basic:  The same as normal, but without the distribution image.  This helps speed up calculations.
-- Scientific:  The same as normal, but the distribution image is larger and there are a few extra statistics.  Mean and standard deviation are labeled with more detail.
-- Debugging: This is used for making the system, and is a view of the React props that each metric component contains.  This may be interesting to you, but is not that useful for general use.  
+- Basic: The same as normal, but without the distribution image. This helps speed up calculations.
+- Scientific: The same as normal, but the distribution image is larger and there are a few extra statistics. Mean and standard deviation are labeled with more detail.
+- Debugging: This is used for making the system, and is a view of the React props that each metric component contains. This may be interesting to you, but is not that useful for general use.
 
 ### Arrows
-Arrows between metrics can be turned on or off.  They can be useful, but also add complication to the UI.  In the future the arrow layout may improve significantly.  By default they show when there are less than 20 metrics in a model, and are hidden when there are more.
+
+Arrows between metrics can be turned on or off. They can be useful, but also add complication to the UI. In the future the arrow layout may improve significantly. By default they show when there are less than 20 metrics in a model, and are hidden when there are more.
 
 ## Distribution View
+
 ![distributions](http://g.recordit.co/fkD7HJknPT.gif)
-Click on Metrics to see more information about their distributions.  The Distribution shows a large view of the Distribution, information about different percentiles, and a description.
+Click on Metrics to see more information about their distributions. The Distribution shows a large view of the Distribution, information about different percentiles, and a description.
 
 ## Limitations
-There are many things that will be improved.  Some of the more important limitations include:  
-1. Distribution types are limited to normal, uniform, and a few discrete types with math.js functions  
-2. Everything is public.    
-3. Only the creator of a collection is allowed to save edits to that collection.  
-4. Metrics can't be shared between collections.  
 
-# Technical Information
+There are many things that will be improved. Some of the more important limitations include:
 
-Guesstimate is a [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application).  Everything in this repo is the client side, which is one reason why this is called 'guesstimate-app'.
+1. Distribution types are limited to normal, uniform, and a few discrete types with math.js functions
+2. Everything is public.
+3. Only the creator of a collection is allowed to save edits to that collection.
+4. Metrics can't be shared between collections.
+
+# Technical Information
 
-There are two important third party systems.  Authentication is done with [Auth0](https://auth0.com/), and search/indexing is done with [Algolia](https://www.algolia.com/).  This means that running it yourself involves some setup, but on the other hand it's pretty easy set up compared to what you may need in comparable systems.  Both of these are free for moderate use.  I recommend both, though should note that the way I set up Algolia was a bit hacky (not sure how to do it right).  
+Guesstimate frontend is a [Next.js] Application.
 
-There is also a small server in Rails, which is not yet on Github.  I'd like to work on security a bit more before putting it on here (if select people want to work on it I'd be happy to share in a small group).  However, this is quite tiny;  just 2 models (users, spaces).  
+There are two important third party systems. Authentication is done with [Auth0](https://auth0.com/), through [next-auth](https://next-auth.js.org/), and search/indexing is done with [Algolia](https://www.algolia.com/). This means that running it yourself involves some setup, but on the other hand it's pretty easy set up compared to what you may need in comparable systems. Both of these are free for moderate use. I recommend both, though should note that the way I set up Algolia was a bit hacky (not sure how to do it right).
 
-All models are stored and saved as 'spaces'.  The spreadsheet content is all stored as json in Postgres.  You can see the full requests if you look at the network tab in chrome.
+There is also a small server in Rails, which is not yet on Github. I'd like to work on security a bit more before putting it on here (if select people want to work on it I'd be happy to share in a small group). However, this is quite tiny; just 2 models (users, spaces).
 
-However, while there are a few third party systems, everything will still work with just guesstimate-app, as long as you don't try to log in or save.  In practice this means that you can do quite a bit of development, as you can edit any model on the site (just can't save them).  It also makes much development quite simple when it's just on the website (not the server).  The line that controls this is here: 
+All models are stored and saved as 'spaces'. The spreadsheet content is all stored as json in Postgres. You can see the full requests if you look at the network tab in chrome.
 
-``"start": "BUILD_DEV=0 NODE_ENV=development API_ENV=production webpack-dev-server"``
+However, while there are a few third party systems, everything will still work with just guesstimate-app, as long as you don't try to log in or save. In practice this means that you can do quite a bit of development, as you can edit any model on the site (just can't save them). It also makes much development quite simple when it's just on the website (not the server).
 
-API_ENV=production (as opposed to development) means that it will use the production APIs.
+You can point your local instance to production APIs by setting `NEXT_PUBLIC_API_ENV`: `NEXT_PUBLIC_API_ENV=production yarn dev`.
 
 ## How to run
 
 First, make sure that git and node are installed.
 
-``git clone https://github.com/getguesstimate/guesstimate-app.git``
-
-``cd guesstimate-app``
-
-``npm install``
-
-``npm start``
-
-There are often errors with specific things, but it depends on what is already installed on the computer.  Later we could put it in a docker container or something.
-
-## Performance Testing \& Optimization
-When running in development mode (`npm start`), Guesstimate records performance statistics about a subset of its react
-renders, actions, and selectors. These statistics are recorded and accessible through a Javascript object embedded in
-the window, called `recorder`, with the following API:
+`git clone https://github.com/getguesstimate/guesstimate-app.git`
 
-  * `recorder.nestedTimeline` prints a heirarchical view of all events the recorder has tracked so far, appropriately
-    nested. For example, if the recorder tracks renders on component `A` and component `B`, with `B` a child of `A`, the
-    nested timeline view will show information about the rendering of `B` nested within the entry for the rendering of
-    `A`.
-  * `recorder.timeline` prints a timeseries of all events the recorder has tracked so far.
-  * `recorder.renderTimings` is an object that stores how long each component has taken to render (inclusive).
-  * `recorder.selectorTimings` is an object that stores how long each selector has taken to run (inclusive).
-  * `recorder.actionCounts` is an object that stores how many times each action type has been dispatched.
-  * `recorder.renderCounts` is an object that stores how many times each tracked component has been rendered.
-  * `recorder.selectorCounts` is an object that stores how many times each tracked selector was run.
+`cd guesstimate-app`
 
-To track additional components or selectors, simply add the appropriate recorder methods into the lifecycle. In
-particular, for a component, insert the following:
-  * `window.recorder.recordMountEvent(this)` within `componentWillMount`
-  * `window.recorder.recordUnmountEvent(this)` within `componentWillUnmount`
-  * `window.recorder.recordRenderStartEvent(this)` within `componentWillUpdate`
-  * `window.recorder.recordRenderStopEvent(this)` within `componentDidUpdate`
+`yarn install`
 
-Within a selector, insert the following:
-  * `window.recorder.recordSelectorStart([NAME])` at the start of the selector's execution (or the start of the first
-    selector within the selector chain).
-  * `window.recorder.recordSelectorStop([NAME], [DATA])` just before the selector returns, with data being any data
-    you'd like to track in the timeline with that selector event (the return value is typical).
+`yarn dev`
 
-cats
+There are often errors with specific things, but it depends on what is already installed on the computer. Later we could put it in a docker container or something.