Comments (25)
Assigned. Let us know if you need anything :)
from sample-app-react.
@petrsvihlik .. I see this is a new issue. Can i take it up. Or if you have already existing priority issues do let me know ! Thanks :)
from sample-app-react.
Hi @pavan-krishna-v, you can certainly pick it up! I've just sent you an invitation to the project. I'll be able to assign the issue to you once you accept it.
from sample-app-react.
Hi @pavan-krishna-v, you can certainly pick it up! I've just sent you an invitation to the project. I'll be able to assign the issue to you once you accept it.
Done. Thanks !
from sample-app-react.
Motivation
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).
Proposed solution
- The app should handle missing values and display some placeholder without data or with some explanation (e.g,. "Price TBA")
- check other possible occurences of this problem
Additional context
- you can find some inspiration in the .NET sample app
- related cloud-sample-app-vue issue
Hi @petrpyszko ,
I understand that the issue is beyond just unavailablity of price. Also, i see that both coffee products are failing to load and both brewery pages are working. All the products have the price.
The url which i checked is, http://localhost:3000/en-us/store/brewers.
And i notice that all article pages are failing on clicking of preview.
Do let me know if i got the issue right.
from sample-app-react.
Hi @pavan-krishna-v ,
yes, you are right, the App should be working even for the new (completely blank) items (brewers, articles ....). I am not sure which other fields can cause similar issues - but after creating blank items of each content type, you should be able to quickly identify other problematic areas :)
from sample-app-react.
Hi @pavan-krishna-v,
since this is a sample application, it is completely fine to have just a show case, how to implement missing values. So it will be OK to protect only articles or products and not to implement all the cases where we could face missing values.
Take a look to the solution in our Vue sample app for inspiration.
Hope it helps 😄
from sample-app-react.
Hello @pavan-krishna-v ,
do you have any update on this issue?
from sample-app-react.
If efforts to solve this issue have been abandoned, I'd like to take it. However, I don't see the issue for this page. Please provide information on how to reproduce error.
from sample-app-react.
Hi @Karl-EdwardFPJeanMehu , I've just sent you an invitation to the project. I'll be able to assign the issue to you once you accept it.
You should be able to reproduce the issue if you turn on the preview functionality as described at https://github.com/Kentico/cloud-sample-app-react#previewing-content-from-your-project
You can generate a sample project at https://app.kenticocloud.com/sample-project-generator and turn on the preview functionality as described at https://developer.kenticocloud.com/docs/previewing-content-in-a-separate-environment#section-using-the-delivery-preview-api
from sample-app-react.
in the related task (basically the same but in Vue application), there is a description how to reproduce the error step by step).
But instead of npm run serve
, you would use npm start
and connection to the client is described here:
from sample-app-react.
Thanks @Simply007 ! I'll check it out
from sample-app-react.
If you have any question, feel free to ask!
If you want to assign this issue to you, just accept the invitation @petrsvihlik has sent you:
https://github.com/Kentico/cloud-sample-app-react/invitations
from sample-app-react.
I had found the issue but just took some time to make sure. The metaData state variable is initially undefined. That is causing the typeError in the MetaData comp for all given prop values (ie metadataMetaTitle). I would like to know is there a set of preferred default values I may consult to set them to?
from sample-app-react.
I would use the same default values that are in Vue sample app at least for Article:
https://github.com/Kentico/cloud-sample-app-vue/pull/19/files#diff-48bf359bb9d62bda17a5805ab100d8d1
The other values are not strictly defined, so would use the same pattern:
- No <fieldname> filled
- (<contenttype> has not <element name>)
from sample-app-react.
Thanks!
from sample-app-react.
What should I use as a default image? I'm currently using a simple svg image with the text "product has no image" at its center. Otherwise, simply returning (<contenttype> has not <element name>)
as you mentioned above will return an invalid image source path and so a broken image will be rendered.
from sample-app-react.
In a Vue.js there is an image omited.
I would be more for the placeholder div with the text: <contenttype> has not <element name>
with the same size as the image to not corupt the layout.
from sample-app-react.
Ok, I see it.
from sample-app-react.
Nearly complete. Please advise for meta OG images. These can only be replaced by a default image.
from sample-app-react.
I assume you mean the OG image that is passed to the Metadata component.
It is fine like it is implemented right now - when you pass the null
to the component then the meta tag is not rendered.
from sample-app-react.
Yes, the implementation as you described is ok but I've tested it and the app throws an error when those SSO tags are left empty in the app.
from sample-app-react.
I will take a look at the #125 pull request and let you know!
from sample-app-react.
I have gone through the pull request and everything works fine.
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 : ( // {!props.ogImage ? null : (
<meta property="og:image" content={props.ogImage.value[0].url} />
)}
But I am completely fine to accept the pull request without it.
So it depends on you whether you want to implement it!
Great jop @Karl-EdwardFPJeanMehu, thanks!
from sample-app-react.
Thanks @Simply007 !
from sample-app-react.
Related Issues (20)
- Replace hardcoded sample project items count in SelectedProject.js HOT 3
- Extract API keys definition to .env HOT 2
- Fix Glitch setup HOT 3
- Update integration sample - Bynder HOT 4
- Update integration sample - Shopify HOT 2
- Update integration sample - GA experiments HOT 5
- Update integration sample - Google analytics HOT 2
- Update integration sample - Hubspot HOT 4
- Update integration sample - Magento HOT 11
- Update integration sample - Optimizely HOT 2
- Image Sliders don't Work in the React Sample App HOT 1
- Configuration admin page is not up-to-date with the latest design HOT 3
- Update to latest React HOT 5
- Store rewrite
- Upgrade to npm lockfile v2
- google-maps-react is not supported in React 17 HOT 1
- [Spike] Prepare multilingual setup HOT 3
- Missing typescript in dev dependencies
- Cannot leave configuration in web spotlight
- Put the kontent client into a react context
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sample-app-react.