From 04f609294add8054c93045101ec6cb8de528578b Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Fri, 14 Jun 2019 11:53:32 -0600 Subject: [PATCH 001/192] Added login button class --- .../app/templates/src/containers/Login/login.component.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/generators/app/templates/src/containers/Login/login.component.js b/generators/app/templates/src/containers/Login/login.component.js index f8066af2..535db910 100644 --- a/generators/app/templates/src/containers/Login/login.component.js +++ b/generators/app/templates/src/containers/Login/login.component.js @@ -48,6 +48,11 @@ const LoginComponent = props => { emptyProvider: t('login.errors.emptyProvider'), emptyWebId: t('login.errors.emptyWebId') }} + theme={{ + buttonLogin: 'ids-link', + inputLogin: '', + linkButton: '' + }} /> From f9e3cf18a146687a67ab4f3e89bc002bafdbb4f3 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 17 Jun 2019 12:19:59 -0600 Subject: [PATCH 002/192] Code prettified --- generators/app/templates/.eslintrc | 34 +++ generators/app/templates/.prettierrc | 4 + generators/app/templates/config/env.js | 12 +- .../app/templates/config/jest/cssTransform.js | 2 +- .../templates/config/jest/fileTransform.js | 2 +- generators/app/templates/config/paths.js | 12 +- .../app/templates/config/webpack.config.js | 221 ++++++++---------- .../config/webpackDevServer.config.js | 9 +- generators/app/templates/package.json | 17 +- generators/app/templates/public/index.html | 5 +- .../public/locales/en-US/translation.json | 6 +- .../public/locales/en/translation.json | 6 +- .../public/locales/es/translation.json | 4 +- generators/app/templates/scripts/build.js | 25 +- generators/app/templates/scripts/start.js | 16 +- generators/app/templates/scripts/test.js | 8 +- generators/app/templates/src/App.js | 28 +-- .../AuthNavBar/auth-nav-bar.component.js | 32 +-- .../AuthNavBar/auth-nav-bar.container.js | 21 +- .../AuthNavBar/auth-nav-bar.test.js | 18 +- .../children/NavbarProfile/index.js | 2 +- .../nav-bar-profile.component.js | 123 +++++----- .../NavbarProfile/nav-bar-profile.test.js | 8 +- .../components/AuthNavBar/children/index.js | 2 +- .../src/components/AuthNavBar/index.js | 2 +- .../ErrorBoundary/error-boundary.component.js | 8 +- .../error-boundary.component.test.js | 12 +- .../src/components/Footer/footer.component.js | 40 +++- .../src/components/Footer/footer.test.js | 19 +- .../templates/src/components/Footer/index.js | 3 +- .../GlobalError/global-error.component.js | 4 +- .../global-error.component.test.js | 13 +- .../GlobalError/global-error.style.js | 6 +- .../ImageProfile/image-profile.component.js | 6 +- .../ImageProfile/image-profile.style.js | 2 +- .../ImageProfile/image-profile.test.js | 15 +- .../HamburgerButton/hamburger.component.js | 18 +- .../NavBar/children/HamburgerButton/index.js | 2 +- .../mobile.navigation.component.js | 37 ++- .../mobile.navigation.style.js | 9 +- .../Navigation/navigation.component.js | 4 +- .../children/Navigation/navigation.test.js | 31 +-- .../NavBar/children/Toolbar/index.js | 2 +- .../children/Toolbar/toolbar.component.js | 2 +- .../NavBar/children/Toolbar/toolbar.test.js | 19 +- .../src/components/NavBar/children/index.js | 6 +- .../components/NavBar/nav-bar.component.js | 157 ++++++------- .../src/components/NavBar/nav-bar.test.js | 39 ++-- .../components/Utils/Badge/badge.component.js | 4 +- .../src/components/Utils/Badge/badge.style.js | 2 +- .../src/components/Utils/Badge/badge.test.js | 30 +-- .../center-container.component.js | 4 +- .../CenterContainer/center-container.style.js | 2 +- .../CenterContainer/center-container.test.js | 26 +-- .../Utils/Dropdown/dropdown.component.js | 33 ++- .../Utils/Dropdown/dropdown.style.js | 9 +- .../Utils/Dropdown/dropdown.test.js | 14 +- .../gradient-background.component.js | 4 +- .../gradient-background.style.js | 13 +- .../gradient-background.test.js | 8 +- .../components/Utils/Input/input.component.js | 4 +- .../Utils/LanguageDropdown/index.js | 2 +- .../language-dropdown.component.js | 40 ++-- .../language-dropdown.test.js | 8 +- .../Utils/Loader/loader.component.js | 4 +- .../Utils/Loader/loader.component.test.js | 4 +- .../components/Utils/Loader/loader.style.js | 2 +- .../components/Utils/Panel/panel.component.js | 4 +- .../src/components/Utils/Panel/panel.style.js | 4 +- .../src/components/Utils/Panel/panel.test.js | 6 +- .../Utils/Radiobutton/radio.component.js | 11 +- .../Utils/Radiobutton/radio.test.js | 10 +- .../toaster-notification.component.js | 20 +- .../toaster-notification.style.js | 6 +- .../toaster-notification.test.js | 12 +- .../templates/src/components/Utils/index.js | 20 +- .../app/templates/src/components/index.js | 8 +- .../templates/src/containers/Home/index 2.js | 2 +- .../templates/src/containers/Home/index.js | 2 +- .../templates/src/containers/Login/index.js | 2 +- .../src/containers/Login/login.component.js | 33 ++- .../src/containers/Login/login.style.js | 10 +- .../src/containers/Login/login.test.js | 21 +- .../PageNotFound/page-not-found.component.js | 17 +- .../PageNotFound/page-not-found.style.js | 31 ++- .../PageNotFound/page-not-found.test.js | 21 +- .../src/containers/Preferences/index.js | 2 +- .../components/Image/image.component.js | 178 +++++++------- .../containers/Profile/profile.container.js | 196 +++++++--------- .../src/containers/Profile/profile.style.js | 212 ++++++++--------- .../ProviderItem/provider-item.test.js | 26 +-- .../ProviderItem/provider.item.component.js | 8 +- .../children/ProviderItem/provider.style.js | 4 +- .../registration-success.component.js | 12 +- .../registration-success.style.js | 6 +- .../registration-success.test.js | 14 +- .../containers/Register/register.component.js | 44 ++-- .../containers/Register/register.container.js | 6 +- .../src/containers/Register/register.style.js | 4 +- .../src/containers/Register/register.test.js | 30 ++- .../containers/Welcome/welcome.component.js | 90 +++---- .../containers/Welcome/welcome.container.js | 172 +++++++------- .../src/containers/Welcome/welcome.style.js | 21 +- .../src/containers/Welcome/welcome.test.js | 27 +-- .../app/templates/src/containers/index.js | 8 +- .../app/templates/src/hocs/isLoading.js | 4 +- generators/app/templates/src/i18n.js | 12 +- generators/app/templates/src/index.css | 6 +- generators/app/templates/src/index.js | 18 +- .../src/layouts/NotLoggedInLayout/index.js | 2 +- .../NotLoggedInLayout/not-logged-in.layout.js | 32 ++- .../src/layouts/PrivateLayout/index.js | 2 +- .../layouts/PrivateLayout/private.layout.js | 32 +-- .../src/layouts/PublicLayout/index.js | 2 +- .../src/layouts/PublicLayout/public.layout.js | 32 +-- generators/app/templates/src/layouts/index.js | 6 +- generators/app/templates/src/routes.js | 30 +-- generators/app/templates/src/serviceWorker.js | 8 +- .../app/templates/src/services/index.js | 2 +- .../app/templates/src/services/provider.js | 20 +- generators/app/templates/src/utils/context.js | 3 +- generators/app/templates/src/utils/index.js | 8 +- .../templates/src/utils/styledComponents.js | 10 +- .../@fortawesome/react-fontawesome.js | 2 +- .../test/__mocks__/@solid/query-ldflex.js | 2 +- .../test/__mocks__/solid-auth-client.js | 3 +- .../app/templates/test/__mocks__/useLdflex.js | 9 +- 127 files changed, 1371 insertions(+), 1460 deletions(-) create mode 100644 generators/app/templates/.eslintrc create mode 100644 generators/app/templates/.prettierrc diff --git a/generators/app/templates/.eslintrc b/generators/app/templates/.eslintrc new file mode 100644 index 00000000..76851f5a --- /dev/null +++ b/generators/app/templates/.eslintrc @@ -0,0 +1,34 @@ +{ + "parser": "babel-eslint", + "extends": ["react-app", "prettier"], + "plugins": ["react", "prettier"], + "rules": { + "prettier/prettier": [1], + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "no-underscore-dangle": [0], + "import/no-unresolved": [0], + "no-unused-vars": [1], + "react/prop-types": [1], + "no-shadow": [0], + "no-restricted-syntax": [0], + "consistent-return": [0], + "import/prefer-default-export": [0], + "import/no-cycle": [0], + "quotes": [1, "single"], + "react/no-array-index-key": [1], + "react/jsx-one-expression-per-line": [0] + }, + "settings": { + "import/resolver": { "babel-module": {} } + }, + "parserOptions": { + "ecmaFeatures": { + "jsx": true, + "modules": true + } + }, + "env": { + "browser": true, + "jest": true + } +} diff --git a/generators/app/templates/.prettierrc b/generators/app/templates/.prettierrc new file mode 100644 index 00000000..554f2a3b --- /dev/null +++ b/generators/app/templates/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "printWidth": 100 +} diff --git a/generators/app/templates/config/env.js b/generators/app/templates/config/env.js index a3eef254..6d0f574d 100644 --- a/generators/app/templates/config/env.js +++ b/generators/app/templates/config/env.js @@ -7,9 +7,7 @@ delete require.cache[require.resolve('./paths')]; const NODE_ENV = process.env.NODE_ENV; if (!NODE_ENV) { - throw new Error( - 'The NODE_ENV environment variable is required but was not specified.' - ); + throw new Error('The NODE_ENV environment variable is required but was not specified.'); } // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use @@ -20,7 +18,7 @@ var dotenvFiles = [ // since normally you expect test to produce the same // results for everyone NODE_ENV !== 'test' && `${paths.dotenv}.local`, - paths.dotenv, + paths.dotenv ].filter(Boolean); // Load environment variables from .env* files. Suppress warnings using silent @@ -32,7 +30,7 @@ dotenvFiles.forEach(dotenvFile => { if (fs.existsSync(dotenvFile)) { require('dotenv-expand')( require('dotenv').config({ - path: dotenvFile, + path: dotenvFile }) ); } @@ -74,7 +72,7 @@ function getClientEnvironment(publicUrl) { // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. - PUBLIC_URL: publicUrl, + PUBLIC_URL: publicUrl } ); // Stringify all values so we can feed into Webpack DefinePlugin @@ -82,7 +80,7 @@ function getClientEnvironment(publicUrl) { 'process.env': Object.keys(raw).reduce((env, key) => { env[key] = JSON.stringify(raw[key]); return env; - }, {}), + }, {}) }; return { raw, stringified }; diff --git a/generators/app/templates/config/jest/cssTransform.js b/generators/app/templates/config/jest/cssTransform.js index d3612352..e9c68de2 100644 --- a/generators/app/templates/config/jest/cssTransform.js +++ b/generators/app/templates/config/jest/cssTransform.js @@ -8,5 +8,5 @@ module.exports = { getCacheKey() { // The output is always the same. return 'cssTransform'; - }, + } }; diff --git a/generators/app/templates/config/jest/fileTransform.js b/generators/app/templates/config/jest/fileTransform.js index 166b8672..18818044 100644 --- a/generators/app/templates/config/jest/fileTransform.js +++ b/generators/app/templates/config/jest/fileTransform.js @@ -24,5 +24,5 @@ module.exports = { } return `module.exports = ${assetFilename};`; - }, + } }; diff --git a/generators/app/templates/config/paths.js b/generators/app/templates/config/paths.js index cc188e45..01db1323 100644 --- a/generators/app/templates/config/paths.js +++ b/generators/app/templates/config/paths.js @@ -20,8 +20,7 @@ function ensureSlash(inputPath, needsSlash) { } } -const getPublicUrl = appPackageJson => - envPublicUrl || require(appPackageJson).homepage; +const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage; // We use `PUBLIC_URL` environment variable or "homepage" field to infer // "public path" at which the app is served. @@ -31,8 +30,7 @@ const getPublicUrl = appPackageJson => // like /todos/42/static/js/bundle.7289d.js. We have to know the root. function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); - const servedUrl = - envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); + const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); return ensureSlash(servedUrl, true); } @@ -47,7 +45,7 @@ const moduleFileExtensions = [ 'tsx', 'json', 'web.jsx', - 'jsx', + 'jsx' ]; // Resolve file paths in the same order as webpack @@ -79,9 +77,7 @@ module.exports = { proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrl: getPublicUrl(resolveApp('package.json')), - servedPath: getServedPath(resolveApp('package.json')), + servedPath: getServedPath(resolveApp('package.json')) }; - - module.exports.moduleFileExtensions = moduleFileExtensions; diff --git a/generators/app/templates/config/webpack.config.js b/generators/app/templates/config/webpack.config.js index 72e27210..24f5d158 100644 --- a/generators/app/templates/config/webpack.config.js +++ b/generators/app/templates/config/webpack.config.js @@ -1,37 +1,37 @@ -""; +''; -const fs = require("fs"); -const path = require("path"); -const webpack = require("webpack"); -const resolve = require("resolve"); -const PnpWebpackPlugin = require("pnp-webpack-plugin"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin"); -const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin"); -const TerserPlugin = require("terser-webpack-plugin"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); -const safePostCssParser = require("postcss-safe-parser"); -const ManifestPlugin = require("webpack-manifest-plugin"); -const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin"); -const WorkboxWebpackPlugin = require("workbox-webpack-plugin"); -const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin"); -const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin"); -const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent"); -const paths = require("./paths"); -const getClientEnvironment = require("./env"); -const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin"); -const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt"); -const typescriptFormatter = require("react-dev-utils/typescriptFormatter"); +const fs = require('fs'); +const path = require('path'); +const webpack = require('webpack'); +const resolve = require('resolve'); +const PnpWebpackPlugin = require('pnp-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); +const TerserPlugin = require('terser-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const safePostCssParser = require('postcss-safe-parser'); +const ManifestPlugin = require('webpack-manifest-plugin'); +const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); +const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); +const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); +const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); +const paths = require('./paths'); +const getClientEnvironment = require('./env'); +const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt'); +const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin"); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); // Source maps are resource heavy and can cause out of memory issue for large source files. -const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false"; +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // Some apps do not need the benefits of saving a web request, so not inlining the chunk // makes for a smoother build process. -const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false"; +const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); @@ -43,67 +43,63 @@ const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; const externalAssets = [ - "solid-auth-client/dist-popup/popup.html", - "solid-auth-client/dist-lib/solid-auth-client.bundle.js", - "solid-auth-client/dist-lib/solid-auth-client.bundle.js.map", - "@solid/query-ldflex/dist/solid-query-ldflex.bundle.js", - "@solid/query-ldflex/dist/solid-query-ldflex.bundle.js.map" + 'solid-auth-client/dist-popup/popup.html', + 'solid-auth-client/dist-lib/solid-auth-client.bundle.js', + 'solid-auth-client/dist-lib/solid-auth-client.bundle.js.map', + '@solid/query-ldflex/dist/solid-query-ldflex.bundle.js', + '@solid/query-ldflex/dist/solid-query-ldflex.bundle.js.map' ]; // This is the production and development configuration. // It is focused on developer experience, fast rebuilds, and a minimal bundle. module.exports = function(webpackEnv) { - const isEnvDevelopment = webpackEnv === "development"; - const isEnvProduction = webpackEnv === "production"; + const isEnvDevelopment = webpackEnv === 'development'; + const isEnvProduction = webpackEnv === 'production'; // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. // In development, we always serve from the root. This makes config easier. - const publicPath = isEnvProduction - ? paths.servedPath - : isEnvDevelopment && "/"; + const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/'; // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. - const shouldUseRelativeAssetPaths = publicPath === "./"; + const shouldUseRelativeAssetPaths = publicPath === './'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. - const publicUrl = isEnvProduction - ? publicPath.slice(0, -1) - : isEnvDevelopment && ""; + const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ - isEnvDevelopment && require.resolve("style-loader"), + isEnvDevelopment && require.resolve('style-loader'), isEnvProduction && { loader: MiniCssExtractPlugin.loader, options: Object.assign( {}, - shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined + shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined ) }, { - loader: require.resolve("css-loader"), + loader: require.resolve('css-loader'), options: cssOptions }, { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json - loader: require.resolve("postcss-loader"), + loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 - ident: "postcss", + ident: 'postcss', plugins: () => [ - require("postcss-flexbugs-fixes"), - require("postcss-preset-env")({ + require('postcss-flexbugs-fixes'), + require('postcss-preset-env')({ autoprefixer: { - flexbox: "no-2009" + flexbox: 'no-2009' }, stage: 3 }) @@ -124,14 +120,14 @@ module.exports = function(webpackEnv) { }; return { - mode: isEnvProduction ? "production" : isEnvDevelopment && "development", + mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', // Stop compilation early in production bail: isEnvProduction, devtool: isEnvProduction ? shouldUseSourceMap - ? "source-map" + ? 'source-map' : false - : isEnvDevelopment && "cheap-module-source-map", + : isEnvDevelopment && 'cheap-module-source-map', // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. entry: [ @@ -145,8 +141,7 @@ module.exports = function(webpackEnv) { // the line below with these two lines if you prefer the stock client: // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), - isEnvDevelopment && - require.resolve("react-dev-utils/webpackHotDevClient"), + isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), // Finally, this is your app's code: paths.appIndexJs // We include the app code last so that if there is a runtime error during @@ -161,23 +156,19 @@ module.exports = function(webpackEnv) { // There will be one main bundle, and one file per asynchronous chunk. // In development, it does not produce real files. filename: isEnvProduction - ? "static/js/[name].[chunkhash:8].js" - : isEnvDevelopment && "static/js/bundle.js", + ? 'static/js/[name].[chunkhash:8].js' + : isEnvDevelopment && 'static/js/bundle.js', // There are also additional JS chunk files if you use code splitting. chunkFilename: isEnvProduction - ? "static/js/[name].[chunkhash:8].chunk.js" - : isEnvDevelopment && "static/js/[name].chunk.js", + ? 'static/js/[name].[chunkhash:8].chunk.js' + : isEnvDevelopment && 'static/js/[name].chunk.js', // We inferred the "public path" (such as / or /my-project) from homepage. // We use "/" in development. publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: isEnvProduction - ? info => - path - .relative(paths.appSrc, info.absoluteResourcePath) - .replace(/\\/g, "/") - : isEnvDevelopment && - (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")) + ? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/') + : isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')) }, optimization: { minimize: isEnvProduction, @@ -246,7 +237,7 @@ module.exports = function(webpackEnv) { // https://twitter.com/wSokra/status/969633336732905474 // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366 splitChunks: { - chunks: "all", + chunks: 'all', name: false }, // Keep the runtime chunk separated to enable long term caching @@ -258,7 +249,7 @@ module.exports = function(webpackEnv) { // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebook/create-react-app/issues/253 - modules: ["node_modules"].concat( + modules: ['node_modules'].concat( // It is guaranteed to exist because we tweak it in `env.js` process.env.NODE_PATH.split(path.delimiter).filter(Boolean) ), @@ -270,12 +261,12 @@ module.exports = function(webpackEnv) { // for React Native Web. extensions: paths.moduleFileExtensions .map(ext => `.${ext}`) - .filter(ext => useTypeScript || !ext.includes("ts")), + .filter(ext => useTypeScript || !ext.includes('ts')), alias: { - react: require.resolve("react"), + react: require.resolve('react'), // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - "react-native": "react-native-web" + 'react-native': 'react-native-web' }, plugins: [ // Adds support for installing with Plug'n'Play, leading to faster installs and adding @@ -306,14 +297,14 @@ module.exports = function(webpackEnv) { // It's important to do this before Babel processes the JS. { test: /\.(js|mjs|jsx)$/, - enforce: "pre", + enforce: 'pre', use: [ { options: { - formatter: require.resolve("react-dev-utils/eslintFormatter"), - eslintPath: require.resolve("eslint") + formatter: require.resolve('react-dev-utils/eslintFormatter'), + eslintPath: require.resolve('eslint') }, - loader: require.resolve("eslint-loader") + loader: require.resolve('eslint-loader') } ], include: paths.appSrc @@ -328,10 +319,10 @@ module.exports = function(webpackEnv) { // A missing `test` is equivalent to a match. { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], - loader: require.resolve("url-loader"), + loader: require.resolve('url-loader'), options: { limit: 10000, - name: "static/media/[name].[hash:8].[ext]" + name: 'static/media/[name].[hash:8].[ext]' } }, // Process application JS with Babel. @@ -339,19 +330,17 @@ module.exports = function(webpackEnv) { { test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, - loader: require.resolve("babel-loader"), + loader: require.resolve('babel-loader'), options: { - customize: require.resolve( - "babel-preset-react-app/webpack-overrides" - ), + customize: require.resolve('babel-preset-react-app/webpack-overrides'), plugins: [ [ - require.resolve("babel-plugin-named-asset-import"), + require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { - ReactComponent: "@svgr/webpack?-prettier,-svgo![path]" + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]' } } } @@ -370,16 +359,13 @@ module.exports = function(webpackEnv) { { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, - loader: require.resolve("babel-loader"), + loader: require.resolve('babel-loader'), options: { babelrc: false, configFile: false, compact: false, presets: [ - [ - require.resolve("babel-preset-react-app/dependencies"), - { helpers: true } - ] + [require.resolve('babel-preset-react-app/dependencies'), { helpers: true }] ], cacheDirectory: true, cacheCompression: isEnvProduction, @@ -433,7 +419,7 @@ module.exports = function(webpackEnv) { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap }, - "sass-loader" + 'sass-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. @@ -452,7 +438,7 @@ module.exports = function(webpackEnv) { modules: true, getLocalIdent: getCSSModuleLocalIdent }, - "sass-loader" + 'sass-loader' ) }, // "file" loader makes sure those assets get served by WebpackDevServer. @@ -461,14 +447,14 @@ module.exports = function(webpackEnv) { // This loader doesn't use a "test" so it will catch all modules // that fall through the other loaders. { - loader: require.resolve("file-loader"), + loader: require.resolve('file-loader'), // Exclude `js` files to keep "css" loader working as it injects // its runtime that would otherwise be processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/], options: { - name: "static/media/[name].[hash:8].[ext]" + name: 'static/media/[name].[hash:8].[ext]' } } // ** STOP ** Are you adding a new loader? @@ -481,7 +467,7 @@ module.exports = function(webpackEnv) { new CopyWebpackPlugin(externalAssets.map(a => require.resolve(a))), new HtmlWebpackIncludeAssetsPlugin({ - assets: [...externalAssets.map(f => f.replace(/.*\//, ""))].filter(f => + assets: [...externalAssets.map(f => f.replace(/.*\//, ''))].filter(f => /\.(js|css)$/.test(f) ), append: false @@ -543,20 +529,19 @@ module.exports = function(webpackEnv) { // to restart the development server for Webpack to discover it. This plugin // makes the discovery automatic so you don't have to restart. // See https://github.com/facebook/create-react-app/issues/186 - isEnvDevelopment && - new WatchMissingNodeModulesPlugin(paths.appNodeModules), + isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules), isEnvProduction && new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional - filename: "static/css/[name].[contenthash:8].css", - chunkFilename: "static/css/[name].[contenthash:8].chunk.css" + filename: 'static/css/[name].[contenthash:8].css', + chunkFilename: 'static/css/[name].[contenthash:8].chunk.css' }), // Generate a manifest file which contains a mapping of all asset filenames // to their corresponding output file so that tools can pick it up without // having to parse `index.html`. new ManifestPlugin({ - fileName: "asset-manifest.json", + fileName: 'asset-manifest.json', publicPath: publicPath }), // Moment.js is an extremely popular library that bundles large locale files @@ -571,40 +556,40 @@ module.exports = function(webpackEnv) { new WorkboxWebpackPlugin.GenerateSW({ clientsClaim: true, exclude: [/\.map$/, /asset-manifest\.json$/], - importWorkboxFrom: "cdn", - navigateFallback: publicUrl + "/index.html", + importWorkboxFrom: 'cdn', + navigateFallback: publicUrl + '/index.html', navigateFallbackBlacklist: [ // Exclude URLs starting with /_, as they're likely an API call - new RegExp("^/_"), + new RegExp('^/_'), // Exclude URLs containing a dot, as they're likely a resource in // public/ and not a SPA route - new RegExp("/[^/]+\\.[^/]+$") + new RegExp('/[^/]+\\.[^/]+$') ] }), // TypeScript type checking useTypeScript && new ForkTsCheckerWebpackPlugin({ - typescript: resolve.sync("typescript", { + typescript: resolve.sync('typescript', { basedir: paths.appNodeModules }), async: false, checkSyntacticErrors: true, tsconfig: paths.appTsConfig, compilerOptions: { - module: "esnext", - moduleResolution: "node", + module: 'esnext', + moduleResolution: 'node', resolveJsonModule: true, isolatedModules: true, noEmit: true, - jsx: "preserve" + jsx: 'preserve' }, reportFiles: [ - "**", - "!**/*.json", - "!**/__tests__/**", - "!**/?(*.)(spec|test).*", - "!**/src/setupProxy.*", - "!**/src/setupTests.*" + '**', + '!**/*.json', + '!**/__tests__/**', + '!**/?(*.)(spec|test).*', + '!**/src/setupProxy.*', + '!**/src/setupTests.*' ], watch: paths.appSrc, silent: true, @@ -614,17 +599,17 @@ module.exports = function(webpackEnv) { // CRL: add externals block since it's a library // no need to ship React since it's shipped with the main app externals: { - "solid-auth-client": ["solid", "auth"], - "@solid/query-ldflex": ["solid", "data"] + 'solid-auth-client': ['solid', 'auth'], + '@solid/query-ldflex': ['solid', 'data'] }, // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { - dgram: "empty", - fs: "empty", - net: "empty", - tls: "empty", - child_process: "empty" + dgram: 'empty', + fs: 'empty', + net: 'empty', + tls: 'empty', + child_process: 'empty' }, // Turn off performance processing because we utilize // our own hints via the FileSizeReporter diff --git a/generators/app/templates/config/webpackDevServer.config.js b/generators/app/templates/config/webpackDevServer.config.js index 285ced4f..226c47dc 100644 --- a/generators/app/templates/config/webpackDevServer.config.js +++ b/generators/app/templates/config/webpackDevServer.config.js @@ -26,8 +26,7 @@ module.exports = function(proxy, allowedHost) { // So we will disable the host check normally, but enable it if you have // specified the `proxy` setting. Finally, we let you override it if you // really know what you're doing with a special environment variable. - disableHostCheck: - !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true', + disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true', // Enable gzip compression of generated files. compress: true, // Silence WebpackDevServer's own logs since they're generally not useful. @@ -67,7 +66,7 @@ module.exports = function(proxy, allowedHost) { // src/node_modules is not ignored to support absolute imports // https://github.com/facebook/create-react-app/issues/1065 watchOptions: { - ignored: ignoredFiles(paths.appSrc), + ignored: ignoredFiles(paths.appSrc) }, // Enable HTTPS if the HTTPS environment variable is set to 'true' https: protocol === 'https', @@ -76,7 +75,7 @@ module.exports = function(proxy, allowedHost) { historyApiFallback: { // Paths with dots should still use the history fallback. // See https://github.com/facebook/create-react-app/issues/387. - disableDotRule: true, + disableDotRule: true }, public: allowedHost, proxy, @@ -97,6 +96,6 @@ module.exports = function(proxy, allowedHost) { // it used the same host and port. // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432 app.use(noopServiceWorkerMiddleware()); - }, + } }; }; diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index 81384617..92e2af52 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -132,14 +132,11 @@ "babel-eslint": "9.0.0", "babel-jest": "^24.5.0", "babel-loader": "8.0.4", + "babel-plugin-module-resolver": "^3.1.2", "babel-plugin-named-asset-import": "^0.3.0", "babel-preset-react-app": "^7.0.0", - "babel-plugin-module-resolver": "^3.1.2", "copy-webpack-plugin": "^4.6.0", "css-loader": "1.0.0", - "husky": "^1.3.1", - "jest-dom": "^3.1.2", - "react-testing-library": "^6.0.0", "eslint": "5.6.0", "eslint-config-react-app": "^3.0.6", "eslint-loader": "2.1.1", @@ -148,20 +145,24 @@ "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.11.1", "file-loader": "2.0.0", - "resolve": "1.8.1", + "html-webpack-include-assets-plugin": "^1.0.6", + "html-webpack-plugin": "4.0.0-alpha.2", + "husky": "^1.3.1", "jest": "^24.1.0", + "jest-dom": "^3.1.2", "jest-pnp-resolver": "1.0.1", "jest-resolve": "23.6.0", + "mini-css-extract-plugin": "0.4.3", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-preset-env": "6.3.1", "postcss-safe-parser": "4.0.1", + "prettier": "^1.18.2", + "react-testing-library": "^6.0.0", + "resolve": "1.8.1", "sass-loader": "7.1.0", "style-loader": "0.23.0", "terser-webpack-plugin": "1.1.0", - "mini-css-extract-plugin": "0.4.3", - "html-webpack-include-assets-plugin": "^1.0.6", - "html-webpack-plugin": "4.0.0-alpha.2", "url-loader": "1.1.1", "webpack": "4.19.1", "webpack-dev-server": "3.1.14", diff --git a/generators/app/templates/public/index.html b/generators/app/templates/public/index.html index e60135ca..68224cd2 100644 --- a/generators/app/templates/public/index.html +++ b/generators/app/templates/public/index.html @@ -3,10 +3,7 @@ - + + 01_01_Tic-Tac-Toe-Icons-color + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index c70a0b40..501e91d6 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -27,7 +27,7 @@ const AuthNavBar = React.memo((props: Props) => { }, { id: 'tictactoe', - icon: '/img/people.svg', + icon: '/img/icon/tictactoe.svg', label: t('navBar.tictactoe'), to: '/tictactoe' } diff --git a/generators/app/templates/src/components/NavBar/children/Navigation/navigation.component.js b/generators/app/templates/src/components/NavBar/children/Navigation/navigation.component.js index adabef7a..acd360f6 100644 --- a/generators/app/templates/src/components/NavBar/children/Navigation/navigation.component.js +++ b/generators/app/templates/src/components/NavBar/children/Navigation/navigation.component.js @@ -13,7 +13,14 @@ const Navigation = ({ navigation }: Props) => (
  • - {item.id} + {item.id} {item.label} From 81d8a50e93b37ec1d362a21421cb578709df8dcc Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Wed, 10 Jul 2019 13:28:17 -0600 Subject: [PATCH 073/192] fixed createinbox --- generators/app/templates/package-lock.json | 6 +++--- generators/app/templates/package.json | 2 +- .../src/components/AuthNavBar/auth-nav-bar.component.js | 9 +++++---- generators/app/templates/src/utils/notification.js | 1 - 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/generators/app/templates/package-lock.json b/generators/app/templates/package-lock.json index 511f86c2..5d7af3f8 100644 --- a/generators/app/templates/package-lock.json +++ b/generators/app/templates/package-lock.json @@ -1953,9 +1953,9 @@ } }, "@inrupt/solid-react-components": { - "version": "0.7.24", - "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.7.24.tgz", - "integrity": "sha512-VXu7UexXiqV9Z9RQFJFLIaz/lI4tRn1ijBX4+Asz4lHBxrjXQJrIhC9EHTqn5GYpw3DF7SlGXDl7d9VGEyJ3BA==", + "version": "0.7.26", + "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.7.26.tgz", + "integrity": "sha512-5A+ZlmbLc8fLgFV4RxYXmde44yyXUDPTdNRlS+7cx2DFGbYIw5APCuYN9zwu+J72Hlk1CHcDzEe1v60mS4owmg==", "requires": { "@babel/runtime": "^7.1.2", "@rdfjs/data-model": "^1.1.1", diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index e13c9e50..b5e90f53 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -4,7 +4,7 @@ "@fortawesome/free-brands-svg-icons": "^5.8.0", "@fortawesome/free-solid-svg-icons": "^5.6.3", "@fortawesome/react-fontawesome": "^0.1.4", - "@inrupt/solid-react-components": "^0.7.24", + "@inrupt/solid-react-components": "^0.7.26", "@inrupt/solid-style-guide": "^0.1.34", "@rdfjs/data-model": "^1.1.1", "@solid/query-ldflex": "^2.4.0", diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index c70a0b40..809d3c40 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useCallback } from 'react'; +import ldflex from '@solid/query-ldflex'; import { NavBar, Notification } from '@components'; import { useTranslation } from 'react-i18next'; import { NavBarContainer } from './children'; @@ -35,13 +36,13 @@ const AuthNavBar = React.memo((props: Props) => { const { webId } = props; const discoveryAppInbox = useCallback(async () => { const globalInbox = await ldflexHelper.discoveryInbox(webId); - const inbox = `${process.env.REACT_APP_TICTAC_PATH}inbox/`; - // console.log(buildPathFromWebId(webId, inbox), 'inbox 1'); - // const appInbox = await ldflexHelper.discoveryInbox(buildPathFromWebId(webId, process.env.REACT_APP_TICTAC_PATH)); + const appPath = buildPathFromWebId(webId, `${process.env.REACT_APP_TICTAC_PATH}`); + const settingsDoc = await ldflex[`${appPath}settings.ttl`]['ldp:inbox']; + const inbox = await settingsDoc.value; setInbox([ { path: globalInbox, inboxName: 'Global', shape: 'default' }, - { path: buildPathFromWebId(webId, inbox), inboxName: 'TicTactoe Game', shape: 'default' } + { path: inbox, inboxName: 'TicTactoe Game', shape: 'default' } ]); }, [webId]); diff --git a/generators/app/templates/src/utils/notification.js b/generators/app/templates/src/utils/notification.js index a5e0e366..0404a6b7 100644 --- a/generators/app/templates/src/utils/notification.js +++ b/generators/app/templates/src/utils/notification.js @@ -10,7 +10,6 @@ export const sendNotification = async (opponent, content, createNotification) => const settingsDoc = await ldflex[`${appPath}settings.ttl`]['ldp:inbox']; const inbox = await settingsDoc.value; - /** * Check if app inbox exist to send notification if doesn't exist * send try to send to global inbox. From df72647f3aaabb407932f83932a9afd499a9824e Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Wed, 10 Jul 2019 14:09:15 -0600 Subject: [PATCH 074/192] create inbox in game page and webid bug fixed --- .../TicTacToe/GamePage/children/Game/game.component.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js index 654b850d..e15953db 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js @@ -26,7 +26,7 @@ const Game = ({ webId, gameURL }: Props) => { const [winner, setWinner] = useState(null); const [isProcessing, setIsProcessing] = useState(false); const inboxUrl = buildPathFromWebId(webId, process.env.REACT_APP_TICTAC_INBOX); - const { createNotification } = useNotification(webId); + const { createNotification, createInbox } = useNotification(webId); const [rival, setRival] = useState(null); const sendNotification = useCallback( @@ -130,7 +130,7 @@ const Game = ({ webId, gameURL }: Props) => { const imageData = await ldflex[webId]['vcard:hasPhoto']; const name = nameData ? nameData.value : webId; const image = imageData ? imageData.value : '/img/icon/empty-profile.svg'; - return { name, image }; + return { name, image, webId }; } catch (e) { throw e; } @@ -250,6 +250,11 @@ const Game = ({ webId, gameURL }: Props) => { } }); + useEffect(() => { + const gamePath = buildPathFromWebId(webId, process.env.REACT_APP_TICTAC_PATH); + if (gameURL) createInbox(`${gamePath}inbox/`, gamePath); + }, []); + useEffect(() => { if ((gameURL || timestamp) && !isProcessing) getGame(gameURL); }, [gameURL, timestamp]); From 7958d83c203c8ed060fd8568c58b582a2619efc3 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Wed, 10 Jul 2019 14:53:01 -0600 Subject: [PATCH 075/192] fixed navbar --- generators/app/templates/.env | 2 +- .../AuthNavBar/auth-nav-bar.component.js | 45 +++++++++---------- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/generators/app/templates/.env b/generators/app/templates/.env index 61006a7d..2ac466e1 100644 --- a/generators/app/templates/.env +++ b/generators/app/templates/.env @@ -1,4 +1,4 @@ -REACT_APP_TICTAC_PATH=public/inrupt2/game/tictactoe/ +REACT_APP_TICTAC_PATH=public/inrupt4/game/tictactoe/ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_COMPANY_NAME=inrupt Inc. diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 271f0690..416539d9 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -1,5 +1,4 @@ import React, { useState, useEffect, useCallback } from 'react'; -import ldflex from '@solid/query-ldflex'; import { NavBar, Notification } from '@components'; import { useTranslation } from 'react-i18next'; import { NavBarContainer } from './children'; @@ -37,7 +36,7 @@ const AuthNavBar = React.memo((props: Props) => { const discoveryAppInbox = useCallback(async () => { const globalInbox = await ldflexHelper.discoveryInbox(webId); const appPath = buildPathFromWebId(webId, `${process.env.REACT_APP_TICTAC_PATH}`); - const settingsDoc = await ldflex[`${appPath}settings.ttl`]['ldp:inbox']; + const settingsDoc = `${appPath}inbox/`; const inbox = await settingsDoc.value; setInbox([ @@ -52,28 +51,26 @@ const AuthNavBar = React.memo((props: Props) => { } }, [webId]); return ( - inboxes.length > 0 && ( - , - id: 'language' - }, - { - component: () => , - id: 'notifications' - }, - { - component: ({ open, customClass }) => ( - - ), - id: 'profile' - } - ]} - /> - ) + , + id: 'language' + }, + { + component: () => , + id: 'notifications' + }, + { + component: ({ open, customClass }) => ( + + ), + id: 'profile' + } + ]} + /> ); }); From 8ea274c99dec8bd8b4fb65659650ef66bd184925 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Wed, 10 Jul 2019 15:03:00 -0600 Subject: [PATCH 076/192] fixe navr --- generators/app/templates/.env | 2 +- .../AuthNavBar/auth-nav-bar.component.js | 45 ++++++++++--------- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/generators/app/templates/.env b/generators/app/templates/.env index 2ac466e1..61006a7d 100644 --- a/generators/app/templates/.env +++ b/generators/app/templates/.env @@ -1,4 +1,4 @@ -REACT_APP_TICTAC_PATH=public/inrupt4/game/tictactoe/ +REACT_APP_TICTAC_PATH=public/inrupt2/game/tictactoe/ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_COMPANY_NAME=inrupt Inc. diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 416539d9..3b146b1a 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -37,11 +37,10 @@ const AuthNavBar = React.memo((props: Props) => { const globalInbox = await ldflexHelper.discoveryInbox(webId); const appPath = buildPathFromWebId(webId, `${process.env.REACT_APP_TICTAC_PATH}`); const settingsDoc = `${appPath}inbox/`; - const inbox = await settingsDoc.value; setInbox([ { path: globalInbox, inboxName: 'Global', shape: 'default' }, - { path: inbox, inboxName: 'TicTactoe Game', shape: 'default' } + { path: settingsDoc, inboxName: 'TicTactoe Game', shape: 'default' } ]); }, [webId]); @@ -51,26 +50,28 @@ const AuthNavBar = React.memo((props: Props) => { } }, [webId]); return ( - , - id: 'language' - }, - { - component: () => , - id: 'notifications' - }, - { - component: ({ open, customClass }) => ( - - ), - id: 'profile' - } - ]} - /> + inboxes.length > 0 && ( + , + id: 'language' + }, + { + component: () => , + id: 'notifications' + }, + { + component: ({ open, customClass }) => ( + + ), + id: 'profile' + } + ]} + /> + ) ); }); From ae3165be1e87e5f68576c2dfe9f1de9f711cddd7 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Wed, 10 Jul 2019 16:11:28 -0600 Subject: [PATCH 077/192] Showing notification sender name --- .../children/NotificationItem/notification-item.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js index 48dbb78f..f28c36e0 100644 --- a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js +++ b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js @@ -13,7 +13,7 @@ type Props = { const NotificationItem = ({ notification, markAsRead, children, deleteNotification }: Props) => { const { read } = notification; const currentRead = JSON.parse(read); - + const { sender } = notification; const redirectTo = useCallback(async () => { if (notification.target) { await markAsRead(notification.path, notification.id); @@ -28,7 +28,7 @@ const NotificationItem = ({ notification, markAsRead, children, deleteNotificati - {notification.sender} {notification.summary} + {sender.name} {notification.summary} {moment(notification.sent).fromNow()} From a89ed4d26e39b49c077ea47654ad533d4dc27483 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Thu, 11 Jul 2019 07:44:34 -0600 Subject: [PATCH 078/192] prevent render error when read doesn't exist on notification and add .env.exmaple and untrack .env --- generators/app/templates/.env | 2 +- generators/app/templates/.env.example | 4 ++++ generators/app/templates/.gitignore | 1 + .../children/NotificationItem/notification-item.component.js | 2 +- .../children/NotificationItem/notification-item.style.js | 2 +- 5 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 generators/app/templates/.env.example diff --git a/generators/app/templates/.env b/generators/app/templates/.env index 61006a7d..47b925a1 100644 --- a/generators/app/templates/.env +++ b/generators/app/templates/.env @@ -1,4 +1,4 @@ -REACT_APP_TICTAC_PATH=public/inrupt2/game/tictactoe/ +REACT_APP_TICTAC_PATH=public/ttt/game/tictactoe/ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_COMPANY_NAME=inrupt Inc. diff --git a/generators/app/templates/.env.example b/generators/app/templates/.env.example new file mode 100644 index 00000000..6a97b496 --- /dev/null +++ b/generators/app/templates/.env.example @@ -0,0 +1,4 @@ +REACT_APP_TICTAC_PATH=public/game/tictactoe/ +REACT_APP_VERSION=$npm_package_version +REACT_APP_NAME=$npm_package_name +REACT_APP_COMPANY_NAME=inrupt Inc. diff --git a/generators/app/templates/.gitignore b/generators/app/templates/.gitignore index 4d29575d..8692cf66 100644 --- a/generators/app/templates/.gitignore +++ b/generators/app/templates/.gitignore @@ -13,6 +13,7 @@ # misc .DS_Store +.env .env.local .env.development.local .env.test.local diff --git a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js index f28c36e0..d1c6db7a 100644 --- a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js +++ b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js @@ -12,7 +12,7 @@ type Props = { const NotificationItem = ({ notification, markAsRead, children, deleteNotification }: Props) => { const { read } = notification; - const currentRead = JSON.parse(read); + const currentRead = read ? JSON.parse(read) : false; const { sender } = notification; const redirectTo = useCallback(async () => { if (notification.target) { diff --git a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.style.js b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.style.js index 836d694d..0a5ead77 100644 --- a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.style.js +++ b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.style.js @@ -5,7 +5,7 @@ export const Item = styled.li` cursor: pointer; position: relative; display: flex; - padding: 8px 12px; + padding: 12px; align-items: center; background: ${({ read }) => (read ? '#FFF' : 'rgb(245, 249, 254)')}; position: relative; From 4dc020651295948f28e1c1a5d2991e4c70130769 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Thu, 11 Jul 2019 09:58:47 -0600 Subject: [PATCH 079/192] add language on notification tab --- .../app/templates/public/locales/en-US/translation.json | 6 +++++- generators/app/templates/public/locales/en/translation.json | 4 ++++ generators/app/templates/public/locales/es/translation.json | 4 ++++ .../src/components/AuthNavBar/auth-nav-bar.component.js | 4 ++-- 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/generators/app/templates/public/locales/en-US/translation.json b/generators/app/templates/public/locales/en-US/translation.json index 3885ed36..0a593104 100644 --- a/generators/app/templates/public/locales/en-US/translation.json +++ b/generators/app/templates/public/locales/en-US/translation.json @@ -33,7 +33,11 @@ "en": "English (English)", "es": "Español (Spanish)" }, - "tictactoe":"Game" + "tictactoe":"Game", + "notifications": { + "global": "Global", + "tictactoe": "TicTactoe Game" + } }, "footer": { "version": "Version" diff --git a/generators/app/templates/public/locales/en/translation.json b/generators/app/templates/public/locales/en/translation.json index 3885ed36..dde4bcec 100644 --- a/generators/app/templates/public/locales/en/translation.json +++ b/generators/app/templates/public/locales/en/translation.json @@ -33,6 +33,10 @@ "en": "English (English)", "es": "Español (Spanish)" }, + "notifications": { + "global": "Global", + "tictactoe": "TicTactoe Game" + }, "tictactoe":"Game" }, "footer": { diff --git a/generators/app/templates/public/locales/es/translation.json b/generators/app/templates/public/locales/es/translation.json index 4c9b6d29..a721cb07 100644 --- a/generators/app/templates/public/locales/es/translation.json +++ b/generators/app/templates/public/locales/es/translation.json @@ -33,6 +33,10 @@ "en": "English (Inglés)", "es": "Español (Español)" }, + "notifications": { + "global": "Global", + "tictactoe": "Juego el Gato" + }, "tictactoe":"Juego" }, "footer": { diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 3b146b1a..00c1ed8d 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -39,8 +39,8 @@ const AuthNavBar = React.memo((props: Props) => { const settingsDoc = `${appPath}inbox/`; setInbox([ - { path: globalInbox, inboxName: 'Global', shape: 'default' }, - { path: settingsDoc, inboxName: 'TicTactoe Game', shape: 'default' } + { path: globalInbox, inboxName: t('navBar.notifications.global'), shape: 'default' }, + { path: settingsDoc, inboxName: t('navBar.notifications.tictactoe'), shape: 'default' } ]); }, [webId]); From 92450d5b125b9cfe7cf7cb8385be5f9e47709a94 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Thu, 11 Jul 2019 10:30:33 -0600 Subject: [PATCH 080/192] fixed navBar fix --- .../AuthNavBar/auth-nav-bar.component.js | 42 +++++++++---------- .../children/Toolbar/toolbar.component.js | 5 ++- .../Notifications/notifications.component.js | 3 +- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 00c1ed8d..9f691491 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -50,28 +50,26 @@ const AuthNavBar = React.memo((props: Props) => { } }, [webId]); return ( - inboxes.length > 0 && ( - , - id: 'language' - }, - { - component: () => , - id: 'notifications' - }, - { - component: ({ open, customClass }) => ( - - ), - id: 'profile' - } - ]} - /> - ) + , + id: 'language' + }, + { + component: () => , + id: 'notifications' + }, + { + component: ({ open, customClass }) => ( + + ), + id: 'profile' + } + ]} + /> ); }); diff --git a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js index 2621963b..d1ebede1 100644 --- a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js +++ b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js @@ -7,7 +7,10 @@ type Props = { }; const areEqual = (prevProps, nextProps) => { - if (prevProps.profileOptions !== nextProps.profileOptions) { + const prevInbox = prevProps.toolbar[1].component().props.inbox; + const nextInbox = nextProps.toolbar[1].component().props.inbox; + + if (prevInbox.length !== nextInbox.length) { return false; } diff --git a/generators/app/templates/src/components/Notifications/notifications.component.js b/generators/app/templates/src/components/Notifications/notifications.component.js index aa8a6ea1..cd7f8985 100644 --- a/generators/app/templates/src/components/Notifications/notifications.component.js +++ b/generators/app/templates/src/components/Notifications/notifications.component.js @@ -9,7 +9,8 @@ type Props = { const Notification = React.memo(({ webId, inbox }: Props) => { const inboxUrl = inbox.map(item => item.path); - return webId ? ( + + return inboxUrl ? ( From 543b5460d817526e2d5eb17283552152db693e40 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Thu, 11 Jul 2019 13:09:06 -0600 Subject: [PATCH 081/192] added error handle on notification fetch to avoid issues --- generators/app/templates/.env | 2 +- generators/app/templates/package-lock.json | 6 +-- generators/app/templates/package.json | 2 +- .../public/locales/en-US/translation.json | 4 +- .../public/locales/en/translation.json | 4 +- .../public/locales/es/translation.json | 4 +- .../AuthNavBar/auth-nav-bar.component.js | 39 +++++++++++++------ .../app/templates/src/utils/ldflex-helper.js | 10 +++-- 8 files changed, 48 insertions(+), 23 deletions(-) diff --git a/generators/app/templates/.env b/generators/app/templates/.env index 47b925a1..8a1c3541 100644 --- a/generators/app/templates/.env +++ b/generators/app/templates/.env @@ -1,4 +1,4 @@ -REACT_APP_TICTAC_PATH=public/ttt/game/tictactoe/ +REACT_APP_TICTAC_PATH=public/tttt/game/tictactoe/ REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name REACT_APP_COMPANY_NAME=inrupt Inc. diff --git a/generators/app/templates/package-lock.json b/generators/app/templates/package-lock.json index 5d7af3f8..28fa4937 100644 --- a/generators/app/templates/package-lock.json +++ b/generators/app/templates/package-lock.json @@ -1953,9 +1953,9 @@ } }, "@inrupt/solid-react-components": { - "version": "0.7.26", - "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.7.26.tgz", - "integrity": "sha512-5A+ZlmbLc8fLgFV4RxYXmde44yyXUDPTdNRlS+7cx2DFGbYIw5APCuYN9zwu+J72Hlk1CHcDzEe1v60mS4owmg==", + "version": "0.8.0", + "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.8.0.tgz", + "integrity": "sha512-tkkgsu8rZ8m7aqANFXNIqw70BPf5H3OPcFCnY2VobWZCPamrAlQAXEHi2H22aCkhSxPVlwx9BFLStPmLL7fhLw==", "requires": { "@babel/runtime": "^7.1.2", "@rdfjs/data-model": "^1.1.1", diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index b5e90f53..8743d38d 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -4,7 +4,7 @@ "@fortawesome/free-brands-svg-icons": "^5.8.0", "@fortawesome/free-solid-svg-icons": "^5.6.3", "@fortawesome/react-fontawesome": "^0.1.4", - "@inrupt/solid-react-components": "^0.7.26", + "@inrupt/solid-react-components": "^0.8.0", "@inrupt/solid-style-guide": "^0.1.34", "@rdfjs/data-model": "^1.1.1", "@solid/query-ldflex": "^2.4.0", diff --git a/generators/app/templates/public/locales/en-US/translation.json b/generators/app/templates/public/locales/en-US/translation.json index 0a593104..961d170e 100644 --- a/generators/app/templates/public/locales/en-US/translation.json +++ b/generators/app/templates/public/locales/en-US/translation.json @@ -36,7 +36,9 @@ "tictactoe":"Game", "notifications": { "global": "Global", - "tictactoe": "TicTactoe Game" + "tictactoe": "TicTactoe Game", + "noinbox": "You do not have a inbox, please go to your POD and create one.", + "fetchingError": "Error fetching notifications from POD" } }, "footer": { diff --git a/generators/app/templates/public/locales/en/translation.json b/generators/app/templates/public/locales/en/translation.json index dde4bcec..d04855b3 100644 --- a/generators/app/templates/public/locales/en/translation.json +++ b/generators/app/templates/public/locales/en/translation.json @@ -35,7 +35,9 @@ }, "notifications": { "global": "Global", - "tictactoe": "TicTactoe Game" + "tictactoe": "TicTactoe Game", + "noinbox": "You do not have a inbox, please go to your POD and create one.", + "fetchingError": "Error fetching notifications from POD" }, "tictactoe":"Game" }, diff --git a/generators/app/templates/public/locales/es/translation.json b/generators/app/templates/public/locales/es/translation.json index a721cb07..ec4e0941 100644 --- a/generators/app/templates/public/locales/es/translation.json +++ b/generators/app/templates/public/locales/es/translation.json @@ -35,7 +35,9 @@ }, "notifications": { "global": "Global", - "tictactoe": "Juego el Gato" + "tictactoe": "Gato", + "noinbox": "No se encontró ningún inbox en su POD, debes tener al menos uno para jugar.", + "fetchingError": "Error en las notificaciones" }, "tictactoe":"Juego" }, diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 9f691491..7b4bb688 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -3,7 +3,7 @@ import { NavBar, Notification } from '@components'; import { useTranslation } from 'react-i18next'; import { NavBarContainer } from './children'; import { LanguageDropdown } from '@util-components'; -import { buildPathFromWebId, ldflexHelper } from '@utils'; +import { buildPathFromWebId, ldflexHelper, errorToaster } from '@utils'; type Props = { webId: string @@ -33,20 +33,37 @@ const AuthNavBar = React.memo((props: Props) => { } ]; const { webId } = props; - const discoveryAppInbox = useCallback(async () => { - const globalInbox = await ldflexHelper.discoveryInbox(webId); - const appPath = buildPathFromWebId(webId, `${process.env.REACT_APP_TICTAC_PATH}`); - const settingsDoc = `${appPath}inbox/`; + const discoveryInbox = useCallback(async () => { + try { + let inboxes = []; + const globalInbox = await ldflexHelper.discoveryInbox(webId); - setInbox([ - { path: globalInbox, inboxName: t('navBar.notifications.global'), shape: 'default' }, - { path: settingsDoc, inboxName: t('navBar.notifications.tictactoe'), shape: 'default' } - ]); - }, [webId]); + if (globalInbox) { + inboxes = [ + ...inboxes, + { path: globalInbox, inboxName: t('navBar.notifications.global'), shape: 'default' } + ]; + } + const appInbox = await ldflexHelper.discoveryInbox( + buildPathFromWebId(webId, `${process.env.REACT_APP_TICTAC_PATH}settings.ttl`) + ); + + if (appInbox) { + inboxes = [ + ...inboxes, + { path: appInbox, inboxName: t('navBar.notifications.tictactoe'), shape: 'default' } + ]; + } + if (inboxes.length === 0) throw new Error(t('navBar.notifications.noinbox')); + setInbox(inboxes); + } catch (error) { + errorToaster(error.message, t('navBar.notifications.fetchingError')); + } + }, [webId, inboxes]); useEffect(() => { if (webId) { - discoveryAppInbox(); + discoveryInbox(); } }, [webId]); return ( diff --git a/generators/app/templates/src/utils/ldflex-helper.js b/generators/app/templates/src/utils/ldflex-helper.js index 3001b323..2e95a81c 100644 --- a/generators/app/templates/src/utils/ldflex-helper.js +++ b/generators/app/templates/src/utils/ldflex-helper.js @@ -71,12 +71,14 @@ export const existFolder = async folderPath => { return result.ok; }; -export const discoveryInbox = async webId => { +export const discoveryInbox = async document => { try { - const user = await ldflex[webId]; - const inbox = await user['ldp:inbox']; + const existDocument = await existFolder(document); + if (!existDocument) return false; - return inbox && inbox.value; + const inboxDocument = await ldflex[document]['ldp:inbox']; + const inbox = inboxDocument ? await inboxDocument.value : false; + return inbox; } catch (error) { throw error; } From 87b4289b139c75529bcd38f72cd427aff961cb6a Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Thu, 11 Jul 2019 13:19:04 -0600 Subject: [PATCH 082/192] fixed login error inbox --- .../components/NavBar/children/Toolbar/toolbar.component.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js index d1ebede1..cefb5698 100644 --- a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js +++ b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js @@ -7,8 +7,10 @@ type Props = { }; const areEqual = (prevProps, nextProps) => { - const prevInbox = prevProps.toolbar[1].component().props.inbox; - const nextInbox = nextProps.toolbar[1].component().props.inbox; + const prevInbox = + prevProps && prevProps.toolbar.length > 1 && prevProps.toolbar[1].component().props.inbox; + const nextInbox = + nextProps && nextProps.toolbar.length > 1 && nextProps.toolbar[1].component().props.inbox; if (prevInbox.length !== nextInbox.length) { return false; From 17856191cf88524a1b7589d77786790930726009 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Thu, 11 Jul 2019 14:36:33 -0600 Subject: [PATCH 083/192] Win function changes --- .../GamePage/children/Game/game.component.js | 237 ++++++++++-------- .../GameAccept/game-accept.component.js | 3 +- 2 files changed, 131 insertions(+), 109 deletions(-) diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js index e15953db..3d5b3b7d 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js @@ -15,6 +15,16 @@ import Board from '../Board'; import GameAccept from '../GameAccept'; import { GameWrapper, Metadata } from './game.style'; +const possibleCombinations = [ + [0, 4, 8], + [2, 4, 6], + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8] +]; type Props = { webId: String, gameURL: String }; const Game = ({ webId, gameURL }: Props) => { @@ -63,66 +73,17 @@ const Game = ({ webId, gameURL }: Props) => { return isStatusValid ? gamestatus.includes(token) : false; }); - const changeGameStatus = useCallback(async gamestatus => { - try { - const predicate = 'http://www.w3.org/2000/01/rdf-schema#gamestatus'; - const data = await gameDocument[predicate]; - await gameDocument[predicate].replace(data.value, gamestatus); - } catch (e) { - throw e; - } - }); - - const checkWinner = useCallback(async () => { - try { - const { moves, gamestatus } = gameData; - if (!moves) return; - const possibleCombinations = [ - [0, 4, 8], - [2, 4, 6], - [0, 1, 2], - [3, 4, 5], - [6, 7, 8], - [0, 3, 6], - [1, 4, 7], - [2, 5, 8] - ]; - const isMovesFull = moves.filter(move => move === null).length === 0; - - let winnerObject = {}; - for (const combination of possibleCombinations) { - const [first, second, third] = combination; - if ( - moves[first] !== null && - moves[first] === moves[second] && - moves[first] === moves[third] - ) { - winnerObject = { combination, token: moves[first] }; - break; - } - } - - if (isMovesFull && !winnerObject) { - if (gamestatus !== 'Finished') { - await changeGameStatus('Finished'); - if (winnerObject.token === gameData.token) successToaster('It is a tie', 'TIE'); - else successToaster('It is a tie', 'TIE'); - } - } - - if (winnerObject.token) { - if (gamestatus !== 'Finished') { - await changeGameStatus('Finished'); - if (winnerObject.token === gameData.token) - successToaster('You have won!!! Congrats', 'Winner'); - else successToaster('Better luck next time!!'); - } - setWinner(winnerObject); + const changeGameStatus = useCallback( + async gamestatus => { + try { + const predicate = 'http://www.w3.org/2000/01/rdf-schema#gamestatus'; + await gameDocument[predicate].set(gamestatus); + } catch (e) { + throw e; } - } catch (e) { - errorToaster(e.message, 'Error'); - } - }); + }, + [gameDocument] + ); const getPlayerInfo = async webId => { try { @@ -165,15 +126,51 @@ const Game = ({ webId, gameURL }: Props) => { const getRival = ({ sender, opponent, owner }) => (owner ? opponent : sender); - const getGame = useCallback(async (gameURL: String) => { - try { - const game = await ldflexHelper.fetchLdflexDocument(gameURL); - setGameDocument(game); - let gameDocData = {}; - for await (const field of tictactoeShape.shape) { - const fieldData = await game[getPredicate(field)]; - gameDocData = { ...gameDocData, [field.predicate]: fieldData.value }; + const fetchRawData = async () => { + const game = await ldflexHelper.fetchLdflexDocument(gameURL); + setGameDocument(game); + let data = {}; + for await (const field of tictactoeShape.shape) { + const fieldData = await game[getPredicate(field)]; + data = { ...data, [field.predicate]: fieldData.value }; + } + return data; + }; + + const checkForWinnerOrTie = moves => { + if (!moves) return {}; + const isMovesFull = moves.filter(move => move === null).length === 0; + let gameResult = {}; + for (const combination of possibleCombinations) { + const [first, second, third] = combination; + if ( + moves[first] !== null && + moves[first] === moves[second] && + moves[first] === moves[third] + ) { + gameResult = { result: 'win', combination, token: moves[first] }; + break; } + } + if (gameResult.result === 'win') setWinner(gameResult); + if (!gameResult.result && isMovesFull) gameResult = { result: 'tie' }; + + return gameResult; + }; + + const checkWinnerOrNextPlayer = useCallback( + async data => { + const { moves } = data; + const winner = await checkForWinnerOrTie(moves); + const gamestatus = winner.result ? 'Finished' : data.gamestatus; + await changeGameStatus(gamestatus); + }, + [gameData] + ); + + const getInitialGame = useCallback(async () => { + try { + const gameDocData = await fetchRawData(); const sender = await getPlayerInfo(gameDocData.sender); const opponent = await getPlayerInfo(gameDocData.opponent); const owner = webId === sender.webId; @@ -186,8 +183,7 @@ const Game = ({ webId, gameURL }: Props) => { moves, token }); - - gameDocData = { + const newData = { ...gameDocData, sender, opponent, @@ -199,12 +195,35 @@ const Game = ({ webId, gameURL }: Props) => { canPlay: myTurn }; setRival(rival); - setGameData(gameDocData); + setGameData(newData); + if (gameDocData.gamestatus === 'Finished') checkForWinnerOrTie(moves); } catch (e) { - errorToaster(e.message, 'Error'); + errorToaster(e.message); } }); + const getGame = useCallback(async () => { + try { + const gameDocData = await fetchRawData(); + if (gameDocData.gamestatus === gameData.gamestatus) { + return; + } + const moveorder = gameDocData.moveorder ? gameDocData.moveorder.split('-') : []; + const { gamestatus } = gameDocData; + const moves = generateMoves(moveorder, gameDocData.firstmove); + const myTurn = canPlay({ + gamestatus: gameDocData.gamestatus, + moves, + token: gameData.token + }); + const newData = { ...gameData, moveorder, moves, canPlay: myTurn, gamestatus }; + setGameData(newData); + if (gamestatus === 'Finished') checkForWinnerOrTie(moves); + } catch (e) { + errorToaster(e.message, 'Error'); + } + }, [gameURL, gameData]); + const addMoves = useCallback(async array => { try { const moves = array.join('-'); @@ -216,53 +235,55 @@ const Game = ({ webId, gameURL }: Props) => { } }); - const onMove = useCallback(async index => { - try { - setIsProcessing(true); - const { moves, moveorder, token, rival } = gameData; - if (moves[index] === null) { - const newMoves = moves; - newMoves[index] = token; - const newOrder = [...moveorder, index]; - const gamestatus = `Move ${getSecondToken(token)}`; - const newData = { - ...gameData, - moveorder: newOrder, - moves: newMoves, - gamestatus, - canPlay: canPlay({ gamestatus, lastmove: token, token }) - }; - setGameData(newData); - await addMoves(newOrder); - await changeGameStatus(gamestatus); - await sendNotification(rival.webId, { - title: 'Tictactoe move', - summary: 'A move has been made in your Tic-Tac-Toe game.', - sender: webId, - object: gameURL, - target: window.location.href - }); + const onMove = useCallback( + async index => { + try { + setIsProcessing(true); + const { moves, moveorder, token, rival } = gameData; + if (moves[index] === null) { + const newMoves = moves; + newMoves[index] = token; + const newOrder = [...moveorder, index]; + const gamestatus = `Move ${getSecondToken(token)}`; + const newData = { + ...gameData, + moveorder: newOrder, + moves: newMoves, + gamestatus, + canPlay: canPlay({ gamestatus, lastmove: token, token }) + }; + setGameData(newData); + await addMoves(newOrder); + await checkWinnerOrNextPlayer(newData); + await sendNotification(rival.webId, { + title: 'Tictactoe move', + summary: 'A move has been made in your Tic-Tac-Toe game.', + sender: webId, + object: gameURL, + target: window.location.href + }); + setIsProcessing(false); + } + } catch (e) { setIsProcessing(false); + errorToaster(e.message, 'Error'); } - } catch (e) { - setIsProcessing(false); - errorToaster(e.message, 'Error'); - } - }); + }, + [gameData] + ); useEffect(() => { const gamePath = buildPathFromWebId(webId, process.env.REACT_APP_TICTAC_PATH); - if (gameURL) createInbox(`${gamePath}inbox/`, gamePath); + if (gameURL) { + createInbox(`${gamePath}inbox/`, gamePath); + getInitialGame(); + } }, []); useEffect(() => { - if ((gameURL || timestamp) && !isProcessing) getGame(gameURL); + if ((gameURL || timestamp) && !isProcessing && gameData.sender) getGame(); }, [gameURL, timestamp]); - useEffect(() => { - if (gameData && Object.keys(gameData).length > 0) checkWinner(); - }, [gameData]); - return ( {gameData && ( diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js index 6a1af069..318f5800 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js @@ -42,7 +42,8 @@ const GameAccept = ({ sender, onAccept, onDecline }: Props) => { > - {sender.name} has invited you to play a game of TicTacToe. Would you like to play? + {sender && sender.name} has invited you to play a game of TicTacToe. Would you like + to play? } - {!gameData.canPlay && !winner && ( + {!result && !gameData.canPlay && ( Not your turn, please wait for your opponent to play )} - {winner && winner.token === gameData.token ? ( - You are the winner - ) : ( - winner && Better luck next time!! + {result && ( +
    + {result.win && + (result.token === gameData.token ? ( + You are the winner!! + ) : ( + Better luck next time!! + ))} + {!result.win && It's a tie!!} +
    )} Game Status: {gameData.gamestatus} @@ -321,7 +318,7 @@ const Game = ({ webId, gameURL }: Props) => { squares: gameData.moves, onMove, canPlay: gameData.canPlay, - winner + result }} /> )} @@ -330,11 +327,11 @@ const Game = ({ webId, gameURL }: Props) => { Created: {moment(gameData.createddatetime).format('MMM Do, YYYY')} - {winner && ( + {result && result.win && ( - Winner: {winner.token} with{' '} - {winner.combination.join('-')} + Winner: {result.token} with{' '} + {result.combination.join('-')} )} diff --git a/generators/app/templates/src/contexts/tictactoe-shape.json b/generators/app/templates/src/contexts/tictactoe-shape.json index ddea34fd..20f891ce 100644 --- a/generators/app/templates/src/contexts/tictactoe-shape.json +++ b/generators/app/templates/src/contexts/tictactoe-shape.json @@ -1,31 +1,31 @@ { - "@context": { - "thing": "https://schema.org/Thing#", - "schema": "https://schema.org/", - "xsd": "http://www.w3.org/2001/XMLSchema#", - "rdfs": "http://www.w3.org/2000/01/rdf-schema#" + "@context": { + "thing": "https://schema.org/Thing#", + "schema": "https://schema.org/", + "xsd": "http://www.w3.org/2001/XMLSchema#", + "rdfs": "http://www.w3.org/2000/01/rdf-schema#" + }, + "shape": [ + { + "prefix": "rdfs", + "predicate": "gamestatus" }, - "shape": [ - { - "prefix": "rdfs", - "predicate": "gamestatus" - }, - { - "prefix": "rdfs", - "predicate": "createddatetime" - }, - { - "prefix": "schema", - "predicate": "sender" - }, - { - "prefix": "schema", - "predicate": "opponent" - }, - { "prefix": "rdfs", "predicate": "firstmove" }, - { - "prefix": "rdfs", - "predicate": "moveorder" - } - ] + { + "prefix": "rdfs", + "predicate": "createddatetime" + }, + { + "prefix": "schema", + "predicate": "sender" + }, + { + "prefix": "schema", + "predicate": "opponent" + }, + { "prefix": "rdfs", "predicate": "firstmove" }, + { + "prefix": "rdfs", + "predicate": "moveorder" + } + ] } From 3ec5b701692d591d4a280be1b8891765800487f9 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Thu, 11 Jul 2019 16:46:55 -0600 Subject: [PATCH 087/192] tie message fixed --- .../TicTacToe/GameListPage/game-list-page.component.js | 2 +- .../TicTacToe/GamePage/children/Field/field.component.js | 1 + .../TicTacToe/GamePage/children/Game/game.component.js | 6 +++--- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js b/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js index ac63251f..e606903e 100644 --- a/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js @@ -10,7 +10,7 @@ import { Form, List } from './children'; import { Section, Wrapper } from '../tic-tac-toe.style'; const GameListPage = ({ webId }) => { - const [opponent, setOpponent] = useState('https://jairo88.inrupt.net/profile/card#me'); + const [opponent, setOpponent] = useState('https://jprod.solid.community/profile/card#me'); const [gamePath, setGamePath] = useState(null); const { createNotification, createInbox, notifications, notification } = useNotification(webId); diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Field/field.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Field/field.component.js index cc2202cb..a965c143 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Field/field.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Field/field.component.js @@ -8,6 +8,7 @@ const Square = styled.button` font-weight: 700; padding: 0; border: none; + background: #fff; ${({ borders }) => borders && borders.map(border => `border-${border}: solid 4px;`)} color: ${({ winner }) => (winner ? 'green' : '#000')}; transition: border 500ms ease-out; diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js index 36e7f346..01c6723c 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js @@ -130,7 +130,7 @@ const Game = ({ webId, gameURL }: Props) => { }; const checkForWinnerOrTie = moves => { - if (!moves) return {}; + if (!moves) return null; const isMovesFull = moves.filter(move => move === null).length === 0; let gameResult = {}; for (const combination of possibleCombinations) { @@ -144,7 +144,7 @@ const Game = ({ webId, gameURL }: Props) => { break; } } - if (!gameResult.result && isMovesFull) gameResult = { win: false, finished: true }; + if (!gameResult.win && isMovesFull) gameResult = { win: false, finished: true }; setResult(gameResult); return gameResult; }; @@ -297,7 +297,7 @@ const Game = ({ webId, gameURL }: Props) => { {!result && !gameData.canPlay && ( Not your turn, please wait for your opponent to play )} - {result && ( + {result && result.finished && (
    {result.win && (result.token === gameData.token ? ( From 52b299c353f1570ff763e9d2482d677a91312e81 Mon Sep 17 00:00:00 2001 From: Jairo Campos Date: Fri, 12 Jul 2019 08:27:24 -0600 Subject: [PATCH 088/192] fixed nav bar issue --- .../src/components/AuthNavBar/auth-nav-bar.component.js | 4 +--- .../components/NavBar/children/Toolbar/toolbar.component.js | 6 +++++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js index 7b4bb688..640a2e7c 100644 --- a/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js +++ b/generators/app/templates/src/components/AuthNavBar/auth-nav-bar.component.js @@ -80,9 +80,7 @@ const AuthNavBar = React.memo((props: Props) => { id: 'notifications' }, { - component: ({ open, customClass }) => ( - - ), + component: props => , id: 'profile' } ]} diff --git a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js index cefb5698..94191f69 100644 --- a/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js +++ b/generators/app/templates/src/components/NavBar/children/Toolbar/toolbar.component.js @@ -12,7 +12,11 @@ const areEqual = (prevProps, nextProps) => { const nextInbox = nextProps && nextProps.toolbar.length > 1 && nextProps.toolbar[1].component().props.inbox; - if (prevInbox.length !== nextInbox.length) { + if (prevInbox && prevInbox.length !== nextInbox && nextInbox.length) { + return false; + } + + if (prevProps.open !== nextProps.open) { return false; } From aa127ff80c88b8d949ba5e620c7bb0f66fdfc3d8 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 15 Jul 2019 12:01:22 -0600 Subject: [PATCH 089/192] Sender to actor --- generators/app/templates/package-lock.json | 103 ++++++------------ generators/app/templates/package.json | 2 +- .../notification-item.component.js | 6 +- .../children/Form/game-form.component.js | 4 +- .../GameListPage/game-list-page.component.js | 2 +- .../GamePage/children/Game/game.component.js | 14 +-- .../GameAccept/game-accept.component.js | 6 +- .../src/contexts/tictactoe-shape.json | 7 +- 8 files changed, 55 insertions(+), 89 deletions(-) diff --git a/generators/app/templates/package-lock.json b/generators/app/templates/package-lock.json index 28fa4937..6a79df34 100644 --- a/generators/app/templates/package-lock.json +++ b/generators/app/templates/package-lock.json @@ -1953,9 +1953,9 @@ } }, "@inrupt/solid-react-components": { - "version": "0.8.0", - "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.8.0.tgz", - "integrity": "sha512-tkkgsu8rZ8m7aqANFXNIqw70BPf5H3OPcFCnY2VobWZCPamrAlQAXEHi2H22aCkhSxPVlwx9BFLStPmLL7fhLw==", + "version": "0.4.3-local.6", + "resolved": "http://localhost:4873/@inrupt%2fsolid-react-components/-/solid-react-components-0.4.3-local.6.tgz", + "integrity": "sha512-SSSGJbVn30TouOC2wxv0Y9TeAwncGio2MbkyOWKbYWwb6D9HRtDsKT68SoIg8CsqDR10ga1CvRY67VwsNshjiA==", "requires": { "@babel/runtime": "^7.1.2", "@rdfjs/data-model": "^1.1.1", @@ -7297,8 +7297,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7316,13 +7315,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7335,18 +7332,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -7449,8 +7443,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -7460,7 +7453,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7473,20 +7465,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7503,7 +7492,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7576,8 +7564,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -7587,7 +7574,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7663,8 +7649,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -7694,7 +7679,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7712,7 +7696,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7751,13 +7734,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -10461,9 +10442,9 @@ } }, "mixin-deep": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz", - "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", + "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", "requires": { "for-in": "^1.0.2", "is-extendable": "^1.0.1" @@ -10721,7 +10702,7 @@ "integrity": "sha1-CH52u+t+jcVmhrJdtOYMX/nbCR8=", "requires": { "is-stream": "^1.1.0", - "web-streams-polyfill": "git://github.com/gwicke/web-streams-polyfill.git#spec_performance_improvements" + "web-streams-polyfill": "git://github.com/gwicke/web-streams-polyfill.git#42c488428adea1dc0c0245014e4896ad456b1ded" } }, "nopt": { @@ -14732,9 +14713,9 @@ "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, "set-value": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz", - "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", + "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", "requires": { "extend-shallow": "^2.0.1", "is-extendable": "^0.1.1", @@ -15017,11 +14998,11 @@ }, "dependencies": { "async": { - "version": "2.6.2", - "resolved": "http://localhost:4873/async/-/async-2.6.2.tgz", - "integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==", + "version": "2.6.3", + "resolved": "http://localhost:4873/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", "requires": { - "lodash": "^4.17.11" + "lodash": "^4.17.14" } }, "jsonld": { @@ -15034,6 +15015,11 @@ "semver": "^5.6.0", "xmldom": "0.1.19" } + }, + "lodash": { + "version": "4.17.14", + "resolved": "http://localhost:4873/lodash/-/lodash-4.17.14.tgz", + "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==" } } }, @@ -16257,35 +16243,14 @@ } }, "union-value": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", - "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", + "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", "requires": { "arr-union": "^3.1.0", "get-value": "^2.0.6", "is-extendable": "^0.1.1", - "set-value": "^0.4.3" - }, - "dependencies": { - "extend-shallow": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", - "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "requires": { - "is-extendable": "^0.1.0" - } - }, - "set-value": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz", - "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=", - "requires": { - "extend-shallow": "^2.0.1", - "is-extendable": "^0.1.1", - "is-plain-object": "^2.0.1", - "to-object-path": "^0.3.0" - } - } + "set-value": "^2.0.1" } }, "uniq": { diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index 8743d38d..1feaef64 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -4,7 +4,7 @@ "@fortawesome/free-brands-svg-icons": "^5.8.0", "@fortawesome/free-solid-svg-icons": "^5.6.3", "@fortawesome/react-fontawesome": "^0.1.4", - "@inrupt/solid-react-components": "^0.8.0", + "@inrupt/solid-react-components": "^0.4.3-local.6", "@inrupt/solid-style-guide": "^0.1.34", "@rdfjs/data-model": "^1.1.1", "@solid/query-ldflex": "^2.4.0", diff --git a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js index d1c6db7a..b3b7917c 100644 --- a/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js +++ b/generators/app/templates/src/components/Notifications/children/NotificationsPanel/children/NotificationItem/notification-item.component.js @@ -13,7 +13,7 @@ type Props = { const NotificationItem = ({ notification, markAsRead, children, deleteNotification }: Props) => { const { read } = notification; const currentRead = read ? JSON.parse(read) : false; - const { sender } = notification; + const { actor } = notification; const redirectTo = useCallback(async () => { if (notification.target) { await markAsRead(notification.path, notification.id); @@ -23,12 +23,12 @@ const NotificationItem = ({ notification, markAsRead, children, deleteNotificati return ( - + Creator - {sender.name} {notification.summary} + {actor.name} {notification.summary} {moment(notification.sent).fromNow()} diff --git a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/Form/game-form.component.js b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/Form/game-form.component.js index 0aba650e..d8358e02 100644 --- a/generators/app/templates/src/containers/TicTacToe/GameListPage/children/Form/game-form.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GameListPage/children/Form/game-form.component.js @@ -53,7 +53,7 @@ const GameForm = ({ webId, sendNotification, opponent, setOpponent }: Props) => gamestatus: 'Awaiting', createddatetime: moment().format(), updateddatetime: moment().format(), - sender: namedNode(webId), + actor: namedNode(webId), opponent: namedNode(opponent), firstmove: 'X', moveorder: '' @@ -75,7 +75,7 @@ const GameForm = ({ webId, sendNotification, opponent, setOpponent }: Props) => await sendNotification({ title: 'Tictactoe invitation', summary: 'has invited you to play Tic-Tac-Toe.', - sender: webId, + actor: webId, object: documentUri, target }); diff --git a/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js b/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js index e606903e..2a9a6b31 100644 --- a/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GameListPage/game-list-page.component.js @@ -22,7 +22,7 @@ const GameListPage = ({ webId }) => { errorToaster(error.message, 'Error'); } }, - [opponent, notifications] + [opponent, notifications, notification] ); const init = async () => { diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js index 01c6723c..78363fad 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/Game/game.component.js @@ -116,7 +116,7 @@ const Game = ({ webId, gameURL }: Props) => { } }; - const getRival = ({ sender, opponent, owner }) => (owner ? opponent : sender); + const getRival = ({ actor, opponent, owner }) => (owner ? opponent : actor); const fetchRawData = async () => { const game = await ldflexHelper.fetchLdflexDocument(gameURL); @@ -162,10 +162,10 @@ const Game = ({ webId, gameURL }: Props) => { const getInitialGame = useCallback(async () => { try { const gameDocData = await fetchRawData(); - const sender = await getPlayerInfo(gameDocData.sender); + const actor = await getPlayerInfo(gameDocData.actor); const opponent = await getPlayerInfo(gameDocData.opponent); - const owner = webId === sender.webId; - const rival = getRival({ sender, opponent, owner }); + const owner = webId === actor.webId; + const rival = getRival({ actor, opponent, owner }); const token = owner ? gameDocData.firstmove : getSecondToken(gameDocData.firstmove); const moveorder = gameDocData.moveorder ? gameDocData.moveorder.split('-') : []; const moves = generateMoves(moveorder, gameDocData.firstmove); @@ -176,7 +176,7 @@ const Game = ({ webId, gameURL }: Props) => { }); const newData = { ...gameDocData, - sender, + actor, opponent, moveorder, moves, @@ -249,7 +249,7 @@ const Game = ({ webId, gameURL }: Props) => { await sendNotification(rival.webId, { title: 'Tictactoe move', summary: 'A move has been made in your Tic-Tac-Toe game.', - sender: webId, + actor: webId, object: gameURL, target: window.location.href }); @@ -272,7 +272,7 @@ const Game = ({ webId, gameURL }: Props) => { }, []); useEffect(() => { - if ((gameURL || timestamp) && !isProcessing && gameData.sender) getGame(); + if ((gameURL || timestamp) && !isProcessing && gameData.actor) getGame(); }, [gameURL, timestamp]); return ( diff --git a/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js b/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js index 318f5800..5f7bbd3d 100644 --- a/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js +++ b/generators/app/templates/src/containers/TicTacToe/GamePage/children/GameAccept/game-accept.component.js @@ -17,9 +17,9 @@ const Content = styled.div` ReactModal.setAppElement('#root'); -type Props = { sender: Object, onAccept: Function, onDecline: Function }; +type Props = { actor: Object, onAccept: Function, onDecline: Function }; -const GameAccept = ({ sender, onAccept, onDecline }: Props) => { +const GameAccept = ({ actor, onAccept, onDecline }: Props) => { const [isOpen, setIsOpen] = useState(false); useEffect(() => { @@ -42,7 +42,7 @@ const GameAccept = ({ sender, onAccept, onDecline }: Props) => { > - {sender && sender.name} has invited you to play a game of TicTacToe. Would you like + {actor && actor.name} has invited you to play a game of TicTacToe. Would you like to play?