From e1f2294fe45215204c62f165a0eb95928565cb7b Mon Sep 17 00:00:00 2001 From: Clement Desmidt Date: Thu, 17 Mar 2022 12:54:49 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Permet=20de=20charger=20en=20local?= =?UTF-8?q?=201=20ou=20plusieurs=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix #1 Fix #2 --- public/css/app.css | 108 +---- public/js/app.js | 605 ++++++++++--------------- resources/js/components/pages/App.tsx | 35 +- resources/js/components/pages/List.tsx | 40 +- resources/js/components/pages/Page.tsx | 129 +++--- resources/js/interfaces/IList.ts | 5 + resources/js/interfaces/IPage.ts | 6 + resources/js/interfaces/IPages.ts | 12 + resources/js/interfaces/PropPage.ts | 10 + resources/js/utils.ts | 14 + 10 files changed, 414 insertions(+), 550 deletions(-) create mode 100644 resources/js/interfaces/IList.ts create mode 100644 resources/js/interfaces/IPage.ts create mode 100644 resources/js/interfaces/IPages.ts create mode 100644 resources/js/interfaces/PropPage.ts create mode 100644 resources/js/utils.ts diff --git a/public/css/app.css b/public/css/app.css index a1346d3..ba250d8 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -11878,39 +11878,6 @@ select { --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } -.container { - width: 100%; -} -@media (min-width: 640px) { - - .container { - max-width: 640px; - } -} -@media (min-width: 768px) { - - .container { - max-width: 768px; - } -} -@media (min-width: 1024px) { - - .container { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - - .container { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - - .container { - max-width: 1536px; - } -} .fixed { position: fixed; } @@ -11935,9 +11902,6 @@ select { .z-50 { z-index: 50; } -.m-0 { - margin: 0px; -} .mx-auto { margin-left: auto; margin-right: auto; @@ -11990,12 +11954,6 @@ select { .mt-3 { margin-top: 0.75rem; } -.mb-3 { - margin-bottom: 0.75rem; -} -.mb-0 { - margin-bottom: 0px; -} .block { display: block; } @@ -12026,12 +11984,6 @@ select { .h-10 { height: 2.5rem; } -.h-4 { - height: 1rem; -} -.h-6 { - height: 1.5rem; -} .min-h-screen { min-height: 100vh; } @@ -12053,12 +12005,6 @@ select { .w-20 { width: 5rem; } -.w-4 { - width: 1rem; -} -.w-6 { - width: 1.5rem; -} .max-w-7xl { max-width: 80rem; } @@ -12131,11 +12077,6 @@ select { margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); -} .overflow-hidden { overflow: hidden; } @@ -12216,12 +12157,6 @@ select { .p-6 { padding: 1.5rem; } -.p-2 { - padding: 0.5rem; -} -.p-0 { - padding: 0px; -} .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -12264,18 +12199,6 @@ select { .pt-6 { padding-top: 1.5rem; } -.pt-2 { - padding-top: 0.5rem; -} -.pb-3 { - padding-bottom: 0.75rem; -} -.pt-4 { - padding-top: 1rem; -} -.pb-1 { - padding-bottom: 0.25rem; -} .pl-3 { padding-left: 0.75rem; } @@ -12288,9 +12211,6 @@ select { .text-center { text-align: center; } -.align-baseline { - vertical-align: baseline; -} .font-sans { font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } @@ -12493,14 +12413,14 @@ select { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } -.hover\:text-gray-700:hover { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} .hover\:text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } +.hover\:text-gray-700:hover { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} .focus\:z-10:focus { z-index: 10; } @@ -12516,14 +12436,14 @@ select { --tw-border-opacity: 1; border-color: rgb(165 180 252 / var(--tw-border-opacity)); } -.focus\:border-gray-300:focus { - --tw-border-opacity: 1; - border-color: rgb(209 213 219 / var(--tw-border-opacity)); -} .focus\:border-indigo-700:focus { --tw-border-opacity: 1; border-color: rgb(67 56 202 / var(--tw-border-opacity)); } +.focus\:border-gray-300:focus { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} .focus\:bg-gray-100:focus { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); @@ -12536,14 +12456,6 @@ select { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } -.focus\:text-gray-700:focus { - --tw-text-opacity: 1; - color: rgb(55 65 81 / var(--tw-text-opacity)); -} -.focus\:text-gray-500:focus { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} .focus\:text-indigo-800:focus { --tw-text-opacity: 1; color: rgb(55 48 163 / var(--tw-text-opacity)); @@ -12552,6 +12464,10 @@ select { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } +.focus\:text-gray-700:focus { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; diff --git a/public/js/app.js b/public/js/app.js index d921160..9737ca6 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -3985,34 +3985,6 @@ function isHostComponent(element) { /***/ }), -/***/ "./node_modules/@mui/icons-material/ExpandMore.js": -/*!********************************************************!*\ - !*** ./node_modules/@mui/icons-material/ExpandMore.js ***! - \********************************************************/ -/***/ ((__unused_webpack_module, exports, __webpack_require__) => { - -"use strict"; - - -var _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ "./node_modules/@babel/runtime/helpers/interopRequireDefault.js"); - -Object.defineProperty(exports, "__esModule", ({ - value: true -})); -exports["default"] = void 0; - -var _createSvgIcon = _interopRequireDefault(__webpack_require__(/*! ./utils/createSvgIcon */ "./node_modules/@mui/icons-material/utils/createSvgIcon.js")); - -var _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); - -var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("path", { - d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" -}), 'ExpandMore'); - -exports["default"] = _default; - -/***/ }), - /***/ "./node_modules/@mui/icons-material/Mail.js": /*!**************************************************!*\ !*** ./node_modules/@mui/icons-material/Mail.js ***! @@ -4118,6 +4090,27 @@ __webpack_require__.r(__webpack_exports__); /***/ }), +/***/ "./node_modules/@mui/icons-material/esm/Download.js": +/*!**********************************************************!*\ + !*** ./node_modules/@mui/icons-material/esm/Download.js ***! + \**********************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var _utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils/createSvgIcon */ "./node_modules/@mui/material/utils/createSvgIcon.js"); +/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); + + +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils_createSvgIcon__WEBPACK_IMPORTED_MODULE_1__["default"])( /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path", { + d: "M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z" +}), 'Download')); + +/***/ }), + /***/ "./node_modules/@mui/icons-material/utils/createSvgIcon.js": /*!*****************************************************************!*\ !*** ./node_modules/@mui/icons-material/utils/createSvgIcon.js ***! @@ -6565,155 +6558,6 @@ const cardClasses = (0,_mui_base__WEBPACK_IMPORTED_MODULE_1__["default"])('MuiCa /***/ }), -/***/ "./node_modules/@mui/material/CardActions/CardActions.js": -/*!***************************************************************!*\ - !*** ./node_modules/@mui/material/CardActions/CardActions.js ***! - \***************************************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) -/* harmony export */ }); -/* harmony import */ var _babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/esm/objectWithoutPropertiesLoose */ "./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js"); -/* harmony import */ var _babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/esm/extends */ "./node_modules/@babel/runtime/helpers/esm/extends.js"); -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! prop-types */ "./node_modules/prop-types/index.js"); -/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_9__); -/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.m.js"); -/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/base */ "./node_modules/@mui/base/composeClasses/composeClasses.js"); -/* harmony import */ var _styles_styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styles/styled */ "./node_modules/@mui/material/styles/styled.js"); -/* harmony import */ var _styles_useThemeProps__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../styles/useThemeProps */ "./node_modules/@mui/material/styles/useThemeProps.js"); -/* harmony import */ var _cardActionsClasses__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./cardActionsClasses */ "./node_modules/@mui/material/CardActions/cardActionsClasses.js"); -/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js"); - - -const _excluded = ["disableSpacing", "className"]; - - - - - - - - - -const useUtilityClasses = ownerState => { - const { - classes, - disableSpacing - } = ownerState; - const slots = { - root: ['root', !disableSpacing && 'spacing'] - }; - return (0,_mui_base__WEBPACK_IMPORTED_MODULE_5__["default"])(slots, _cardActionsClasses__WEBPACK_IMPORTED_MODULE_6__.getCardActionsUtilityClass, classes); -}; - -const CardActionsRoot = (0,_styles_styled__WEBPACK_IMPORTED_MODULE_7__["default"])('div', { - name: 'MuiCardActions', - slot: 'Root', - overridesResolver: (props, styles) => { - const { - ownerState - } = props; - return [styles.root, !ownerState.disableSpacing && styles.spacing]; - } -})(({ - ownerState -}) => (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({ - display: 'flex', - alignItems: 'center', - padding: 8 -}, !ownerState.disableSpacing && { - '& > :not(:first-of-type)': { - marginLeft: 8 - } -})); -const CardActions = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.forwardRef(function CardActions(inProps, ref) { - const props = (0,_styles_useThemeProps__WEBPACK_IMPORTED_MODULE_8__["default"])({ - props: inProps, - name: 'MuiCardActions' - }); - - const { - disableSpacing = false, - className - } = props, - other = (0,_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0__["default"])(props, _excluded); - - const ownerState = (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({}, props, { - disableSpacing - }); - - const classes = useUtilityClasses(ownerState); - return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(CardActionsRoot, (0,_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_1__["default"])({ - className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(classes.root, className), - ownerState: ownerState, - ref: ref - }, other)); -}); - true ? CardActions.propTypes -/* remove-proptypes */ -= { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - - /** - * The content of the component. - */ - children: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().node), - - /** - * Override or extend the styles applied to the component. - */ - classes: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().object), - - /** - * @ignore - */ - className: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().string), - - /** - * If `true`, the actions do not have additional margin. - * @default false - */ - disableSpacing: (prop_types__WEBPACK_IMPORTED_MODULE_9___default().bool), - - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: prop_types__WEBPACK_IMPORTED_MODULE_9___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_9___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_9___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_9___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_9___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_9___default().bool)])), (prop_types__WEBPACK_IMPORTED_MODULE_9___default().func), (prop_types__WEBPACK_IMPORTED_MODULE_9___default().object)]) -} : 0; -/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CardActions); - -/***/ }), - -/***/ "./node_modules/@mui/material/CardActions/cardActionsClasses.js": -/*!**********************************************************************!*\ - !*** ./node_modules/@mui/material/CardActions/cardActionsClasses.js ***! - \**********************************************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "getCardActionsUtilityClass": () => (/* binding */ getCardActionsUtilityClass), -/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) -/* harmony export */ }); -/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @mui/base */ "./node_modules/@mui/base/generateUtilityClass/generateUtilityClass.js"); -/* harmony import */ var _mui_base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/base */ "./node_modules/@mui/base/generateUtilityClasses/generateUtilityClasses.js"); - -function getCardActionsUtilityClass(slot) { - return (0,_mui_base__WEBPACK_IMPORTED_MODULE_0__["default"])('MuiCardActions', slot); -} -const cardActionsClasses = (0,_mui_base__WEBPACK_IMPORTED_MODULE_1__["default"])('MuiCardActions', ['root', 'spacing']); -/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (cardActionsClasses); - -/***/ }), - /***/ "./node_modules/@mui/material/CardContent/CardContent.js": /*!***************************************************************!*\ !*** ./node_modules/@mui/material/CardContent/CardContent.js ***! @@ -36215,14 +36059,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _List__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./List */ "./resources/js/components/pages/List.tsx"); /* harmony import */ var _Prompt__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Prompt */ "./resources/js/components/pages/Prompt.tsx"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Alert/Alert.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/AlertTitle/AlertTitle.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Button/Button.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Divider/Divider.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Alert/Alert.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/AlertTitle/AlertTitle.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Button/Button.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Divider/Divider.js"); /* harmony import */ var storage_encryption__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! storage-encryption */ "./node_modules/storage-encryption/build/index.js"); /* harmony import */ var storage_encryption__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(storage_encryption__WEBPACK_IMPORTED_MODULE_4__); -/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/esm/react-router.js"); -/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js"); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/esm/react-router.js"); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js"); +/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../utils */ "./resources/js/utils.ts"); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } @@ -36255,6 +36100,7 @@ var __rest = undefined && undefined.__rest || function (s, e) { + var app = document.getElementById('app'); var word = "shikiryu"; // FIXME should be in db and ≠ between users @@ -36286,7 +36132,7 @@ function App() { passphrase = _React$useState4[0], setPassphrase = _React$useState4[1]; - var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_5__.useHistory)(); + var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_6__.useHistory)(); var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_3__.useState(checkPassphrase()), _React$useState6 = _slicedToArray(_React$useState5, 2), @@ -36298,6 +36144,15 @@ function App() { error = _React$useState8[0], isError = _React$useState8[1]; + var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_3__.useState((0,_utils__WEBPACK_IMPORTED_MODULE_5__.isAllLoadedLocally)(pages)), + _React$useState10 = _slicedToArray(_React$useState9, 2), + allLoaded = _React$useState10[0], + setAllLoaded = _React$useState10[1]; + + var loadPages = react__WEBPACK_IMPORTED_MODULE_3__.useRef(function () { + return; + }); + var signin = function signin(cb) { var isAuthenticated = checkPassphrase(); setUser(isAuthenticated); @@ -36337,17 +36192,30 @@ function App() { var Error = function Error() { if (error) { - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__["default"], { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__["default"], { severity: "error" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__["default"], null, "Erreur"), "La phrase de passe ne correspond pas."); + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__["default"], null, "Erreur"), "La phrase de passe ne correspond pas."); } return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("div", null); }; + var LoadButton = function LoadButton() { + return allLoaded ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react__WEBPACK_IMPORTED_MODULE_3__.Fragment, null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__["default"], { + variant: "outlined", + size: "small", + sx: { + align: "right" + }, + onClick: function onClick() { + return loadPages.current(); + } + }, "Charger les pages localement"); + }; + var AuthButton = function AuthButton() { - var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_5__.useHistory)(); - return user ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("p", null, "Bienvenue !", " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__["default"], { + var history = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_6__.useHistory)(); + return user ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("p", null, "Bienvenue !", " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__["default"], { variant: "outlined", size: "small", sx: { @@ -36358,7 +36226,7 @@ function App() { return history.push("/diary/public"); }); } - }, "Fermer mon carnet \xE0 clef")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("p", null, "Votre carnet est ferm\xE9.", " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_9__.Link, { + }, "Fermer mon carnet \xE0 clef")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("p", null, "Votre carnet est ferm\xE9.", " ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_10__.Link, { to: "/diary/public/pages" }, "Voir vos pages")); }; @@ -36383,10 +36251,10 @@ function App() { var children = _a.children, rest = __rest(_a, ["children"]); - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_5__.Route, Object.assign({}, rest, { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__.Route, Object.assign({}, rest, { render: function render(_ref) { var location = _ref.location; - return user ? children : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_5__.Redirect, { + return user ? children : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__.Redirect, { to: { pathname: "/diary/public/pass", state: { @@ -36412,10 +36280,11 @@ function App() { pages: listPages, url: getPageContentUrl, passphrase: passphrase, - setPassphrase: setPassphrase, csrf: csrf, - removeUrl: removeUrl - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_Form__WEBPACK_IMPORTED_MODULE_0__["default"], { + removeUrl: removeUrl, + loadPages: loadPages, + setAllLoaded: setAllLoaded + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_Form__WEBPACK_IMPORTED_MODULE_0__["default"], { setListPages: setListPages, csrf: csrf, url: postUrl, @@ -36423,20 +36292,20 @@ function App() { })); } - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(AuthButton, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(Error, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__["default"], { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(AuthButton, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(LoadButton, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(Error, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__["default"], { sx: { height: "20px", mb: "20px", mt: "10px" } - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_5__.Switch, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_5__.Route, { + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__.Switch, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_6__.Route, { path: "/diary/public/pass" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(PromptPage, null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(PrivateRoute, { path: "/diary/public/pages" }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__.createElement(ListPage, null)))); } -/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,react_router_dom__WEBPACK_IMPORTED_MODULE_5__.withRouter)(App)); +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,react_router_dom__WEBPACK_IMPORTED_MODULE_6__.withRouter)(App)); /***/ }), @@ -36587,7 +36456,7 @@ function PageForm(_ref) { var onSubmit = function onSubmit(event) { return __awaiter(_this, void 0, void 0, /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() { - var HTMLForm, decryptedFormData, encryptedFormData, _iterator, _step, _step$value, key, value, newEncryptedString, response, json, uuid, _iterator2, _step2, _key, _newEncryptedString; + var HTMLForm, decryptedFormData, encryptedFormData, _iterator, _step, _step$value, key, value, newEncryptedString, response, json, uuid, _iterator2, _step2, _key, _newEncryptedString, savedDate, oSavedDate; return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) { while (1) { @@ -36650,10 +36519,14 @@ function PageForm(_ref) { if (json.success) { HTMLForm.reset(); + savedDate = json.date; + oSavedDate = new Date(); + oSavedDate.setFullYear(savedDate.substring(0, 4), savedDate.substring(4, 6), savedDate.substring(6, 8)); + oSavedDate.setHours(savedDate.substring(9, 11), savedDate.substring(11, 13), savedDate.substring(13, 15)); setListPages(function (previousList) { return [{ id: uuid, - date: json.date, + date: oSavedDate.toLocaleString(), title: decryptedFormData.get("title"), content: decryptedFormData.get("text") }].concat(_toConsumableArray(previousList)); @@ -36711,10 +36584,11 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ }); /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"); /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Grid/Grid.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Pagination/Pagination.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Grid/Grid.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Pagination/Pagination.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); /* harmony import */ var _Page__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Page */ "./resources/js/components/pages/Page.tsx"); +/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ "./resources/js/utils.ts"); function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } @@ -36764,6 +36638,7 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _argument + function Pages(_ref) { var _this = this; @@ -36772,7 +36647,8 @@ function Pages(_ref) { removeUrl = _ref.removeUrl, csrf = _ref.csrf, passphrase = _ref.passphrase, - setPassphrase = _ref.setPassphrase; + loadPages = _ref.loadPages, + setAllLoaded = _ref.setAllLoaded; var isPassphraseSet = passphrase !== null; var perPage = 3; var total = pages.length; @@ -36826,7 +36702,6 @@ function Pages(_ref) { page: page, url: url, remove: removePage, - setPassphrase: setPassphrase, passphrase: passphrase, key: page.id }); @@ -36847,7 +36722,6 @@ function Pages(_ref) { page: page, url: url, remove: removePage, - setPassphrase: setPassphrase, passphrase: passphrase, key: page.id }); @@ -36863,19 +36737,74 @@ function Pages(_ref) { page: page, url: url, remove: removePage, - setPassphrase: setPassphrase, passphrase: passphrase, key: page.id }); })); }; + var loadAllPages = function loadAllPages() { + listPages.map(function (page) { + loadPage(page).then(function (r) { + setAllLoaded((0,_utils__WEBPACK_IMPORTED_MODULE_3__.isAllLoadedLocally)(listPages)); + }); + }); + }; + + function loadPage(page) { + return __awaiter(this, void 0, void 0, /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2() { + var response, json; + return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + if (!(localStorage.getItem(page.id + "text") === null)) { + _context2.next = 11; + break; + } + + _context2.next = 3; + return fetch(url.replace("replace_me", page.id)); + + case 3: + response = _context2.sent; + _context2.next = 6; + return response.json(); + + case 6: + json = _context2.sent; + localStorage.setItem(page.id + "title", json.metadata.title); + localStorage.setItem(page.id + "text", json.content); + updateListPages([]); + updateListPages(listPages.slice((currentPage - 1) * perPage, (currentPage - 1) * perPage + perPage).map(function (page) { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_Page__WEBPACK_IMPORTED_MODULE_2__["default"], { + page: page, + url: url, + remove: removePage, + passphrase: passphrase, + key: page.id + }); + })); + + case 11: + case "end": + return _context2.stop(); + } + } + }, _callee2); + })); + } + + react__WEBPACK_IMPORTED_MODULE_1__.useEffect(function () { + loadPages.current = loadAllPages; + }, []); + if (isPassphraseSet) { - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_3__["default"], { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { container: true, rowSpacing: 1, columnSpacing: 1 - }, listPagesDisplayed), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { + }, listPagesDisplayed), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__["default"], { count: numberOfPage, page: currentPage, onChange: handlePageChange, @@ -36900,27 +36829,24 @@ function Pages(_ref) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { -/* harmony export */ "default": () => (/* binding */ Page) +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js"); /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/IconButton/IconButton.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Alert/Alert.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/AlertTitle/AlertTitle.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Grid/Grid.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Card/Card.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/CardHeader/CardHeader.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Collapse/Collapse.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/CardActions/CardActions.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/CardContent/CardContent.js"); -/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Typography/Typography.js"); -/* harmony import */ var _mui_icons_material_MoreVert__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/icons-material/MoreVert */ "./node_modules/@mui/icons-material/MoreVert.js"); -/* harmony import */ var _mui_material_styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material/styles */ "./node_modules/@mui/material/styles/styled.js"); -/* harmony import */ var _mui_icons_material_ExpandMore__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/icons-material/ExpandMore */ "./node_modules/@mui/icons-material/ExpandMore.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/IconButton/IconButton.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Grid/Grid.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Card/Card.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/CardHeader/CardHeader.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Collapse/Collapse.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/CardContent/CardContent.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/Alert/Alert.js"); +/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ "./node_modules/@mui/material/AlertTitle/AlertTitle.js"); +/* harmony import */ var _mui_icons_material_MoreVert__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/icons-material/MoreVert */ "./node_modules/@mui/icons-material/MoreVert.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); /* harmony import */ var storage_encryption__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! storage-encryption */ "./node_modules/storage-encryption/build/index.js"); /* harmony import */ var storage_encryption__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(storage_encryption__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/icons-material */ "./node_modules/@mui/icons-material/esm/Delete.js"); +/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/icons-material */ "./node_modules/@mui/icons-material/esm/Download.js"); +/* harmony import */ var _mui_icons_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/icons-material */ "./node_modules/@mui/icons-material/esm/Delete.js"); /* harmony import */ var _uiw_react_md_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @uiw/react-md-editor */ "./node_modules/@uiw/react-md-editor/esm/index.js"); @@ -36968,18 +36894,6 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _argument }); }; -var __rest = undefined && undefined.__rest || function (s, e) { - var t = {}; - - for (var p in s) { - if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; - } - - if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; - } - return t; -}; @@ -36987,174 +36901,128 @@ var __rest = undefined && undefined.__rest || function (s, e) { - - -var ExpandMore = (0,_mui_material_styles__WEBPACK_IMPORTED_MODULE_4__["default"])(function (props) { - var expand = props.expand, - other = __rest(props, ["expand"]); - - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__["default"], Object.assign({}, other)); -})(function (_ref) { - var theme = _ref.theme, - expand = _ref.expand; - return { - transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)', - marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest - }) - }; -}); -function Page(_ref2) { +var Page = function Page(_ref) { var _this = this; - var page = _ref2.page, - url = _ref2.url, - passphrase = _ref2.passphrase, - setPassphrase = _ref2.setPassphrase, - remove = _ref2.remove; + var page = _ref.page, + url = _ref.url, + passphrase = _ref.passphrase, + remove = _ref.remove; var _React$useState = react__WEBPACK_IMPORTED_MODULE_1__.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), more = _React$useState2[0], setMore = _React$useState2[1]; - var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_1__.useState(false), - _React$useState4 = _slicedToArray(_React$useState3, 2), - expanded = _React$useState4[0], - setExpanded = _React$useState4[1]; - var handleMoreClick = function handleMoreClick() { setMore(!more); }; - var handleExpandClick = function handleExpandClick() { - onLoad().then(function (r) { - return setExpanded(!expanded); - }); - }; - var encryptStorage = new storage_encryption__WEBPACK_IMPORTED_MODULE_2__.EncryptStorage(passphrase); - var title, - content = ""; - var alert_popup = null; - var setTitle, - setContent = null; - - var onLoad = function onLoad() { - return __awaiter(_this, void 0, void 0, /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() { - return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - case "end": - return _context.stop(); - } - } - }, _callee); - })); - }; try { - var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_1__.useState(encryptStorage.decrypt(page.id + "text")); + var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_1__.useState(encryptStorage.decrypt(page.id + "title")), + _React$useState4 = _slicedToArray(_React$useState3, 2), + title = _React$useState4[0], + setTitle = _React$useState4[1]; - var _React$useState6 = _slicedToArray(_React$useState5, 2); + var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_1__.useState(encryptStorage.decrypt(page.id + "text")), + _React$useState6 = _slicedToArray(_React$useState5, 2), + content = _React$useState6[0], + setContent = _React$useState6[1]; - content = _React$useState6[0]; - setContent = _React$useState6[1]; - - var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_1__.useState(encryptStorage.decrypt(page.id + "title")); - - var _React$useState8 = _slicedToArray(_React$useState7, 2); - - title = _React$useState8[0]; - setTitle = _React$useState8[1]; - - onLoad = function onLoad() { - return __awaiter(_this, void 0, void 0, /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee2() { + var onLoad = function onLoad() { + return __awaiter(_this, void 0, void 0, /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().mark(function _callee() { var response, json; - return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee2$(_context2) { + return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default().wrap(function _callee$(_context) { while (1) { - switch (_context2.prev = _context2.next) { + switch (_context.prev = _context.next) { case 0: if (!(localStorage.getItem(page.id + "text") === null)) { - _context2.next = 9; + _context.next = 9; break; } - _context2.next = 3; + _context.next = 3; return fetch(url.replace("replace_me", page.id)); case 3: - response = _context2.sent; - _context2.next = 6; + response = _context.sent; + _context.next = 6; return response.json(); case 6: - json = _context2.sent; + json = _context.sent; localStorage.setItem(page.id + "title", json.metadata.title); localStorage.setItem(page.id + "text", json.content); case 9: - setTitle(encryptStorage.decrypt(page.id + "title")); // @ts-ignore - + setTitle(encryptStorage.decrypt(page.id + "title")); setContent(encryptStorage.decrypt(page.id + "text")); case 11: case "end": - return _context2.stop(); + return _context.stop(); } } - }, _callee2); + }, _callee); })); }; + + var icons; + + if (content === null || content === "") { + icons = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { + "aria-label": "load", + onClick: onLoad + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_5__["default"], null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { + "aria-label": "settings", + onClick: handleMoreClick + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material_MoreVert__WEBPACK_IMPORTED_MODULE_6__["default"], null))); + } else { + icons = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { + "aria-label": "settings", + onClick: handleMoreClick + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material_MoreVert__WEBPACK_IMPORTED_MODULE_6__["default"], null)); + } + + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__["default"], { + item: true, + xs: 12, + sm: 12, + md: 12, + id: page.id + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__["default"], { + action: icons, + title: title, + subheader: page.date + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__["default"], { + "in": more, + timeout: "auto", + unmountOnExit: true + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_4__["default"], { + "aria-label": "remove", + onClick: function onClick() { + remove(page.id); + } + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_11__["default"], null)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_uiw_react_md_editor__WEBPACK_IMPORTED_MODULE_3__["default"].Markdown, { + source: content + })))); } catch (e) { console.error(e); - setPassphrase(null); - alert_popup = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__["default"], { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__["default"], { + item: true, + xs: 12, + sm: 12, + md: 12, + id: page.id + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__["default"], { severity: "error" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__["default"], null, "Erreur"), "Vos pages ne peuvent pas \xEAtre d\xE9cod\xE9es \u2014 ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("strong", null, "R\xE9indiquez votre clef!")); + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__["default"], null, "Erreur"), "Cette page ne peut pas \xEAtre d\xE9cod\xE9e \u2014 ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("strong", null, "R\xE9indiquez votre clef!"))); } +}; - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__["default"], { - item: true, - xs: 12, - sm: 12, - md: 12, - id: page.id - }, alert_popup, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__["default"], { - action: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__["default"], { - "aria-label": "settings", - onClick: handleMoreClick - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material_MoreVert__WEBPACK_IMPORTED_MODULE_11__["default"], null)), - title: title, - subheader: page.date - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__["default"], { - "in": more, - timeout: "auto", - unmountOnExit: true - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__["default"], { - "aria-label": "remove", - onClick: function onClick() { - remove(page.id); - } - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material__WEBPACK_IMPORTED_MODULE_13__["default"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__["default"], { - disableSpacing: true - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(ExpandMore, { - expand: expanded, - onClick: handleExpandClick, - "aria-expanded": expanded, - "aria-label": "show more" - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_icons_material_ExpandMore__WEBPACK_IMPORTED_MODULE_15__["default"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__["default"], { - "in": expanded, - timeout: "auto", - unmountOnExit: true - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_16__["default"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__["default"], { - paragraph: true - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_uiw_react_md_editor__WEBPACK_IMPORTED_MODULE_3__["default"].Markdown, { - source: content - })))))); -} +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.forwardRef(Page)); /***/ }), @@ -37556,6 +37424,33 @@ function MobileMenu(_ref) { })))))); } +/***/ }), + +/***/ "./resources/js/utils.ts": +/*!*******************************!*\ + !*** ./resources/js/utils.ts ***! + \*******************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "isAllLoadedLocally": () => (/* binding */ isAllLoadedLocally) +/* harmony export */ }); +var isAllLoadedLocally = function isAllLoadedLocally(pages) { + for (var i in pages) { + var page = pages[i]; + + if (localStorage.getItem(page.id + "title") === null) { + return false; + } + } + + return true; +}; + + + /***/ }), /***/ "./resources/js/bootstrap.js": diff --git a/resources/js/components/pages/App.tsx b/resources/js/components/pages/App.tsx index 21a1875..43a52da 100644 --- a/resources/js/components/pages/App.tsx +++ b/resources/js/components/pages/App.tsx @@ -12,17 +12,14 @@ import { withRouter, useHistory } from "react-router-dom"; - -interface List { - id: string; - date: string; -} +import {IList} from "../../interfaces/IList"; +import {isAllLoadedLocally} from "../../utils"; const app = document.getElementById('app'); const word = "shikiryu"; // FIXME should be in db and ≠ between users -const sessionPassphrase = sessionStorage.getItem("key"); -let pages: List[] = []; +const sessionPassphrase = sessionStorage.getItem("key") as string; +let pages: IList[] = []; let getPageContentUrl, postUrl, removeUrl, @@ -31,7 +28,7 @@ let getPageContentUrl, if (app) { getPageContentUrl = "" + app.getAttribute('data-url'); - pages = JSON.parse("" + app.getAttribute('data-list')); + pages = JSON.parse("" + app.getAttribute('data-list')) as IList[]; postUrl = "" + app.getAttribute('data-post'); removeUrl = "" + app.getAttribute('data-remove'); csrf = "" + app.getAttribute('data-csrf'); @@ -39,11 +36,14 @@ if (app) { } function App() { - const [listPages, setListPages] = React.useState(pages); - const [passphrase, setPassphrase] = React.useState(sessionPassphrase); + const [listPages, setListPages] = React.useState(pages); + const [passphrase, setPassphrase] = React.useState(sessionPassphrase); const history = useHistory(); const [user, setUser] = React.useState(checkPassphrase()); const [error, isError] = React.useState(!checkPassphrase()); + const [allLoaded, setAllLoaded] = React.useState(isAllLoadedLocally(pages)); + + const loadPages = React.useRef(() => {return ;}); const signin = cb => { const isAuthenticated = checkPassphrase(); @@ -92,6 +92,14 @@ function App() { return (
); } + const LoadButton = function() { + return allLoaded ? (<>) : ( + + ); + } + const AuthButton = function() { const history = useHistory(); @@ -156,9 +164,11 @@ function App() { pages={listPages} url={getPageContentUrl} passphrase={passphrase} - setPassphrase={setPassphrase} csrf={csrf} - removeUrl={removeUrl}/> + removeUrl={removeUrl} + loadPages={loadPages} + setAllLoaded={setAllLoaded} + /> @@ -168,6 +178,7 @@ function App() { return (
+ diff --git a/resources/js/components/pages/List.tsx b/resources/js/components/pages/List.tsx index 1b30c97..4c6dda3 100644 --- a/resources/js/components/pages/List.tsx +++ b/resources/js/components/pages/List.tsx @@ -1,13 +1,11 @@ import {Grid, Pagination} from '@mui/material'; import * as React from 'react'; import Page from "./Page"; +import {IPages} from "../../interfaces/IPages"; +import {IList} from "../../interfaces/IList"; +import {isAllLoadedLocally} from "../../utils"; -interface List { - id: string; - date: string; -} - -export default function Pages({pages, url, removeUrl, csrf, passphrase, setPassphrase}) { +export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, setAllLoaded}: IPages) { const isPassphraseSet = passphrase !== null; const perPage = 3; const total = pages.length; @@ -35,20 +33,42 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, setPassp console.log(newListPages.length); console.log(listPages.length); updateListPages(newListPages.slice((currentPage - 1) * perPage, ((currentPage - 1) * perPage) + perPage).map(page => - )); + )); } } const [listPagesDisplayed, updateListPages] = React.useState(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage ).map(page => - )); + )); const handlePageChange = (event: React.ChangeEvent, value: number) => { setPage(value); updateListPages(listPages.slice((value-1) * perPage, ((value-1) * perPage) + perPage).map(page => - )); + )); }; + const loadAllPages = function() { + listPages.map(function(page) { + loadPage(page).then(r => {setAllLoaded(isAllLoadedLocally(listPages));}); + }); + } + + async function loadPage(page: IList) { + if (localStorage.getItem(page.id + "text") === null) { + const response = await fetch(url.replace("replace_me", page.id)); + + const json = await response.json(); + localStorage.setItem(page.id + "title", json.metadata.title); + localStorage.setItem(page.id + "text", json.content); + updateListPages([]); + updateListPages(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage).map(page => + )); + } + } + + React.useEffect(() => { + loadPages.current = loadAllPages; + }, []) + if (isPassphraseSet) { return (
diff --git a/resources/js/components/pages/Page.tsx b/resources/js/components/pages/Page.tsx index 1c7c81f..f56c8ae 100644 --- a/resources/js/components/pages/Page.tsx +++ b/resources/js/components/pages/Page.tsx @@ -1,56 +1,26 @@ import { Alert, AlertTitle, - Card, CardActions, - CardContent, + Card, CardContent, CardHeader, Collapse, - Grid, IconButton, IconButtonProps, - Typography + Grid, IconButton } from '@mui/material'; import MoreVertIcon from '@mui/icons-material/MoreVert'; -import { styled } from '@mui/material/styles'; -import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import * as React from 'react'; import {EncryptStorage} from 'storage-encryption'; -import {Delete} from "@mui/icons-material"; +import {Delete, Download} from "@mui/icons-material"; import MDEditor from "@uiw/react-md-editor"; +import {PropPage} from "../../interfaces/PropPage"; -interface Page { - date: string; - title: string; - content: string; -} - -interface ExpandMoreProps extends IconButtonProps { - expand: boolean; -} - -const ExpandMore = styled((props: ExpandMoreProps) => { - const { expand, ...other } = props; - return ; -})(({ theme, expand }) => ({ - transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)', - marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), -})); - -export default function Page({page, url, passphrase, setPassphrase, remove}) { - const [more, setMore] = React.useState(false); - const [expanded, setExpanded] = React.useState(false); +const Page = function({page, url, passphrase, remove}: PropPage) { + const [more, setMore] = React.useState(false); const handleMoreClick = () => { setMore(!more); }; - const handleExpandClick = () => { onLoad().then(r => setExpanded(!expanded)); }; const encryptStorage = new EncryptStorage(passphrase); - let title, content = ""; - let alert_popup:JSX.Element|null = null; - let setTitle, setContent: React.Dispatch|null = null; - let onLoad = async () => {}; try { - [content, setContent] = React.useState(encryptStorage.decrypt(page.id + "text")); - [title, setTitle] = React.useState(encryptStorage.decrypt(page.id + "title")); - onLoad = async () => { + const [title, setTitle] = React.useState(encryptStorage.decrypt(page.id + "title")); + const [content, setContent] = React.useState(encryptStorage.decrypt(page.id + "text")); + const onLoad = async () => { if (localStorage.getItem(page.id + "text") === null) { const response = await fetch(url.replace("replace_me", page.id)); @@ -59,54 +29,59 @@ export default function Page({page, url, passphrase, setPassphrase, remove}) { localStorage.setItem(page.id + "text", json.content); } setTitle(encryptStorage.decrypt(page.id + "title")); - // @ts-ignore setContent(encryptStorage.decrypt(page.id + "text")); } - } catch (e) { - console.error(e); - setPassphrase(null); - alert_popup = - Erreur - Vos pages ne peuvent pas être décodées — Réindiquez votre clef! - - } + let icons; + if (content === null || content === "") { + icons = (
+ + + + + + +
); + } else { + icons = ( + + + + ); + } - return ( + return ( - {alert_popup} - - + icons } title={title} subheader={page.date} - /> - - {remove(page.id)}} > - - - - - - - - - - - - - - - + > + + {remove(page.id)}} > + + + + + + + - ); + ); + } catch (e) { + console.error(e); + return ( + + + Erreur + Cette page ne peut pas être décodée — Réindiquez votre clef! + + + ); + } } + +export default React.forwardRef(Page); diff --git a/resources/js/interfaces/IList.ts b/resources/js/interfaces/IList.ts new file mode 100644 index 0000000..584a9dd --- /dev/null +++ b/resources/js/interfaces/IList.ts @@ -0,0 +1,5 @@ +export interface IList { + id: string; + date: string; + isLoaded: boolean; +} diff --git a/resources/js/interfaces/IPage.ts b/resources/js/interfaces/IPage.ts new file mode 100644 index 0000000..25ef4ab --- /dev/null +++ b/resources/js/interfaces/IPage.ts @@ -0,0 +1,6 @@ +export interface IPage { + id: string; + date: string; + title: string; + content: string; +} diff --git a/resources/js/interfaces/IPages.ts b/resources/js/interfaces/IPages.ts new file mode 100644 index 0000000..e193c80 --- /dev/null +++ b/resources/js/interfaces/IPages.ts @@ -0,0 +1,12 @@ +import {IList} from "./IList"; +import * as React from "react"; + +export interface IPages { + pages: IList[]; + url: string; + removeUrl: string; + csrf: string; + passphrase: string; + loadPages: React.MutableRefObject<() => void>; + setAllLoaded: React.Dispatch>; +} diff --git a/resources/js/interfaces/PropPage.ts b/resources/js/interfaces/PropPage.ts new file mode 100644 index 0000000..f691ad3 --- /dev/null +++ b/resources/js/interfaces/PropPage.ts @@ -0,0 +1,10 @@ +import { Ref } from "react"; +import {IList} from "./IList"; + +export interface PropPage { + page: IList; + url: string; + passphrase: string; + remove: (id) => void; + ref: Ref; +} diff --git a/resources/js/utils.ts b/resources/js/utils.ts new file mode 100644 index 0000000..132eaea --- /dev/null +++ b/resources/js/utils.ts @@ -0,0 +1,14 @@ +import {IList} from "./interfaces/IList"; + +const isAllLoadedLocally = function(pages: IList[]) { + for (const i in pages) { + const page = pages[i]; + if (localStorage.getItem(page.id + "title") === null) { + return false; + } + } + + return true; +} + +export { isAllLoadedLocally };