Initial Redux setup

package.json

@@ -12,6 +12,7 @@
     "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.13.0",
         "@babel/preset-react": "^7.10.4",
+        "@redux-devtools/core": "^3.13.1",
         "axios": "^0.19.2",
         "cross-env": "^7.0.3",
         "laravel-mix": "6.0.43",
@@ -27,8 +28,10 @@
     "dependencies": {
         "react-dnd": "^14.0.4",
         "react-dnd-html5-backend": "^14.0.2",
+        "react-redux": "^8.0.5",
         "react-trix": "^0.8.0",
         "react-trix-rte": "^1.0.13",
+        "redux": "^4.2.1",
         "trix": "^1.3.1"
     }
 }

public/js/manifest.js

@@ -1 +1,168 @@
-(()=>{"use strict";var r,e={},o={};function t(r){var n=o[r];if(void 0!==n)return n.exports;var a=o[r]={id:r,exports:{}};return e[r].call(a.exports,a,a.exports,t),a.exports}t.m=e,r=[],t.O=(e,o,n,a)=>{if(!o){var i=1/0;for(v=0;v<r.length;v++){for(var[o,n,a]=r[v],l=!0,f=0;f<o.length;f++)(!1&a||i>=a)&&Object.keys(t.O).every((r=>t.O[r](o[f])))?o.splice(f--,1):(l=!1,a<i&&(i=a));if(l){r.splice(v--,1);var s=n();void 0!==s&&(e=s)}}return e}a=a||0;for(var v=r.length;v>0&&r[v-1][2]>a;v--)r[v]=r[v-1];r[v]=[o,n,a]},t.n=r=>{var e=r&&r.__esModule?()=>r.default:()=>r;return t.d(e,{a:e}),e},t.d=(r,e)=>{for(var o in e)t.o(e,o)&&!t.o(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:e[o]})},t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={929:0,170:0};t.O.j=e=>0===r[e];var e=(e,o)=>{var n,a,[i,l,f]=o,s=0;if(i.some((e=>0!==r[e]))){for(n in l)t.o(l,n)&&(t.m[n]=l[n]);if(f)var v=f(t)}for(e&&e(o);s<i.length;s++)a=i[s],t.o(r,a)&&r[a]&&r[a][0](),r[a]=0;return t.O(v)},o=self.webpackChunk=self.webpackChunk||[];o.forEach(e.bind(null,0)),o.push=e.bind(null,o.push.bind(o))})(),t.nc=void 0})();
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/chunk loaded */
+/******/ 	(() => {
+/******/ 		var deferred = [];
+/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 			if(chunkIds) {
+/******/ 				priority = priority || 0;
+/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 				deferred[i] = [chunkIds, fn, priority];
+/******/ 				return;
+/******/ 			}
+/******/ 			var notFulfilled = Infinity;
+/******/ 			for (var i = 0; i < deferred.length; i++) {
+/******/ 				var [chunkIds, fn, priority] = deferred[i];
+/******/ 				var fulfilled = true;
+/******/ 				for (var j = 0; j < chunkIds.length; j++) {
+/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ 						chunkIds.splice(j--, 1);
+/******/ 					} else {
+/******/ 						fulfilled = false;
+/******/ 						if(priority < notFulfilled) notFulfilled = priority;
+/******/ 					}
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferred.splice(i--, 1)
+/******/ 					var r = fn();
+/******/ 					if (r !== undefined) result = r;
+/******/ 				}
+/******/ 			}
+/******/ 			return result;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			"/js/manifest": 0,
+/******/ 			"css/app": 0
+/******/ 		};
+/******/ 		
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
+/******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
+/******/ 			}
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkId] = 0;
+/******/ 			}
+/******/ 			return __webpack_require__.O(result);
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/nonce */
+/******/ 	(() => {
+/******/ 		__webpack_require__.nc = undefined;
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	
+/******/ })()
+;

public/mix-manifest.json

@@ -1,6 +1,7 @@
 {
-    "/js/app.js": "/js/app.js?id=3a2f76305a12922aa9cd23833dddd6d5",
-    "/js/manifest.js": "/js/manifest.js?id=dc2662db1dfdd6cdfe097bc33347e4fe",
-    "/js/vendor.js": "/js/vendor.js?id=8717194664e5550e7cd28728f7a7fa4b",
-    "/css/app.css": "/css/app.css?id=801e025e1fab2863de7f8ea7ea3b8034"
+    "/js/app.js": "/js/app.js",
+    "/js/manifest.js": "/js/manifest.js",
+    "/js/vendor.js": "/js/vendor.js",
+    "/css/app.css": "/css/app.css",
+    "/public/vendor/cmf/mix-manifest.json": "/public/vendor/cmf/mix-manifest.json"
 }

