kontent-ai / sample-app-react Goto Github PK
View Code? Open in Web Editor NEWSample React SPA utilizing the Kontent.ai Delivery API to fetch content.
Home Page: https://kontent-sample-app-react.netlify.app/
License: MIT License
Sample React SPA utilizing the Kontent.ai Delivery API to fetch content.
Home Page: https://kontent-sample-app-react.netlify.app/
License: MIT License
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/bynder
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentAs a followup for issue #97, there is one component left with lifecycle method with prefix UNSAVE. In the react v17, it is required to remove those methods, because they are about to be deleted.
Use different lifecycle methods as a substitution for the deprecated ones.
There are 2 occurrences of UNSAFE_componentWillUpdate
and one of UNSAFE_componentWillReceiveProps
.
Current features on Contacts page:
If a user clicks on the address on Contacts (/contacts) page, the page is scrolled to the map and the address is focused on the map. Event when switching the languages.
See also related issues #97, #105, #99 for more information.
Loading content using typescript SDK raise a warning that URL slug is not implemented:
i.e. Home page raise this warning 9 times.
Consequences on the content, that uses some links in rich text does not resolve them properly.
Example:
Link in article detail (http://localhost:3000/#/articles/coffee-processing-techniques)
contains link to Brazil Natural Barra Grande (content type Coffee) is not resolve
Expected:
http://localhost:3000/#/store/coffees/brazil-natural-barra-grande
But is
http://localhost:3000
The application should show a loading indicator (loading spinner) when waiting for data from Kentico Cloud.
This error can occur when starting
Error: Cannot find module 'typescript' from 'G:\work\kontent-sample-app-react\node_modules'
at Function.resolveSync [as sync] (G:\work\kontent-sample-app-react\node_modules\resolve\lib\sync.js:111:15)
at getModules (G:\work\kontent-sample-app-react\node_modules\react-scripts\config\modules.js:119:32)
at Object.<anonymous> (G:\work\kontent-sample-app-react\node_modules\react-scripts\config\modules.js:142:18)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (G:\work\kontent-sample-app-react\node_modules\react-scripts\config\webpack.config.js:28:17) {
code: 'MODULE_NOT_FOUND'
npmi
typescript
installed globaly)No error
Solution is to add typescript
in dev dependencies.
In /src/Utilities/SelectedProject.js there is a hardcoded SAMPLE_PROJECT_ITEM_COUNT constant which is used in the wizard.
This wizard checks if the Delivery API has already accessible all items in the user's Dancing Goat project and if the project is fully accessible. If the count of all items in the project is more or equals to items from constant then we consider the project to be ready.
However, if the user's sample Dancing Goat project changes (we add/remove new content) this logic might not work. Under the hood, we clone the Dancing Goat project from 'one-source-of-truth' project.
The goal of this issue is to implement logic which will get a count of items in from this source (-of-truth) project (projectId: 975bf280-fd91-488c-994c-2f04416e5ee3) and store it to an existing (non)constant which will be checked the same way as it is right now.
Note: It might be a good idea to adjust if condition in Configuration.js, too.
Something like ... if (response.items.length > SAMPLE_PROJECT_ITEM_COUNT) in waitUntilProjectAccessible function.
Application does not count with the inline content module within the rich text element.
Example on coffee-beverages-explained article:
This change was made @jancerman (Andrew Dixon) on Jun 27, 2017 · 3:12 pm according to revision history.
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/ga-experiments
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentThe current implementation uses React 16, but the actual React version is at least 17.
Upgrade to the newest React version and fix all the breaking changes.
React 16 vs 17 https://github.com/facebook/react/blob/main/CHANGELOG.md
The Kontent design changed quite a lot since (Admin/Configuration.js)[https://github.com/Kentico/kontent-sample-app-react/blob/master/src/Pages/Admin/Configuration.js] was last updated. It should look completely different now. Check out kontent-ai/sample-app-net#128 for an inspiration.
It would be great if the npm lockfile gets upgraded to version 2 which is used by npm v7 or later, since the new lockfile has some great features and advantages in comparison to the lockfile v1. As far as I know, this would drop support for npm v6.
If you are fine with upgrading to the new lockfile, let me know. I'll create a PR for that!
Similarly to kontent-ai/sample-app-net#19, add a Spanish translation of the site.
Use a more convenient way of fetching data using React than implementing ~/src/Stores
manually.
Use set's use state on the Page component levels.
Remix on Glitch button does not work.
It was introduced in 8b98237
Current section
The button should work or should be removed.
There are some inconsistencies in code style, especially in the use of apostrophes vs double quotes.
Example:
import { resolveContentLink } from '../Utilities/ContentLinks'
import BrewerStore from "../Stores/Brewer";
Suggested approach:
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/hubspot
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentHey guys I am evaluating Kentico Kontent for an application but nearly everything I am trying is being overwritten by the out of the box CSS in the Sample App.
I have tried 3-4 different image slider packages and they all break out of the box.
I settled on https://swiperjs.com/ but it is breaking out of the box.
Should I be using the sample app as a starting point? I essentially want a blank slate to develop on.
I have dropped index.css completely yet most rules are being overwritten
There is nothing in the computed that I can see will tell me where these rules are being overwritten. I am at the point that I am going to have to start tearing out large chunks of the Sample App.
What am I doing wrong?
Once we add relevant sample content to the sample project we'd like to update this sample app to reflect the changes and demonstrate the URL slug functionality.
Internal reference: DEL-665
https://github.com/Kentico/cloud-sample-app-react/blob/master/localization/items.json contains a dump of existing untranslated content items.
We need to translate the "name", "description" and "value" fields to Spanish.
npx create-react-app my-app --template typescript
(https://create-react-app.dev/docs/adding-a-router/)google-maps-react is not supported in React 17
npm i
Error:
ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.2" from the root project
npm WARN 9 more (@simply007org/kontent-react-components, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"~0.14.8 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/google-maps-react
npm WARN google-maps-react@"^2.0.6" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"~0.14.8 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/google-maps-react
npm WARN google-maps-react@"^2.0.6" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN react-dom@"^17.0.2" from the root project
npm WARN 2 more (@simply007org/kontent-react-components, react-scroll)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"~0.14.8 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/google-maps-react
npm WARN google-maps-react@"^2.0.6" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN peer react-dom@"~0.14.8 || ^15.0.0 || ^16.0.0" from [email protected]
npm WARN node_modules/google-maps-react
npm WARN google-maps-react@"^2.0.6" from the root project
No error - try to find an alternative package for the Google Maps component.
The app crashes unexpectedly in the preview mode for articles without the image or products without the price. Preview Delivery API returns items in the draft step and some values can be missing (even required fields).
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/ga
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentAfter the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/shopify
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentThe dependency marked 0.3.6
is vulnerable, update to 0.3.9 is recommended.
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/optimizely
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentWe should update to latest kentico-cloud-delivery
sdk version.
As was described in #115, there is insufficient check for missing values for Metadata
component values.
Great jop @Karl-EdwardFPJeanMehu, thanks!
According to the metadata (i.e. ogImage) I would recommend using the lodash for the value check:
import _ from 'lodash';
...
{!_.has(props, 'ogImage.value[0].url') ? null : ( // current state => {!props.ogImage ? null : (
<meta property=\"og:image\" content={props.ogImage.value[0].url} />
)}
It would better fit into the React flow to have the client inside a react context or state. (context avoids props drilling compared to state). As it now stands, once you reset the client, React doesn't ensure that your components get re-rendered with the new client (project id). If the client would be part of the React flow (i.e. in a context or a state) react would re-render your components and ensure you always render the freshest data.
Put the Kontent.ai client into a React context instead of having it in a global mutable variable.
Demonstrate the multiple choice element.
Sample Project ID: 975bf280-fd91-488c-994c-2f04416e5ee3
Content Type: Coffee
Element Name: Processing
Internal reference: DEL-680
Kentico Kontent admin UI now supports navigating to specific content items via URLs in a certain format.
The goal of this task is to enrich the markup of this sample application with the links.
Suggested approach:
Blocked by: https://github.com/Kentico/kontent-delivery-sdk-js/issues/52
We want to present to our customers an example of this feature – how they can use that
When
I open About Us preview
Then
I see enabled "Edit mode" in the fixed bar on the bottom of the page
And
I am able to click on each element from the page About Us
When
I open About Us preview
Then
I see the link "Open in KC" in the fixed bar on the bottom of the page
And
I am able to click on it
When
I click on toggle button Edit mode
Then
Edit mode is turned off
And
I am able to preview page without distraction - only the fixed bar is presented
After the rebranding from Kentico Cloud to Kentico Kontent there are still some samples that use old naming in branches named samples/*
.
Until the end of October endpoint on domain kenticocloud.com
stop working and there will be redirect performed:
samples/magento
branchkentico-cloud-delivery
to @kentico/kontent-delivery
@chevtek/react-spinners
to @simply007org/react-spinners
travis.yml
to use the correct domain for deploymentKentico Cloud now supports so called content type snippets. These are sets of content elements that can be added to multiple content types to enrich their structure but still be managed from a single place.
The Delivery API responses contain both the elements originating from snippets alongside their own elements. The only difference is that snippets have code names prefixed with the code name of the respective snippet. The format of code names is [code name of snippet]__[code name of element]
.
A shortened example of a content item:
{
"item": {
"system": {
// ...
"type": "brewer",
// ...
},
"elements": {
// ...
"product_name": {
"type": "text",
"name": "Product name",
"value": "AeroPress"
},
// ...
"metadata__meta_title": {
"type": "text",
"name": "Meta title",
"value": null
},
// ...
}
},
"modular_content": {}
}
The goal of this task is to implement support for rendering content items of content types that utilize a content snippet. For that scenario, we've prepared a sample content snippet that enriches other content types with SEO-related data, such as og:title, og:description, etc. which are then rendered in the <head>
of the page.
Suggested approach:
<head>
of the pageWhen I open the sample app in the web spotlight, I can't leave the configuration page. Submitting the form doesn't work, because the cookie is not accessible to the page in the iframe. You need to set the SameSite=None;Secure
policy. See https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/#a-set-up-preview-for-web-spotlight
The app should open the homepage route with the project id in a cookie.
Stores used for providing the data from Kentico cloud are using observable collections. Stores are subscribed to the collection changes, but the subscription is not canceled when the component using this store is unmounted.
We need to cancel the subscriptions, because we need to cancel the request when the component which was using the store to load the data is not rendered on the site anymore.
Similarly to kontent-ai/boilerplate-net#1, we'd like to support the new VS tooling and be able to install the site using the dotnet new
command.
Ideally, the template should be parameterized with the project guid.
All necessary resources can be found in the related task.
@Simply007 originally logged an issue against the Vue sample project, which would probably be a good idea for the react sample project too.
See kontent-ai/sample-app-vue#23 (comment) for detailed information.
The general idea is to move the recommended configuration of sensitive key information from the Client.js
file into git ignored .env.*
files.
Best practice nowadays is to use environment variables stored in .env file.
Client.js
to use .env definition for keys (projectId and previewApiKey)In React v17 UNSAFE_componentWillReceiveProps
method is deprecated and should be replaced by another lifecycle method.
Change calling of UNSAFE_componentWillReceiveProps
method to some more appropriate - some tips point to https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops.
Try that one and make a testing of all occurrences.
As part of the update to the TypeScript SDK, the Preview API was taken out of the default behavior. It should be restored so that the instructions in README.md enable users to easily enable previews from the sample app.
We have a new feature, language-specific URL slugs generated from Text elements. Consider if the React sample app needs to be updated.
See the task in JIRA: https://kentico.atlassian.net/browse/DEL-1635
Currently, it's unclear at first what content is hardcoded in the app and what is drawn from Kentico Cloud. For example, the Hero unit on the homepage is not drawn from Kentico Cloud. So it's possible to run the app and get confused when changing the Hero unit in Kentico Cloud doesn't change the content in the app.
jpg
in this repo
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.