Revert "[#49] Refactor js extension to jsx"

This reverts commit b6d949c.

build-utils/webpack.common.js

@@ -14,15 +14,12 @@ const config = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(js)$/,
         exclude: /node_modules/,
         use: ["babel-loader"],
       },
     ],
   },
-  resolve: {
-    extensions: [".js", ".jsx"],
-  },
   optimization: {
     splitChunks: {
       cacheGroups: {

build-utils/webpack.dev.js

@@ -7,7 +7,7 @@ const port = process.env.PORT || 3000;
 const config = {
   mode: "development",
   entry: {
-    app: `${commonPaths.appEntry}/index.jsx`,
+    app: `${commonPaths.appEntry}/index.js`,
   },
   output: {
     filename: "[name].[hash].js",

build-utils/webpack.prod.js

@@ -6,7 +6,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const config = {
   mode: "production",
   entry: {
-    app: [`${commonPaths.appEntry}/index.jsx`],
+    app: [`${commonPaths.appEntry}/index.js`],
   },
   output: {
     filename: "static/[name].[hash].js",

package.json

@@ -2,7 +2,7 @@
   "name": "react-starter-boilerplate-hmr",
   "version": "1.0.0",
   "description": "SPipes editor UI",
-  "main": "index.jsx",
+  "main": "index.js",
   "author": "Petr Jordan",
   "license": "MIT",
   "scripts": {

src/components/App.jsx → src/components/App.js

@@ -2,22 +2,22 @@ import React, { Component } from "react";
 import { Switch, BrowserRouter as Router, Route } from "react-router-dom";
 import importedComponent from "react-imported-component";
 
-import Home from "./Home.jsx";
-import Loading from "./Loading.jsx";
+import Home from "./Home";
+import Loading from "./Loading";
 
-const Scripts = importedComponent(() => import(/* webpackChunkName:'Scripts' */ "./Scripts.jsx"), {
+const Scripts = importedComponent(() => import(/* webpackChunkName:'Scripts' */ "./Scripts"), {
   LoadingComponent: Loading,
 });
-const Executions = importedComponent(() => import(/* webpackChunkName:'Executions' */ "./Executions.jsx"), {
+const Executions = importedComponent(() => import(/* webpackChunkName:'Executions' */ "./Executions"), {
   LoadingComponent: Loading,
 });
-const AsyncDynamicPAge = importedComponent(() => import(/* webpackChunkName:'DynamicPage' */ "./DynamicPage.jsx"), {
+const AsyncDynamicPAge = importedComponent(() => import(/* webpackChunkName:'DynamicPage' */ "./DynamicPage"), {
   LoadingComponent: Loading,
 });
-const AsyncDagre = importedComponent(() => import(/* webpackChunkName:'Dagre' */ "./dagre/Dagre.jsx"), {
+const AsyncDagre = importedComponent(() => import(/* webpackChunkName:'Dagre' */ "./dagre/Dagre.js"), {
   LoadingComponent: Loading,
 });
-const AsyncNoMatch = importedComponent(() => import(/* webpackChunkName:'NoMatch' */ "./NoMatch.jsx"), {
+const AsyncNoMatch = importedComponent(() => import(/* webpackChunkName:'NoMatch' */ "./NoMatch"), {
   LoadingComponent: Loading,
 });
 

src/components/DynamicPage.jsx → src/components/DynamicPage.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Header } from "semantic-ui-react";
 
-import Layout from "./Layout.jsx";
+import Layout from "./Layout";
 
 const DynamicPage = () => {
   return (

src/components/Executions.jsx → src/components/Executions.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 
-import Layout from "./Layout.jsx";
+import Layout from "./Layout";
 import {
   ABSOLUTE_PATH,
   DISPLAY_NAME,
@@ -9,7 +9,7 @@ import {
   Rest,
   START_DATE_UNIX,
   TRANSFORMATION,
-} from "./rest/Rest.jsx";
+} from "./rest/Rest";
 import { Col, Container, Row, Table } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMugHot, faTrash, faRunning, faPlayCircle, faEdit, faQuestion } from "@fortawesome/free-solid-svg-icons";

src/components/Home.jsx → src/components/Home.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
 
-import Layout from "./Layout.jsx";
-import ScriptsTree from "./treebeard/ScriptsTree.jsx";
+import Layout from "./Layout";
+import ScriptsTree from "./treebeard/ScriptsTree";
 import { Link } from "react-router-dom";
 
 class Home extends React.Component {

src/components/Layout.jsx → src/components/Layout.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Container, Icon } from "semantic-ui-react";
 
 import { Nav, Navbar } from "react-bootstrap";
-import NavbarMenu from "./NavbarMenu.jsx";
+import NavbarMenu from "./NavbarMenu";
 
 const Layout = ({ children }) => {
   return (

src/components/Loading.jsx → src/components/Loading.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Spinner from "./spinner/Spinner.jsx";
-import { DelayRender } from "./DelayRender.jsx";
+import Spinner from "./spinner/Spinner";
+import { DelayRender } from "./DelayRender";
 
 const Loading = DelayRender(Spinner, 0);
 

src/components/ModuleTypesSelection.jsx → src/components/ModuleTypesSelection.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Dropdown } from "semantic-ui-react";
-import { Rest } from "./rest/Rest.jsx";
-import { ICONS_MAP } from "./dagre/DagreIcons.jsx";
+import { Rest } from "./rest/Rest";
+import { ICONS_MAP } from "./dagre/DagreIcons";
 
 class ModuleTypesSelection extends React.Component {
   constructor(props) {

src/components/NoMatch.jsx → src/components/NoMatch.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "semantic-ui-react";
 
-import Layout from "./Layout.jsx";
+import Layout from "./Layout";
 
 const NoMatch = () => {
   return (

src/components/ScriptFunctionSelection.jsx → src/components/ScriptFunctionSelection.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Dropdown } from "semantic-ui-react";
-import { FUNCTION, FUNCTION_NAME, Rest } from "./rest/Rest.jsx";
-import { ICONS_MAP } from "./dagre/DagreIcons.jsx";
+import { FUNCTION, FUNCTION_NAME, Rest } from "./rest/Rest";
+import { ICONS_MAP } from "./dagre/DagreIcons";
 
 class ScriptFunctionSelection extends React.Component {
   constructor(props) {

src/components/Scripts.jsx → src/components/Scripts.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { Grid } from "semantic-ui-react";
 
-import Layout from "./Layout.jsx";
-import ScriptsTree from "./treebeard/ScriptsTree.jsx";
+import Layout from "./Layout";
+import ScriptsTree from "./treebeard/ScriptsTree";
 import { Link } from "react-router-dom";
 
 class Scripts extends React.Component {

src/components/dagre/Dagre.jsx → src/components/dagre/Dagre.js

@@ -13,25 +13,25 @@ import {
   MODULE_VARIABLES,
   Rest,
   SCRIPT_PATH,
-} from "../rest/Rest.jsx";
-import NavbarMenu from "../NavbarMenu.jsx";
-import SFormsModal from "../sform/SFormsModal.jsx";
-import ModuleTypesSelection from "../ModuleTypesSelection.jsx";
-import ScriptInputOutputModal from "../sform/ScriptInputOutputModal.jsx";
+} from "../rest/Rest";
+import NavbarMenu from "../NavbarMenu";
+import SFormsModal from "../sform/SFormsModal";
+import ModuleTypesSelection from "../ModuleTypesSelection";
+import ScriptInputOutputModal from "../sform/ScriptInputOutputModal";
 import { Dropdown } from "semantic-ui-react";
-import { ICONS_MAP } from "./DagreIcons.jsx";
-import ScriptFunctionSelection from "../ScriptFunctionSelection.jsx";
+import { ICONS_MAP } from "./DagreIcons";
+import ScriptFunctionSelection from "../ScriptFunctionSelection";
 import { Button } from "react-bootstrap";
-import ValidationReportModal from "../modal/ValidationReportModal.jsx";
+import ValidationReportModal from "../modal/ValidationReportModal";
 import { w3cwebsocket as W3CWebSocket } from "websocket";
-import MoveModuleModal from "../modal/MoveModuleModal.jsx";
-import ScriptOntologyModal from "../modal/ScriptOntologyModal.jsx";
-import ScriptExecutionModal from "../modal/ScriptExecutionModal.jsx";
+import MoveModuleModal from "../modal/MoveModuleModal";
+import ScriptOntologyModal from "../modal/ScriptOntologyModal";
+import ScriptExecutionModal from "../modal/ScriptExecutionModal";
 import "@triply/yasgui/build/yasgui.min.css";
-import SFormsFunctionModal from "../sform/SFormsFunctionModal.jsx";
+import SFormsFunctionModal from "../sform/SFormsFunctionModal";
 import "@kbss-cvut/s-forms/css";
-import Loading from "../Loading.jsx";
-import ErrorModal from "../modal/ErrorModal.jsx";
+import Loading from "../Loading";
+import ErrorModal from "../modal/ErrorModal";
 const TYPE = "http://onto.fel.cvut.cz/ontologies/s-pipes-view/has-module-type";
 const LABEL = "http://www.w3.org/2000/01/rdf-schema#label";
 const X = "http://onto.fel.cvut.cz/ontologies/s-pipes-view/has-x-coordinate";

src/components/modal/ErrorModal.jsx → src/components/modal/ErrorModal.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Button, Form, Modal } from "react-bootstrap";
-import { Rest } from "../rest/Rest.jsx";
+import { Rest } from "../rest/Rest";
 
 class ErrorModal extends React.Component {
   constructor(props) {

src/components/modal/FunctionExecutionModal.jsx → src/components/modal/FunctionExecutionModal.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Button, Form, Modal } from "react-bootstrap";
-import { Rest } from "../rest/Rest.jsx";
+import { Rest } from "../rest/Rest";
 
 class FunctionExecutionModal extends React.Component {
   constructor(props) {

src/components/modal/MoveModuleModal.jsx → src/components/modal/MoveModuleModal.js

@@ -14,12 +14,12 @@ import {
   SCRIPT_PATH,
   START_DATE_UNIX,
   TRANSFORMATION,
-} from "../rest/Rest.jsx";
+} from "../rest/Rest";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import Moment from "react-moment";
 import { Link } from "react-router-dom";
-import Layout from "../Layout.jsx";
+import Layout from "../Layout";
 
 class MoveModuleModal extends React.Component {
   constructor(props) {

src/components/modal/ScriptActionsModuleModal.jsx → src/components/modal/ScriptActionsModuleModal.js

@@ -14,12 +14,12 @@ import {
   SCRIPT_PATH,
   START_DATE_UNIX,
   TRANSFORMATION,
-} from "../rest/Rest.jsx";
+} from "../rest/Rest";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import Moment from "react-moment";
 import { Link } from "react-router-dom";
-import Layout from "../Layout.jsx";
+import Layout from "../Layout";
 
 class ScriptActionsModuleModal extends React.Component {
   constructor(props) {

src/components/modal/ScriptExecutionModal.jsx → src/components/modal/ScriptExecutionModal.js

@@ -13,7 +13,7 @@ import {
   MODULE_VARIABLES,
   MODULE_VARIABLE_NAME,
   MODULE_VARIABLE_VALUE,
-} from "../rest/Rest.jsx";
+} from "../rest/Rest";
 import { faDownload, faMugHot } from "@fortawesome/free-solid-svg-icons";
 import Moment from "react-moment";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

src/components/modal/ScriptOntologyModal.jsx → src/components/modal/ScriptOntologyModal.js

@@ -14,12 +14,12 @@ import {
   SCRIPT_PATH,
   START_DATE_UNIX,
   TRANSFORMATION,
-} from "../rest/Rest.jsx";
+} from "../rest/Rest";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faMugHot, faPlayCircle, faPlusCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import Moment from "react-moment";
 import { Link } from "react-router-dom";
-import Layout from "../Layout.jsx";
+import Layout from "../Layout";
 
 class ScriptOntologyModal extends React.Component {
   constructor(props) {

src/components/modal/ValidationReportModal.jsx → src/components/modal/ValidationReportModal.js

@@ -12,7 +12,7 @@ import {
   RULE_COMMENT,
   START_DATE_UNIX,
   TRANSFORMATION,
-} from "../rest/Rest.jsx";
+} from "../rest/Rest";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEdit, faMugHot, faPlayCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
 import Moment from "react-moment";

src/components/sform/SFormsFunctionModal.jsx → src/components/sform/SFormsFunctionModal.js

@@ -2,10 +2,10 @@ import React from "react";
 import SForms from "@kbss-cvut/s-forms";
 
 import { Button, Modal } from "react-bootstrap";
-import { Rest } from "../rest/Rest.jsx";
+import { Rest } from "../rest/Rest";
 import "@triply/yasgui/build/yasgui.min.css";
-import ErrorModal from "../modal/ErrorModal.jsx";
-import ScriptActionsModuleModal from "../modal/ScriptActionsModuleModal.jsx";
+import ErrorModal from "../modal/ErrorModal";
+import ScriptActionsModuleModal from "../modal/ScriptActionsModuleModal";
 
 class SFormsFunctionModal extends React.Component {
   constructor(props) {

src/components/sform/SFormsModal.jsx → src/components/sform/SFormsModal.js

@@ -1,10 +1,10 @@
 import React from "react";
 import SForms from "@kbss-cvut/s-forms";
 import { Button, Modal } from "react-bootstrap";
-import { Rest } from "../rest/Rest.jsx";
-import Loading from "../Loading.jsx";
+import { Rest } from "../rest/Rest";
+import Loading from "../Loading";
 import "@triply/yasgui/build/yasgui.min.css";
-import ErrorModal from "../modal/ErrorModal.jsx";
+import ErrorModal from "../modal/ErrorModal";
 
 class SFormsModal extends React.Component {
   constructor(props) {

src/components/sform/ScriptInputOutputModal.jsx → src/components/sform/ScriptInputOutputModal.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Alert, Button, Form, Modal } from "react-bootstrap";
-import { Rest } from "../rest/Rest.jsx";
+import { Rest } from "../rest/Rest";
 import Yasgui from "@triply/yasgui";
 import "@triply/yasgui/build/yasgui.min.css";
 import JSONPretty from "react-json-pretty";

src/components/treebeard/ScriptsTree.jsx → src/components/treebeard/ScriptsTree.js

@@ -1,14 +1,14 @@
 import React, { Fragment } from "react";
 import { includes } from "lodash";
 
-import styles from "./styles.jsx";
-import Header from "./Header.jsx";
+import styles from "./styles";
+import Header from "./Header";
 import { Treebeard, decorators } from "react-treebeard";
-import { Rest } from "../rest/Rest.jsx";
+import { Rest } from "../rest/Rest";
 import { withRouter } from "react-router-dom";
-import ScriptActionsModuleModal from "../modal/ScriptActionsModuleModal.jsx";
-import Loading from "../Loading.jsx";
-import ErrorModal from "../modal/ErrorModal.jsx";
+import ScriptActionsModuleModal from "../modal/ScriptActionsModuleModal";
+import Loading from "../Loading";
+import ErrorModal from "../modal/ErrorModal";
 
 class ScriptsTree extends React.Component {
   constructor(props) {

src/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+
+import "./index.css";
+import "bootstrap/dist/css/bootstrap.css";
+
+const render = (Component) => ReactDOM.render(<Component />, document.getElementById("root"));
+
+render(App);