resources/js/api/api.js

@@ -2,16 +2,10 @@
 
 import axios from 'axios';
 import http from "../util/http";
-import ApiError from "../errors/ApiError";
 import meta from "../util/meta";
-import util from "../core/ui/util";
-
-const setCsrfToken = token => {
-    axios.defaults.headers.common['X-CSRF-TOKEN'] = token;
-};
 
 axios.defaults.withCredentials = true;
-setCsrfToken(meta.get('csrf'));
+axios.defaults.headers.common['X-CSRF-TOKEN'] = meta.get('csrf');
 
 axios.interceptors.request.use((config) => {
     document.body.classList.add('api-loading');

resources/js/app.js

@@ -1,11 +1,17 @@
 "use strict";
 
-import ReactDOM from "react-dom";
 import React from "react";
+import { render } from "react-dom";
+import { Provider } from 'react-redux';
+import store from "./store";
+
 import Cmf from "./core/cmf";
 
 const cmfMountEl = document.querySelector('.cmf-mount');
 
-if (cmfMountEl) {
-    ReactDOM.render(<Cmf title={cmfMountEl.dataset.title} />, cmfMountEl);
-}
+render(
+    <Provider store={store}>
+        <Cmf title={cmfMountEl.dataset.title} />
+    </Provider>,
+    cmfMountEl
+);

resources/js/components/dropdown.js

@@ -1,38 +1,29 @@
 import React from 'react';
 import UiDropdown from "../core/ui/dropdown";
 import LinkList from "../core/ui/link-list";
-import path from "../state/path";
 
-class Dropdown extends React.Component {
+export default function Dropdown(props) {
 
-    static defaultProps = {
-        path: {},
-        data: {},
-        text: '',
-        links: [],
-        style: null
-    };
-
-    goTo(actionPath) {
+    const goTo = (actionPath) => {
 
         let params = {};
 
-        if (this.props.data && this.props.data.id) {
-            params.id = this.props.data.id;
-        } else if (this.props.path.params.id) {
-            params.id = this.props.path.params.id;
+        if (props.data && props.data.id) {
+            params.id = props.data.id;
+        } else if (props.path.params.id) {
+            params.id = props.path.params.id;
         }
 
-        path.goTo(this.props.path.module, actionPath, params);
+        dispatch({type: 'location/update', payload: {module: props.path.module, actionPath, params}});
     }
 
-    render() {
+    const render = () => {
         return (
-            <UiDropdown text={this.props.text} style={this.props.style}>
-                <LinkList links={this.props.links} onClick={actionPath => this.goTo(actionPath)} />
+            <UiDropdown text={props.text} style={props.style}>
+                <LinkList links={props.links} onClick={actionPath => goTo(actionPath)} />
             </UiDropdown>
         );
     }
-}
 
-export default Dropdown;
+    return render();
+}

resources/js/components/link.js

@@ -1,46 +1,48 @@
 import React from 'react';
-import path from "../state/path";
 import Button from "../core/ui/button";
 import UiLink from "../core/ui/link";
+import { useDispatch } from "react-redux";
+import path from "../state/path";
 
-class Link extends React.Component {
+export default function Link(props) {
 
+    /*
     static defaultProps = {
         path: {},
         data: {},
         action: '',
         back: false,
         style: null
     };
+    */
+    const dispatch = useDispatch();
 
-    goTo() {
+    const goTo = () => {
 
-        if (this.props.back) {
+        if (props.back) {
             path.goBack();
             return;
         }
 
         let params = {};
 
-        if (this.props.data && this.props.data.id) {
-            params.id = this.props.data.id;
-        } else if (this.props.path.params.id) {
-            params.id = this.props.path.params.id;
+        if (props.data && props.data.id) {
+            params.id = props.data.id;
+        } else if (props.path.params.id) {
+            params.id = props.path.params.id;
         }
 
-        path.goTo(this.props.path.module, this.props.action, params);
+        dispatch({ type: 'location/update', payload: {module: props.path.module, action: props.action, params} });
     }
 
-    render() {
+    const render = () => {
 
-        if (this.props.style && this.props.style !== 'alt') {
-            return (
-                <Button style={this.props.style} text={this.props.text} onClick={this.goTo.bind(this)} />
-            );
+        if (props.style && props.style !== 'alt') {
+            return <Button style={props.style} text={props.text} onClick={goTo} />;
         }
 
-        return <UiLink style={this.props.style} onClick={this.goTo.bind(this)} text={this.props.text} />;
+        return <UiLink style={props.style} onClick={goTo} text={props.text} />;
     }
-}
 
-export default Link;
+    return render();
+}