I am trying to sort an HTML table based on it's values in my Lit element. However, I'm running into a problem with my component. Here is an overview of my table;
The problem
In this application, you need to be able to sort on every table header. However, items which are considered 'done' need to move to the bottom of the table. My problem arises whenever I mark an item as done. In the following example I will mark the top todo (task: 123) as done. The expected behaviour is that the todo is moved to the bottom of the table with it's checkbox enabled. This is not however what is the outcome at the moment.
As you can see, the todo item with task 123 is moved to the bottom. However, the todo with task 456 also gets it's checkbox marked. This is not desired behaviour and I don't know what's causing it. You can also see that the colors are not correct (this is some styling to show you that a changed todo is being saved, yellow = saving, green = saved and red = error).
Things I have tried
Since I don't know what is exactly causing this issue I don't know what I should do. I gave all my inputs/rows/td's id's to make sure nothing gets mixed up, but that doesn't seem to work.
Code
import { LitElement, html, css } from 'lit-element';
class TableList extends LitElement {
static get properties() {
return {
data: {
type: Array
},
primaryKey: {
type: String
},
defaultSortKey: {
type: String
}
};
}
set data(value) {
let oldValue = this._data;
this._data = [ ... value];
this.sortByHeader();
this.requestUpdate('data', oldValue);
}
get data() {
return this._data;
}
async edit(entry, key, event) {
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('saved');
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('error');
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.add('saving');
if (entry[key].type === "checkbox") {
entry[key].value = event.target.checked;
} else {
entry[key].value = event.target.value;
}
if (await update(entry)) {
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('saving');
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.add('saved');
setTimeout(() => {
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('saved');
}, 1000);
} else {
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('saving');
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.add('error');
setTimeout(() => {
this.shadowRoot.getElementById('entry' + entry[this.primaryKey].value).classList.remove('error');
}, 5000);
}
}
sortByHeader(key) {
if (key === undefined) {
key = this.defaultSortKey;
}
let oldValue = this.data;
this._data = [ ... this.data.sort((a, b) => {
return a[this.defaultSortKey].value - b[this.defaultSortKey].value
|| a[key].value - b[key].value;
})];
this.requestUpdate('data', oldValue);
}
renderHeaders() {
let keys = Object.keys(this.data[0]);
return keys.map(key => html`
${this.data[0][key].visible ?
html`
<th id="${'header' + key}" #click="${() => this.sortByHeader(key)}">
${key}
</th>
`: ''
}
`)
}
renderRows() {
return this.data.map(entry => html`
<tr id="${'entry' + entry[this.primaryKey].value}">
${Object.keys(entry).map(key => html`
${entry[key].visible && !entry[key].editable ?
html`<td>${entry[key].value}</td>`
: ``
}
${entry[key].visible && entry[key].editable ?
html`<td id="${'td' + key + entry[this.primaryKey].value}">
<input
id="${'input' + key + entry[this.primaryKey].value}"
name="${'input' + key + entry[this.primaryKey].value}"
type="${entry[key].type}"
?checked="${entry[key].value}"
value="${entry[key].value}"
#change="${(event) => {
this.edit(entry, key, event)
}}"
/>
</td>`
: ``
}
`)}
</tr>
`)
}
render() {
return html`
<table id="table-list">
<thead>
<tr>
${this.renderHeaders()}
</tr>
</thead>
<tbody>
${this.renderRows()}
</tbody>
</table>
`;
}
static get styles() {
return css`
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
}
tr {
text-align: right;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background: white;
padding: 20px;
}
.disabled {
color: lightgrey;
}
.saving {
background: yellow;
}
.saved {
background: lightgreen;
}
.error {
background: red;
}
.sort:after {
content: ' ↓';
}
`;
}
}
export default TableList;
If you are using array with id in template use repeat function of lit-html
import { repeat } from "lit-html/directives/repeat";
For styling don't add classes to DOM manually. Use classMap from lit-html
import { classMap } from "lit-html/directives/class-map";
I fixed your checkbox issue please follow this link.
For more information about lit-html please refer to their documentation.
Related
I am a developer working with my organization's BQA group assisting with their test automation. We have a big and complicated web site developed in Angular (version 7 to 10, I think) whose development has been contracted out to another large firm. I am trying to implement Selenium Webdriver using Visual Studio and C# with NUnit. One if my biggest pains with the automation has been with a custom implementation the drop-down lists.
I know a little JavaScript but have been trying to catch up with ES5, ES6, NodeJS, TypeScript, Angular, etc. However, I am better with C#.
I can easily use the built-in functions within Selenium to select the options within these lists. However, these values never get registered server-side and often trigger warnings if they are marked as mandatory.
var driver = new ChromeDriver();
driver.FindElement(By.XPath("//app-select[#id='myId']")).Click();
new SelectElement(driver.FindElement(By.XPath("//app-select[#id='myId']//select"))).SelectByText("Some Option");
or even...
var js = (IJavaScriptExecutor)driver;
var appSelect = new SelectElement(driver.FindElement(By.XPath("//app-select[#id='myId']//select")));
foreach(var opt in appSelect.Options)
{
if(opt.Text = "Some Option")
{
js.ExecuteScript("arguments[0].selected=true", opt); // Works like SelectByText().
js.ExecuteScript("arguments[0].input", appSelect); // These don't seem to ...
js.ExecuteScript("arguments[0].change", appSelect); // ... make any kind of difference.
break;
}
}
I have access to the code-base of our web site. So, I can examine this custom component but I do not understand Angular very well. I suspect there is a server-side session variable (NgModel?) that is not being updated. I don't know if I can use client-side JavaScript to trigger an update and make my scripts behave properly.
Any suggestions would be most appreciated!
Here is the Angular code for the component.
===== select.component.html =====
<select #innerSelect [attr.id]="uid" class="select" [value]="value" [disabled]="disabled" (blur)="onBlur()"
(input)="inputChanged($event)">
<ng-content></ng-content>
</select>
<div class="arrow-icon" aria-hidden="true"></div>
===== select.component.ts =====
import { Component, ViewEncapsulation, forwardRef, Output, EventEmitter, Input, OnInit, Renderer2, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '#angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '#angular/forms';
import { ContentObserver } from '#angular/cdk/observers';
import { Subscription } from 'rxjs';
let nextUniqueId = 0;
/** A wrapper for a native select component. This allows us to render out a drop down arrow that is inline with branding. */
#Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SelectComponent),
multi: true
}
],
encapsulation: ViewEncapsulation.None
})
export class SelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
/** When dataType is set to "number",. value will be converted to a number on get. */
#Input() dataType;
/** Whether the component is disabled. */
#Input() disabled = false;
/** Value of the control. */
#Input()
get value(): any { return this._value; }
set value(newValue: any) {
if (newValue !== this._value) {
this.writeValue(newValue);
this._value = newValue;
}
}
private _value: any;
/** Unique id of the element. */
#Input()
get uid(): string { return this._uid; }
set uid(value: string) {
this._uid = value || this._defaultId;
}
private _uid: string;
/** tracks changes to the content of the inner select (options) */
private contentChanges: Subscription = null;
/** appAutoFocus directive does not work here, so we implement autoFocus ourselves */
#Input() autoFocus = false;
/**
* Event that emits whenever the raw value of the select changes. This is here primarily
* to facilitate the two-way binding for the 'value' input.
*/
#Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
#ViewChild('innerSelect', { static: true }) innerSelect: ElementRef;
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/** Unique id for this input. */
// tslint:disable-next-line:member-ordering
private _defaultId = `app-select-${nextUniqueId++}`;
/** View -> model callback called when value changes */
onChange: (value: any) => void = () => { };
/** View -> model callback called when select has been touched */
onTouched = () => { };
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
constructor(private el: ElementRef, private renderer: Renderer2, private obs: ContentObserver) {
// Force setter to be called in case id was not specified.
this.uid = this.uid;
}
ngOnInit() {
this.autoFocus = this.el.nativeElement.hasAttribute('autoFocus');
}
ngAfterViewInit() {
// Watch for changes in the content of the select control.
// This is in place for situations where the list of options comes in *after* the value of the select has been set.
// If that occurs, re-set the value of the select to force the browser to pick the right option in the drop down list.
this.contentChanges = this.obs.observe(this.innerSelect.nativeElement).subscribe((event: MutationRecord[]) => {
this.innerSelect.nativeElement.value = this._value;
});
if (this.autoFocus === true) {
setTimeout(() => {
this.innerSelect.nativeElement.focus();
}, 200);
}
if (this.el.nativeElement.hasAttribute('id')) {
console.warn('app-select has an "id". Use "uid" to set the id of the inner select element.');
}
}
ngOnDestroy() {
this.contentChanges.unsubscribe();
}
/**
* Sets the select's value. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*/
writeValue(value: any): void {
this._value = value;
}
/**
* Saves a callback function to be invoked when the select's value
* changes from user input. Part of the ControlValueAccessor interface
* required to integrate with Angular's core forms API.
*/
registerOnChange(fn: (value: any) => void): void {
this.onChange = fn;
}
/**
* Saves a callback function to be invoked when the select is blurred
* by the user. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*/
registerOnTouched(fn: () => {}): void {
this.onTouched = fn;
}
/**
* Disables the select. Part of the ControlValueAccessor interface required
* to integrate with Angular's core forms API.
*/
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
onBlur() {
this.onTouched();
}
inputChanged(event) {
const targetValue = event.target.value;
if (targetValue && targetValue.toLowerCase() === 'null') {
this.value = null;
} else if (this.dataType === 'number') {
// if number is specified, attempt to convert the value
this.value = +targetValue;
} else if (this.dataType === 'string') {
// if string is specified, attempt to convert the value
this.value = '' + targetValue;
} else if (targetValue === '') {
// treat empty string as null
this.value = null;
} else if (!isNaN(targetValue)) {
// if no dataType is specified, attempt to determine if the value is a number
this.value = +targetValue;
} else {
// otherwise use the value as is (should be a string)
this.value = targetValue;
}
this.onChange(this.value);
}
}
===== select.component.scss =====
app-select {
position: relative;
display: block;
width: 19em; // default drop-down width?
select {
display: inline-block;
position: relative;
width: 100%;
padding: .37em .4em;
padding-right: 44px;
font-size: 1.125em;
color: #222;
border: 1px solid #000;
border-radius: 4px;
background: white;
height: 38px;
background: linear-gradient(to left, #ffcd41 0, #ffcd41 21px, #484848 21px, white 22px);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
transition: border linear 0.2s, box-shadow linear 0.2s;
text-overflow: ellipsis;
option {
color: #222;
font-size: .9em;
padding: .2em;
&.default {
font-weight: 600;
color: black;
}
&.legacy {
color: #333;
}
}
optgroup {
&.legacy {
background: #eeeeee;
color: #333;
}
}
&[readonly] {
border-color: #bbb;
color: black;
background-color: #f7f7f7;
-webkit-appearance: none; // hide drop down arrow
}
&.ng-dirty {
color: black;
}
&[disabled]:not([readonly]) {
background: #E6E6E6;
opacity: 1;
}
}
.arrow-icon {
display: block;
position: absolute;
right: 1px;
top: 1px;
bottom: 1px;
width: 44px;
background: #ffcd41;
border-left: 1px solid #000;
pointer-events: none;
border-radius: 0 4px 4px 0;
padding-top: 7px;
padding-left: 11px;
font-size: 1.4em;
line-height: normal;
&:before {
font-family: "custom" !important;
content: "\71";
}
}
.select[disabled]:not([readonly])+.arrow-icon {
background-color: #E6E6E6;
}
.select:focus+.arrow-icon {
right: 2px;
top: 2px;
bottom: 2px;
width: 43px;
padding-top: 6px;
}
.select:focus-within {
box-shadow: inset 0 0 0 1px #000;
}
}
After more research I discovered the dispatchEvent() function.
This is my solution to my own question:
var driver = new ChromeDriver();
var js = (IJavaScriptExecutor)driver;
var select = baseDriver.FindElement(By.XPath("//select"));
string script = "const evt = new Event('input', {'bubbles':true, 'cancelable':true});" +
"arguments[0].dispatchEvent(evt);";
js.ExecuteScript(script, select);
Also, this still works (JavaScript portion):
const evt = document.createEvent("HTMLEvents");
evt.initEvent("input", true, true);
arguments[0].dispatchEvent(evt);
I hope someone finds this useful.
I have been looking everywhere and can't seem to find an answer so while this question may not contain a lot of code I was hoping that there was someone here with experience in subcomponents / Lit framework that could tell me how to unit test the components that you make.
Right now, I have the following element.
class SdkArticle extends LitElement {
static get properties() {
return {
data: {type: Object}
};
}
constructor() {
super();
this.data = {};
}
render() {
return html `
<style>
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
flex: ${100 / this.data.columnData.length}%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
h2{
padding-left: 10px;
}
</style>
<div>
<h2>${this.data.title}</h2>
</div>
<div class="row">
${this.data.columnData.map(
columData =>
html`
${this.generateHtml(columData)}
`,
)}
</div>
`;
}
//Based on the settings we generate the extra html depending on the columns
generateHtml(columnData) {
switch (columnData.dataType) {
case 'image':
if (columnData.addon != null) {
if (columnData.addon !== null && columnData.addon.type === 'link') {
return html `<div class="column"><img src=${columnData.imageSrc}></div><div><sdk-button link=${columnData.addon.href}>${columnData.addon.text}</sdk-button></div>`;
}
else {
return html `<div class="column"><img src=${columnData.imageSrc}></div>`;
}
}
else {
return html `<div class="column"><img src=${columnData.imageSrc}></div>`;
}
case 'text':
if (columnData.addon != null && columnData.addon.type === 'link') {
return html `<div class="column"><p>${columnData.text} </p><sdk-button link=${columnData.addon.href}>${columnData.addon.text}</sdk-button> </div>`;
} else {
return html `<div class="column"><p>${columnData.text} </p> </div>`;
}
}
}
}
customElements.define('sdk-article', SdkArticle);
What framework do I use to test this? And how can I write a test to test my component?
I'm working on a code typer, but for some reason the element becomes Null with no reason I can make out. I am new to Vue & know this code works as I've previously completed this at https://CodeSpent.dev (live preview) in Django/Python until I determined it'd be valuable to learn more front end frameworks.
So I believe it has something to do with how Vue handles rendering, but I'm only a few hours into learning & have no idea where to even look with this.
Here is the code:
var codeBlock = document.getElementById('code')
console.log(codeBlock)
setTimeout(() => {
new TypeIt(codeBlock, {
strings: [codeSample],
speed: 20
}).go();
}, 1000)
setInterval(function () {
const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
document.getElementById('real-code').innerHTML = code;
}, 10);
If we look at console we can see on line 23 where codeBlock is clearly not null, but then when we try to use it it becomes null. Anything stand out?
Full Component:
<template>
<div id="code-block" class="bb">
<pre class="code-pre">
<code id="real-code"></code>
</pre>
<div id="code" class="language-py"></div>
</div>
</template>
<script>
import 'prismjs'
import 'prismjs/themes/prism.css'
import TypeIt from 'typeit';
export default {
name: 'CodeTyper'
}
var codeSample = '\x0a\x3E\x3E\x20\x6E\x61\x6E\x6F\x20\x63\x6F\x64\x65\x73\x70\x65\x6E\x74\x2E\x70\x79\x0A\x66\x72\x6F\x6D\x20\x70\x79\x74\x68\x6F\x6E\x20\x69\x6D\x70\x6F\x72\x74\x20\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x0A\x66\x72\x6F\x6D\x20\x70\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x2E\x6D\x6F\x64\x65\x6C\x73\x20\x69\x6D\x70\x6F\x72\x74\x20\x50\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x0A\x0A\x63\x6C\x61\x73\x73\x20\x43\x6F\x64\x65\x53\x70\x65\x6E\x74\x28\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x29\x3A\x0A\x20\x20\x20\x20\x6E\x61\x6D\x65\x20\x3D\x20\x27\x50\x61\x74\x72\x69\x63\x6B\x20\x48\x61\x6E\x66\x6F\x72\x64\x27\x0A\x20\x20\x20\x20\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x20\x20\x3D\x20\x27\x50\x69\x74\x74\x73\x62\x75\x72\x67\x68\x2C\x20\x50\x41\x2C\x20\x55\x53\x27\x0A\x20\x20\x20\x20\x6C\x61\x6E\x67\x75\x61\x67\x65\x73\x20\x3D\x20\x5B\x27\x70\x79\x74\x68\x6F\x6E\x27\x2C\x20\x27\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x27\x2C\x20\x27\x63\x73\x73\x27\x2C\x27\x68\x74\x6D\x6C\x35\x27\x5D\x0A\x20\x20\x20\x20\x66\x61\x76\x6F\x72\x69\x74\x65\x73\x20\x3D\x20\x5B\x27\x64\x6A\x61\x6E\x67\x6F\x27\x2C\x20\x27\x74\x65\x6E\x73\x6F\x72\x66\x6C\x6F\x77\x27\x2C\x20\x27\x74\x77\x69\x74\x63\x68\x27\x2C\x20\x27\x64\x69\x73\x63\x6F\x72\x64\x27\x2C\x20\x27\x6F\x70\x65\x6E\x63\x76\x27\x5D\x0A\x0A\x20\x20\x20\x20\x64\x65\x66\x20\x5F\x5F\x73\x74\x72\x5F\x5F\x28\x73\x65\x6C\x66\x29\x3A\x0A\x20\x20\x20\x20\x20\x20\x72\x65\x74\x75\x72\x6E\x20\x73\x65\x6C\x66\x2E\x6E\x61\x6D\x65'
var codeBlock = document.getElementById('code')
console.log(codeBlock)
setTimeout(() => {
new TypeIt(codeBlock, {
strings: [codeSample],
speed: 20
}).go();
}, 1000)
setInterval(function () {
const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
document.getElementById('real-code').innerHTML = code;
}, 10);
</script>
<style>
#real-code {
color: #5c5edc;
}
#code-block {
background-color: #141D22;
color: #fff;
flex: 1;
height: 355px;
}
#code-block-sub {
background-color: rgb(34, 32, 35);
color: #fff;
width: 100%;
padding: 0 15px;
height: 150px;
}
#code,
#code-sub {
padding: 0px !important;
margin: 0px !important;
display: none;
color: #fff !important;
}
</style>
First a template that presents the partial string...
<template>
<div>
<pre>{{partialCode}}</pre>
<v-btn #click="startAppending()"></v-btn>
</div>
</template>
Then the partialCode string bound into data...
export default {
data () {
return {
partialCode: '',
// other data
}
},
You may want to start appending onCreate or some other lifecycle hook (or once you receive the code data asynchronously), but the key to the logic is that you can now just change the state of partialCode and let the DOM update itself...
methods: {
startAppending() {
this.partialCode = '' // start fresh each time
const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python')
let index = 0
let interval = setInterval(() => {
if (this.partialCode.length === code.length) {
clearInterval(interval)
} else {
this.partialCode = code.slice(0, index++)
}
}, 200);
},
// the other methods
}
In the Contentful CMS, I have two different content-types: BigCaseStudy and BigCaseStudySection. To get this content to appear in my Gatsby 2.x site, my thinking was:
Do query 1, which gets all the BigCaseStudy fields I want to display, and also contains the content's ID field as metadata.
Take that ID from query 1, match to a Contentful reference field (which contains an ID) in query 2
Do query 2, return all matching BigCaseStudySection fields
The end goal would be to display the original BigCaseStudy with all of the BigCaseStudySection (usually numbering between 3-5 of them). You can look at my queries to see the fields, there are bunch.
I think some combination of GraphQL variables and queries would get me there (maybe a mutation)? It's not clear and I haven't seen any complex examples of querying one set of stuff and then using the response to make another call, like chained promises or async/await in JS.
Any ideas on the right construction?
bigcasestudy.js component with GraphQL queries:
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import Layout from '../Layout/layout'
/**
* Hero Section
*/
const HeroContainer = styled.header`
align-items: center;
background-image: url(${ props => props.bgImgSrc });
background-position: center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 128px);
`
const HeroTitle = styled.h1`
color: #fff;
font-size: 70px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 15px;
`
const HeroSubtitle = styled.h2`
color: #fff;
font-size: 24px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
`
/**
* Intro Section
*/
const IntroBG = styled.section`
background-color: ${ props => props.theme.lightGray };
padding: 50px 0;
`
const IntroContainer = styled.div`
padding: 25px;
margin: 0 auto;
max-width: ${ props => props.theme.sm };
#media (min-width: ${ props => props.theme.sm }) {
padding: 50px 0;
}
`
const IntroTitle = styled.h2`
font-size: 50px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 45px;
text-align: center;
`
const IntroText = styled.p`
font-size: 22px;
line-spacing: 4;
text-align: center;
`
const IntroButton = styled.a`
background-color: #fff;
color: ${ props => props.theme.darkGray };
border: 1px solid ${ props => props.theme.mediumGray };
border-radius: 25px;
display: block;
font-size: 16px;
letter-spacing: 5px;
margin: 30px auto;
padding: 15px 45px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 300px;
`
// BigCaseStudy Component
class BigCaseStudy extends React.Component {
render() {
// Setup destructured references to each Contentful object passed in through the GraphQL call
const { caseStudyTitle } = this.props.data.contentfulBigCaseStudy
const { caseStudySubtitle } = this.props.data.contentfulBigCaseStudy
const { caseStudyIntroTitle } = this.props.data.contentfulBigCaseStudy
const { caseStudyIntro } = this.props.data.contentfulBigCaseStudy.caseStudyIntro
const { caseStudyLink } = this.props.data.contentfulBigCaseStudy
console.log(this)
return (
<Layout>
<HeroContainer
bgImgSrc={ this.props.data.contentfulBigCaseStudy.caseStudyHero.fixed.src }>
<HeroTitle>{ caseStudyTitle }</HeroTitle>
<HeroSubtitle>{ caseStudySubtitle }</HeroSubtitle>
</HeroContainer>
<IntroBG>
<IntroContainer>
<IntroTitle>{ caseStudyIntroTitle }</IntroTitle>
<IntroText>{ caseStudyIntro }</IntroText>
</IntroContainer>
<IntroButton href={ caseStudyLink } target="_blank" rel="noopener noreferrer">
Visit the site >
</IntroButton>
</IntroBG>
</Layout>
)
}
}
// Confirm data coming out of contentful call is an object
BigCaseStudy.propTypes = {
data: PropTypes.object.isRequired
}
// Export component
export default BigCaseStudy
// Do call for the page data
// This needs to mirror how you've set up the dynamic createPage function data in gatsby-node.js
export const BigCaseStudyQuery = graphql`
query BigCaseStudyQuery {
contentfulBigCaseStudy {
id
caseStudyTitle
caseStudySubtitle
caseStudyIntroTitle
caseStudyIntro {
caseStudyIntro
}
caseStudyLink
caseStudyHero {
fixed {
width
height
src
srcSet
}
}
},
contentfulBigCaseStudySection (id: $postId) {
title
order
images {
fixed {
width
height
src
srcSet
}
}
bigCaseStudyReference {
id
}
body {
body
}
stats {
stat1 {
word
number
}
stat2 {
word
number
}
stat3 {
word
number
}
stat4 {
word
number
}
}
id
}
}
`
gatsby-node.js file:
/**
* Implement Gatsby's Node APIs in this file.
*
* ######################################################
* BIG CASE STUDY BACKEND CODE
* ######################################################
*
* We are using the .createPages part of the Gatsby Node API: https://next.gatsbyjs.org/docs/node-apis/#createPages
* What this does is dynamically create pages (surprise) based on the data you feed into it
*
* Feed the contentful API call into the promise
* Here I'm calling BigCaseStudy, which is a custom content type set up in contentful
* This is briefly explained over here: https://www.gatsbyjs.org/packages/gatsby-source-contentful/
*
* Also, note the caseStudyIntro field is long text `markdown`
* Gatsby returns the long text field as an object
* Calling it's name inside of the object returns the HTML
* Read more here: https://github.com/gatsbyjs/gatsby/issues/3205
*/
// Set Gatsby path up to be used by .createPages
const path = require('path')
// Using Node's module export, Gatsby adds in a createPages factory
exports.createPages = ({ graphql, actions }) => {
// We setup the createPage function takes the data from the actions object
const { createPage } = actions
// Setup a promise to build pages from contentful data model for bigCaseStudies
return new Promise((resolve, reject) => {
// Setup destination component for the data
const bigCaseStudyComponent = path.resolve('src/components/BigCaseStudy/bigcasestudy.js')
resolve(
graphql(`
{
allContentfulBigCaseStudy {
edges {
node {
id
caseStudySlug
caseStudyTitle
caseStudySubtitle
caseStudyIntroTitle
caseStudyIntro {
caseStudyIntro
}
caseStudyLink
caseStudyHero {
fixed {
width
height
src
srcSet
}
}
}
}
}
allContentfulBigCaseStudySection {
edges {
node {
title
order
images {
fixed {
width
height
src
srcSet
}
}
bigCaseStudyReference {
id
}
body {
body
}
stats {
stat1 {
word
number
}
stat2 {
word
number
}
stat3 {
word
number
}
stat4 {
word
number
}
}
id
}
}
}
}
`).then((result) => {
// Now we loop over however many caseStudies Contentful sent back
result.data.allContentfulBigCaseStudy.edges.forEach((caseStudy) => {
const caseStudySections = result.data.allContentfulBigCaseStudySection.edges
let caseStudySectionMatches = caseStudySections.filter(
caseStudySection => caseStudySection.bigCaseStudyReference.id === caseStudy.id
)
createPage ({
path: `/work/${caseStudy.node.caseStudySlug}`,
component: bigCaseStudyComponent,
context: {
id: caseStudy.node.id,
slug: caseStudy.node.caseStudySlug,
title: caseStudy.node.caseStudyTitle,
subtitle: caseStudy.node.caseStudySubtitle,
hero: caseStudy.node.caseStudyHero,
introTitle: caseStudy.node.caseStudyIntroTitle,
intro: caseStudy.node.caseStudyIntro.caseStudyIntro,
link: caseStudy.node.caseStudyLink,
caseStudySection: caseStudySectionMatches.node
}
})
})
})
// This is the error handling for the calls
.catch((errors) => {
console.log(errors)
reject(errors)
})
) // close resolve handler
}) // close promise
}
I ran into this challenge too and couldn't find a good solution to accomplish that (although I wasn't using Contentful), but I did work past it and think I can help. You'll need to shift your thinking a bit.
Basically, GraphQL isn't really meant to query for the data you need to run another query. It's more of a 'ask for what you need' sort of tool. GraphQL wants to run a single query for exactly what you need.
The parameter you need for your query actually comes from your gatsby-node.js file. Specifically, the context property of createPages()(a Node API that gatsby makes available).
Is that enough to get you pointed in the right direction? If you need a bit more of a hand, then there are two things I need to know:
1. A little more context around what you're trying to accomplish. What is the specific data you want available to the end user?
2. What your gatsby-node.js file looks like.
Short answer: you don't do callbacks with GraphQL. You do one query that gets everything you need all at once.
Longer answer: I had to reconstruct how the gatsby-node.js file fetched Contentful content and then filtered through it. In Gatsby, you want to set up the queries in gatsby-node.js to go fetch everything from your data source because it's a static site generator. It's architecture brings all that data in and then parses it out accordingly.
The GraphQL query from my original question was fine. I changed .then() of the promise to use .filter() on my results, comparing the relationship field of the child nodes to the id of the parent nodes.
gatsby-node.js:
// Set Gatsby path up to be used by .createPages
const path = require('path')
// Using Node's module export, Gatsby adds in a createPages factory
exports.createPages = ({ graphql, actions }) => {
// We setup the createPage function takes the data from the actions object
const { createPage } = actions
// Setup a promise to build pages from contentful data model for bigCaseStudies
return new Promise((resolve, reject) => {
// Setup destination component for the data
const bigCaseStudyComponent = path.resolve('src/components/BigCaseStudy/bigcasestudy.js')
resolve(
graphql(`
{
allContentfulBigCaseStudy {
edges {
node {
id
caseStudySlug
caseStudyTitle
caseStudySubtitle
caseStudyIntroTitle
caseStudyIntro {
caseStudyIntro
}
caseStudyLink
caseStudyHero {
fixed {
width
height
src
srcSet
}
}
}
}
}
allContentfulBigCaseStudySection {
edges {
node {
title
order
images {
fixed {
width
height
src
srcSet
}
}
bigCaseStudyReference {
id
}
body {
body
}
stats {
stat1 {
word
number
}
stat2 {
word
number
}
stat3 {
word
number
}
stat4 {
word
number
}
}
id
}
}
}
}
`).then((result) => {
// Now we loop over however many caseStudies Contentful sent back
result.data.allContentfulBigCaseStudy.edges.forEach((caseStudy) => {
let matchedCaseStudySections = result.data.allContentfulBigCaseStudySection.edges.filter(
caseStudySection =>
caseStudySection.node.bigCaseStudyReference.id === caseStudy.node.id
)
createPage ({
path: `/work/${caseStudy.node.caseStudySlug}`,
component: bigCaseStudyComponent,
context: {
id: caseStudy.node.id,
slug: caseStudy.node.caseStudySlug,
title: caseStudy.node.caseStudyTitle,
subtitle: caseStudy.node.caseStudySubtitle,
hero: caseStudy.node.caseStudyHero,
introTitle: caseStudy.node.caseStudyIntroTitle,
intro: caseStudy.node.caseStudyIntro.caseStudyIntro,
link: caseStudy.node.caseStudyLink,
caseStudySection: matchedCaseStudySections.node
}
})
})
})
// This is the error handling for the calls
.catch((errors) => {
console.log(errors)
reject(errors)
})
) // close resolve handler
}) // close promise
}
Once you've set this up, the createPage part of Gatsby Node API sends the parent and all of it's nodes over to the component param you set.
Inside of my component, I can now make a GraphQL query for all children nodes. That now returns what I want and conforms to the idea that GraphQL makes one request instead of multiple like I was trying to do. The only tricky part is that you have to use .map() in the render part of the component to loop over all the child nodes sent back from Contentful.
bigcasestudy.js component:
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import Layout from '../Layout/layout'
/**
* Hero Section
*/
const HeroContainer = styled.header`
align-items: center;
background-image: url(${ props => props.bgImgSrc });
background-position: center center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 128px);
`
const HeroTitle = styled.h1`
color: #fff;
font-size: 70px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 15px;
`
const HeroSubtitle = styled.h2`
color: #fff;
font-size: 24px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
`
/**
* Intro Section
*/
const IntroBG = styled.section`
background-color: ${ props => props.theme.lightGray };
padding: 50px 0;
`
const IntroContainer = styled.div`
padding: 25px;
margin: 0 auto;
max-width: ${ props => props.theme.sm };
#media (min-width: ${ props => props.theme.sm }) {
padding: 50px 0;
}
`
const IntroTitle = styled.h2`
font-size: 50px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 45px;
text-align: center;
`
const IntroText = styled.p`
font-size: 22px;
line-spacing: 4;
text-align: center;
`
const IntroButton = styled.a`
background-color: #fff;
color: ${ props => props.theme.darkGray };
border: 1px solid ${ props => props.theme.mediumGray };
border-radius: 25px;
display: block;
font-size: 16px;
letter-spacing: 5px;
margin: 30px auto;
padding: 15px 45px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 300px;
`
// BigCaseStudy Component
class BigCaseStudy extends React.Component {
render() {
// Destructure Case Study Intro stuff
const {
caseStudyHero,
caseStudyIntro,
caseStudyIntroTitle,
caseStudyLink,
caseStudySubtitle,
caseStudyTitle
} = this.props.data.contentfulBigCaseStudy
// Setup references to Case Study Sections, destructure BigCaseStudySection object
const caseStudySections = this.props.data.allContentfulBigCaseStudySection.edges.map(
(currentSection) => {
return currentSection.node
}
)
// Case Study Section can be in any order, so we need to sort them out
const caseStudySectionsSorted = caseStudySections.sort( (firstItem, secondItem) => {
return firstItem.order > secondItem.order ? 1 : -1
})
console.log(caseStudySectionsSorted)
return (
<Layout>
<HeroContainer
bgImgSrc={ caseStudyHero.fixed.src }>
<HeroTitle>{ caseStudyTitle }</HeroTitle>
<HeroSubtitle>{ caseStudySubtitle }</HeroSubtitle>
</HeroContainer>
<IntroBG>
<IntroContainer>
<IntroTitle>{ caseStudyIntroTitle }</IntroTitle>
<IntroText>{ caseStudyIntro.caseStudyIntro }</IntroText>
</IntroContainer>
<IntroButton href={ caseStudyLink } target="_blank" rel="noopener noreferrer">
Visit the site >
</IntroButton>
</IntroBG>
{
caseStudySectionsSorted.map( (caseStudySection, index) => {
return <IntroTitle key={ index }>{ caseStudySection.title }</IntroTitle>
})
}
</Layout>
)
}
}
// Confirm data coming out of contentful call is an object
BigCaseStudy.propTypes = {
data: PropTypes.object.isRequired
}
// Export component
export default BigCaseStudy
// Do call for the page data
// This needs to mirror how you've set up the dynamic createPage function data in gatsby-node.js
export const BigCaseStudyQuery = graphql`
query BigCaseStudyQuery {
contentfulBigCaseStudy {
id
caseStudyTitle
caseStudySubtitle
caseStudyIntroTitle
caseStudyIntro {
caseStudyIntro
}
caseStudyLink
caseStudyHero {
fixed {
width
height
src
srcSet
}
}
}
allContentfulBigCaseStudySection {
edges {
node {
title
order
images {
fixed {
width
height
src
srcSet
}
}
bigCaseStudyReference {
id
}
body {
body
}
stats {
stat1 {
word
number
}
stat2 {
word
number
}
stat3 {
word
number
}
stat4 {
word
number
}
}
id
}
}
}
}
`
H/t: thanks to #taylor-krusen for rearranging how I was approaching this problem.
Got tired Firefox's ugly select and not being able to style it.
I thought I'd do one in React for learning purposes.
It seems to be easy to implement but I cannot figure out how to do onChange with custom component and how to get the value back with the event. If it is possible at all ...
The Select component looks like this:
type SelectProps = {
select: {
value: any
options: {
[k: string]: any
}
}
}
type SelectState = {
show: boolean
}
class Select extends Component<SelectProps, SelectState> {
constructor(props: SelectProps) {
super(props)
this.state = {
show: false
}
}
label = (v: any): string | undefined => {
for (var k in this.props.select.options) {
if (this.props.select.options[k] === v) return k
}
}
change = (i: number) => {
this.setState({ show: false })
this.props.select.value = this.props.select.options[this.keys[i]]
}
display = () => {
this.setState({ show: !this.state.show })
}
keys = Object.keys(this.props.select.options)
render() {
let { show } = this.state
let { options, value } = this.props.select
return (
<div className='select'>
<button onClick={this.display}>{this.label(value)}</button>
{!show ? null :
<ul>
{this.keys.map((e: string, i: number) => (
<li key={i} onClick={() => this.change(i)}>{e}</li>)
)}
</ul>
}
</div>
)
}
}
It works as expected. I can style it (hooray!).
I get the selected value from value parameter. I wondering though if I can get it with onChange event? So it behaves more like native select.
P.S.
This is styling of it (in stylus), in case it is needed
.select
display: inline-block
position: relative
background: white
button
border: .1rem solid black
min-width: 4rem
min-height: 1.3rem
ul
position: absolute
top: 100%
border: .1rem solid black
border-top: 0
z-index: 100
width: 100%
background: inherit
li
text-align: center
&:hover
cursor: pointer
background: grey
Thanks
As part of the props, pass in a change callback. In change, call the callback and pass in the new value:
type SelectProps = {
select: {
onChange: any, // change callback
value: any,
options: {
[k: string]: any
}
}
}
...
...
change = (i: number) => {
this.setState({ show: false })
this.props.select.value = this.props.select.options[this.keys[i]]
this.props.select.onChange(this.props.select.value); // call it
}
Then you can pass your change callback when outputting:
let s = {
value: '2',
options: {
'1' : 'one',
'2' : 'two'
},
onChange : function(val){
console.log("change to " + val);
}
};
return (
<Select select={s} />
);