ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.

2 files changed, 15 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index b000b9e2..b714a7d2 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 import ScenarioListContainer from '../../../../containers/app/sidebars/project/ScenarioListContainer'
 
@@ -44,11 +44,12 @@ class PortfolioListComponent extends React.Component {
                                 {portfolio.name}
                             </div>
                             <div className="col-5 text-right">
-                                <Link
-                                    className="btn btn-outline-primary mr-1 fa fa-play"
-                                    to={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}
-                                    onClick={() => this.props.onChoosePortfolio(portfolio._id)}
-                                />
+                                <Link href={`/projects/${this.props.currentProjectId}/portfolios/${portfolio._id}`}>
+                                    <a
+                                        className="btn btn-outline-primary mr-1 fa fa-play"
+                                        onClick={() => this.props.onChoosePortfolio(portfolio._id)}
+                                    />
+                                </Link>
                                 <span
                                     className="btn btn-outline-danger fa fa-trash"
                                     onClick={() => this.onDelete(portfolio._id)}
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index e775a663..4efa99ef 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Shapes from '../../../../shapes'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import FontAwesome from 'react-fontawesome'
 
 class ScenarioListComponent extends React.Component {
@@ -34,10 +34,13 @@ class ScenarioListComponent extends React.Component {
                         </div>
                         <div className="col-5 text-right">
                             <Link
-                                className="btn btn-outline-primary mr-1 fa fa-play disabled"
-                                to={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                                onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
-                            />
+                                href={`/projects/${this.props.currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
+                            >
+                                <a
+                                    className="btn btn-outline-primary mr-1 fa fa-play disabled"
+                                    onClick={() => this.props.onChooseScenario(scenario.portfolioId, scenario._id)}
+                                />
+                            </Link>
                             <span
                                 className={'btn btn-outline-danger fa fa-trash ' + (idx === 0 ? 'disabled' : '')}
                                 onClick={() => (idx !== 0 ? this.onDelete(scenario._id) : undefined)}