So I'm trying to make the addition of project easier for me with a json data.
Basically I'm creating blocks of projects and each project comes with an image, however even when the id == to the name I gave the image, the image does not render. Is there is any option for that or should I just give up on json files ?
what I'm trying to re-do
What I'm actually getting
The reactjs code
import Pdata from "../../api/projects.json";
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
import { Component } from "react";
class Plist extends Component {
render() {
return (
<div
className="project-list"
data-aos="fade-right"
data-aos-duration="1200"
>
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={projectDetail.id} alt="" />
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
</div>
);
}
}
export default Plist;
The json data
[
{
"id": "p1",
"title": "Pole Anglais",
"date": "16/10/2019",
"desc": "This project was in association with Filip Zafirovski, my English teacher by the time who wanted students to get a source of inspiration by publishing articles and/or their work. It was my very first web project, and was kind of hard to pull off but I still enjoyed it.Since for the very first time i coded for a project and not myself.",
"tags": "Loads of crap"
},
{
"id": "p2",
"title": "Project I.Art",
"date": "3/07/2021",
"desc": "In France to go to college you have to get a diploma, which requires multiple exams to be validated. One of the subjects I had to do a presentation on was Art. I decided to create an idea around an Artificial Intelligence who would create art based on the likes and dislikes of the spectator. This panel is a website made for the occasion.",
"tags": "Html,Scss, & AOS librairie"
},
{
"id": "p3",
"title": "Hestia Real Estate",
"date": "18-26/10/2021",
"desc": "At the very start of my student life #hetic, They grouped student randomly to make a project. The subject of the project was to create an agency, a fake web-app and website that sells premium submarines to plus ultra rich people. For that project I designed the website of the agency, and the app for the complex.",
"tags": "Html & Scss"
},
{
"id": "p4",
"title": "EvL First Design",
"date": "30/10/2021",
"desc": "Before the design and dev of this portfolio, I had made a portfolio where I only putted my socials link. All of that because I had no idea of what to put on it. Even if I was satisfied with the first version it did not in any case represented the mood and emotion I wanted it to give. And so I gave birth to the actual design of the website on the 11/11/2021",
"tags": "Nextjs & Scss"
},
{
"id": "p5",
"title": "Kelly's Portfolio",
"date": "3/07/2021",
"desc": "Sometimes after arriving at my college, I met a freshly made friend who wanted to publish her portfolio. She knew how to design and do plenty others thing. To She didn't really like to code and was making her website with Wix. To which I proposed to remake her website by coding it myself.",
"tags": "VueJs & Scss"
},
{
"id": "p6",
"title": "EthLny V2",
"date": "11-12/11/2021",
"desc": "After doing the amazing portfolio of Kelly, I was kind of disappointed with my own. So I decided to remake a new design. Use a Random language, study the color psychology, searched a tagline. And TA-DA here it is, the website you're in right now is the result of 7 hours of researching, designing and coding and debugging.",
"tags": "ReactJs, Scss & AOS librairy"
}
]
Put your images into object, so keys would be ids from json,and values - URLs to your images. Right now you are just passing string like "p1" and "p5" into src. It is not equivalent to passing value of variable with name p1 or p5.
Fast way to create such object would be this:
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
let images = {
p1, p2, p3, p4, p5, p6
}
/**
It is same as let images = {p1: p1, p2: p2, p3: p3, p4: p4, p5: p5, p6: p6};
*/
Then, inside your component use id from JSON as a key:
<img src={images[projectDetail.id]} alt=""/>
This way you will get actual value of variable p1 (and others).
I think the image is rendering but it is just too small to see
try adding width and height.
<img style={{width: 200px, height: 200px}} src={projectDetail.id} alt="" />
I think this will solve your problem. instead of importing each image, either create a map that points P* to your image addresses or rename your images in a way that you can do this:
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={`../../img/Project/${projectDetail.id}.png`} alt="" /> // <====the change
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
you can also add an image prop to your json pointing to the right image, but the json might be out of your hands to change.
I'm trying to create a custom order for a page of angularjs filtered results to display a schedule of classes ordered by the day of the week. As in "Monday - class, Tuesday - class, Wednesday - class."
Right now, before filtering, the content displays in code position and after filtering, it displays by alphabetical (?) order.
The dropdown menu for "Days" also displays in alphabetical order rather than day of the week order.
My hope is to display the Days drop-down menu, the default results, and the sorted results in day of the week order.
<!-- Main Content --->
<body ng-app="app" class="container">
<div ng-controller="mainController">
<h1>Accelerate Education Sessions</h1>
<label>Track:</label>
<select class="filter" ng-model="selectedTrack" ng-options="track for track in tracks" class="form-control"> </select>
<label>Days:</label>
<select class="filter" ng-model="selectedYear" ng-options="year for year in years" class="form-control"></select>
<label>Role:</label>
<select class="filter" ng-model="selectedRole" ng-options="role for role in roles" class="form-control"></select>
<button class="filter-clear-button" ng-click="clearFilters()">Clear</button>
<table class="table">
<tbody>
<div ng-repeat="accelerate in accelerates | filter:{ track: selectedTrack, date:selectedYear, role:selectedRole}">
<div class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> | {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></div>
</div>
</tbody>
</table>
</div>
<div class="filter-form">
<ul class="filter-items" ng-repeat="accelerate in accelerates | filter:{ track:selectedTrack, date:selectedDate, name:selectedName}">
<li class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> | {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></li>
</ul>
</div>
</div>
and the JS is
(function(){
var app = angular.module("app", []);
app.controller("mainController", function($scope, accelerateData) {
$scope.accelerates = accelerateData.getAll();
$scope.roles = _.chain($scope.accelerates).pluck("role").uniq().sortBy().value();
$scope.tracks = _.chain($scope.accelerates).pluck("track").uniq().sortBy().value();
$scope.years = _.chain($scope.accelerates).pluck("date").uniq().sortBy().value();
$scope.clearFilters = function(){
$scope.selectedTrack = undefined;
$scope.selectedYear = undefined;
$scope.selectedRole = undefined;
};
});
app.factory("accelerateData", function(){
var accelerates = [
/** AMS360**/
{ track:"AMS360", name:"Words matter: Learn the Latest on eDocs, Text Setups and eForms",
role:"Administrators", skill:"Intermediate", date: 'Wednesday', time: '11:00 am - 12:00 pm', location:'Room 101', description:"We will be taking a look at eDoc delivery, connectivity, text setups and eForms. This session will be supplemented with continuing webinars offered by NetVU following conference." , instructors:'Joyce Sigler'},
{track:"AMS360", name:"All in the Family: How to Use AMS360 Data to Sort Out Acquisitions, Business Origin and Relationships",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '11:00 am - 12:00 pm', location:'Room 101',
description:"Releases 18r1 and 18r2 give us additional opportunities of how to classify our business, book commissions, set up relationships. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'},
{track:"AMS360", name:"You Say What? Learn How to Have Data Pushed to You through Alerts, Scheduled Reports and My Agency Reports",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '11:00 am - 12:00 pm', location:'Room 101',
description:" Mirror, mirror on the wall, let me see the beauty of it all. Letting your data come to you. Learn about Alerts, Scheduled Reports, My Agency Reports, WorkSmart Process Dashboard and Process Analytics. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'},
{
track:"AMS360", name:"Getting Cozy: Merging customers",
role:"Administrators", skill:"Intermediate", date: 'Tuesday', time: '1:00 pm - 2:00 pm', location:'Room 101',
description:" NEW with 18r2 - Let's talk about what happens when we can merge customers together. When two becomes one! This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:'Joyce Sigler'}
];
return {
getAll: function(){
return accelerates;
}
};
});
}());
This isn't a true answer, but it was a work-around that met our needs. I added the numerical date followed by a dash and then added the day of the week. Am I proud of this, no, but at least the project moved forward. If anyone knows of a true solution, please let me know!
(function(){
var app = angular.module("app", []);
app.controller("mainController", function($scope, accelerateData) {
$scope.accelerates = accelerateData.getAll();
$scope.roles = _.chain($scope.accelerates).pluck("role").uniq().sortBy().value();
$scope.tracks = _.chain($scope.accelerates).pluck("track").uniq().sortBy().value();
$scope.years = _.chain($scope.accelerates).pluck("date").uniq().sortBy().value();
$scope.clearFilters = function(){
$scope.selectedTrack = undefined;
$scope.selectedYear = undefined;
$scope.selectedRole = undefined;
};
});
/** All the Data **/
app.factory("accelerateData", function(){
var accelerates = [
{ track:"AMS360, VAP, ImageRight", name:"What's New with AMS360 and Vertafore Agency Platform", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Exhibit Hall B", description:"In this session, Vertafore leaders will review the latest releases of AMS360, and give you a peek into what's next for this amazing product.", instructors:"Sharmila Ray-Vertafore, Dave Acker-Vertafore" },
{ track:"Sagitta, ImageRight", name:"What's New - Sagitta", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom A", description:"In this session, Vertafore leaders will review the latest releases of Sagitta and give you a peek into what's next for this amazing product.", instructors:"Bruce Westman - Sagitta Product Manager - Vertafore" },
{ track:"AIM", name:"What's New in AIM & AIM Accounting", role:"All", skill:"Beginner", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom B", description:"Come and learn all that is new in AIM and AIM Accounting.", instructors:"Cameron Elisha (Vertafore), Neville Allen (Vertafore), Michele Clubb (Vertafore)" },
{ track:"QQCatalyst", name:"Welcome to Accelerate!", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 2:15 PM", location:"Jr Ballroom C", description:"Whether you're a QQCatalyst user attending Accelerate for the first time or just want an overview of the Executive Track presentations, this session will help you get the most out of your time with us and highlight important content where you can learn how to build a world-class agency.", instructors:"Rich Park-Vertafore" },
{ track:"BenefitPoint", name:"BP Product Roadmap", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"Jr Ballroom D", description:"Join us for a sneak peak at what Vertafore is working on right now for BenefitPoint!", instructors:"Michelle Lewis- Director Product Management-Vertafore" },
{ track:"Executive Management", name:"Leading Agency Evolution", role:"Senior Level/Executive", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-232/233", description:"Steve interviews Vertafore CEO Amy Zupon on a range of topics such as her vision for agency evolution, technology investment priorities and how Vertafore is responding.", instructors:"Amy Zupon, CEO, Vertafore; Steve Anderson" },
{ track:"Carrier Focus", name:"Getting and keeping your agents producing with Sircon", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-236", description:"Getting authorized to sell doesn't have to be a hassle. Learn how Sircon connected compliance provides simple ways for agents to get in, get licensed, and get selling.", instructors:"Patrick Masi" },
{ track:"Carrier Focus", name:"MythBusters – Unlocking the mysteries of the market", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"S-237/238", description:"What does $120 Billion of in-force policy data reveal about market trends? What can 6 million monthly rating transactions tell us about pricing? What can the appointments and other sales credentials of 1,000 carriers tell us about industry relationships? In this session, we share some myth busting insights we've learned by digging into the data of Vertafore products.", instructors:"TBD" },
{ track:"Carrier Focus", name:"Uncover price, product, and market opportunities with RiskMatch", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:00 PM - 3:00 PM", location:"W-260/261", description:"With a dataset of $120B of in-force policies, RiskMatch enables Insurers to identify market trends, assess alignment of execution with underwriting appetite and to create visibility into an opportunity set of business you don’t write today. With the launch of RiskMatch Market Insights, Vertafore is providing carriers with a unique view of the market that will help you turn data into growth and efficiency.", instructors:"John Mollica" },
{ track:"QQCatalyst", name:"What's New", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"2:15 PM - 3:00 PM", location:"Jr Ballroom C", description:"We're investing in QQCatalyst . . . come be among the first to see what we have in store for QQCatalyst this year!", instructors:"Justin Silverman-Vertafore" },
{ track:"ImageRight-AMS360/VAP-Sagitta-AIM", name:"What's New in ImageRight?", role:"Admin, End User", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Exhibit Hall B", description:"The Team at Vertafore has been hard at work. Gather around the campfire to see and hear all about the amazing new features in the latest release. Then while the fire is hot, stick around to see where the trail will take us next and provide input on which direction you would like it to go.", instructors:"Vijay Muniswamy-Sr. Product Manager-Vertafore, Steven Finch, VP Product Management, Deb Ward-Manager, Solutions Consulting" },
{ track:"AMS360/VAP", name:"Words matter: Learn the Latest on eDocs, Text Setups and eForms", role:"Administrators", skill:"Intermediate", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom A", description:"We will be taking a look at eDoc delivery, connectivity, text setups and eForms. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:"Joyce Sigler, Geoff Lynch-Vertafore" },
{ track:"AMS360/VAP", name:"AMS360 18R1 Release: Hear from Users How They Are Using These New Features", role:"Account Manager", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom B", description:"Join this group discussion about how fellow users have implemented and benefited from the newest features released with 18R1.", instructors:"Angela Painter-Angela Adams Consulting, Justin Silverman-Vertafore" },
{ track:"AMS360/VAP", name:"Financial Center Overview & Accounting Tips (RJE)", role:"Accounting", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom C", description:"This is where all the information flows! Come see how to keep track of unprinted checks or invoices. Check receipts that need to be deposited or Direct Bill Deposit Payments that haven't been fully processed. Cover Daily Process, track commissions, accounts current and Vendor Payables all in one place! There is so much here. Recommended for those studying for Accounting Certification.", instructors:"Janet Tuttle, Whitney Malone, Barb Wold-Vertafore" },
{ track:"AMS360/VAP", name:"What's New in Accounting", role:"Accounting", skill:"Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"Jr Ballroom D", description:"It's finally our turn! Come find out how much has been added to Accounting functionality in the 18R1 and 18R2 releases.", instructors:"Lorraine Plezia, Janice Pierson-Vertafore" },
{ track:"BenefitPoint", name:"Large Agency Round Table", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-206", description:"What factors are at play for large agencies when it comes to BP? What are some general considerations and best practices? Get ready for some small group discussions on large agency considerations including integration with other projects like Sagitta and ImageRight, state and regional differences, national conventions, training and much more!", instructors:"Victoria Jackson - Marsh & McLennan Agency, Deb Smith- HUB, Teddy Dimulous-Vertafore" },
{ track:"BenefitPoint", name:"Small Agency Round Table", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-207/208", description:"What factors are at play for small agencies when it comes to BenefitPoint? What are some general considerations and best practices? Get ready for some small group discussions on small agency considerations like training, system administration, using RTM, and more.", instructors:"Gary Bossert-VP Administration-Medical Mutual Group, Michael Arias-Senior Account Manager-JGS Insurance, Sharmila Ray-Vertafore" },
{ track:"Sagitta", name:"Booked and Loaded - Producer Payments", role:"Accounting;Admin", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-209", description:"How do you track your payments to producers? Are you manually tracking your producer payments? Find out how you can utilize the Producer Payable tools in Sagitta to automate the process. We will discuss adding default commission rates for your producers as well as utilization of the pol multi functionality for out of the ordinary commission splits.", instructors:"Ed Navalany - CFO - Szerlip & Company Inc., Allyne Miller - Operations Manager - Allen Lawrence & Associates, LLC, Kim Buck - Controller - Haylor Freyer & Coon Inc., Jennifer Salvini-Vertafore" },
{ track:"Sagitta", name:"Before and After the Fire - Security/Disaster Recovery", role:"Admin", skill:"Intermediate/Advanced", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"N-210", description:"Today’s risks to our business look very different than yesterday. Have you looked at your Security Incident Response, Disaster Recovery or Business Continuity plans recently? Find out how Password Reset and Security questions and help round out your strategy and hear from other agencies how they have evolved their systems and plans to keep our most critical applications servicing clients.", instructors:"Bill Henson -Director - Customer Success Technical Manager - Vertafore, Michelle Hoffert - Director of IT - Lanier Upshaw Inc" },
{ track:"QQCatalyst", name:"Building the future - how we're revolutionizing QQCatalyst", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:00 PM", location:"S-230/231", description:"Come to hear from our CEO on how QQCatalyst will lead the way in agency innovation by producing the next generation of salesroom, a full suite of APIs, commerical lines expansions, and beyond…", instructors:"Amy Zupon, CEO, Vertafore" },
{ track:"Executive Management", name:"How to Become A Top Performing Agency", role:"Senior Level/Executive", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-232/233", description:"Each year a small number of agencies earn the prestigious status of “Best Practices Agency,” and the resulting industry recognition and exclusive benefits. In this session, we’ll learn how you can achieve this level of performance by adopting Best Practice strategies developed from studying top agencies for 25 years.", instructors:"Tom Doran, Partner, Reagan Consulting" },
{ track:"Carrier Focus", name:"What can Artificial Intelligence & Machine Learning do for insurance distribution?", role:"All", skill:"", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-236", description:"It should come as no surprise to you that Artificial Intelligence and Machine Learning (AI/ML) are core technologies that are already transforming our industry, along with most others. What it AI/ML, and how significant a role will it play in our future? We are excited to share our thoughts on this topic, solicit your feedback on where you see AI/ML having positive impact today and discuss the best areas to apply AI/ML to solve key problems for the insurance industry.", instructors:"Greg Ingino"
},
{ track:"Carrier Focus", name:"Sign-on Once – Implementing ID Federation (VCF)", role:"All", skill:"All", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"S-237/238", description:"A major pain point for independent agents is managing the many login credentials they use daily to do business with their carrier partners. An easy and secure solution is a top need for both agents and carriers, and Vertafore has been listening. ID Federation has come a long way to addressing these needs, and has made great strides over this past year! We'll share the latest on how your Vertafore agents are enjoying working with federated carriers today, and what you can do to implement federation for your Vertafore agents.", instructors:"Dave Acker, Irv Kantar" },
{ track:"AIM", name:"AIM Document Designer Basics", role:"Administrator", skill:"Beginner", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"W-250", description:"This session will cover the basics of the document parameter and designer screens in order to provide foundational knowledge for creating simple to complex document templates.", instructors:"Danny Journeay (Specialty Insurance Mgrs), Kristi Newlin-Vertafore" },
{ track:"AIM", name:"Basic & Advanced AIM Accounting Security", role:"Accounting", skill:"Beginner", date:"5/21/19 - Tuesday", time:"3:15 PM - 4:15 PM", location:"W-251", description:"AIM Accounting has an enhanced security feature that allows you to establish access within each module. This session will review the default accounting security, enhanced security feature, and how to create security privileges.", instructors:"John Salmon (RT), Michele Clubb-Vertafore" },
{ track:"Executive Management-AMS360/VAP-Sagitta-QQCatalyst-ImageRight", name:"Leveraging RiskMatch: Your own crystal ball", role:"All", skill:"All", date:"5/22/19 - Wednesday", time:"3:30 PM - 4:30 PM", location:"W-264", description:"Learn what is driving revenue gains and losses. Visualize team work capacity. Explore revolutionary tools that look ahead to predict revenue changes. Use Risk Profile reports to identify white space and cross sell opportunities.", instructors:"Brent Rineck-CIO-ABD Insurance and Financial Services" },
{ track:"AMS360/VAP", name:"AMS360: Proposal Builder", role:"All", skill:"Intermediate", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Exhibit Hall B", description:"Vertafore is launching the new proposal builder tool for AMS360 and Sagitta customers. This modern and intuitive tool will allow your agency to more easily pull information from your management system into professional looking and customizable templates to present to customers and prospects. Come see a demo of this feature and learn more about how to get started using it.", instructors:"Justin Silverman-Vertafore" },
{ track:"AMS360/VAP", name:"Using Data for Daily Tasks: Learn How Target Lists and Form Letters Work to Streamline Communications", role:"Administrators", skill:"Intermediate", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Jr Ballroom A", description:"Let's look at the daily tasks that gibe you the ability to look at your data and let the system do the heavy lifting. This session will be supplemented with continuing webinars offered by NetVU following conference.", instructors:"Joyce Sigler, Geoff Lynch-Vertafore" },
{ track:"AMS360/VAP", name:"What's In The Batters Box: See What's Next with Renewal Tool and Expiring Source", role:"Account Manager", skill:"Basic", date:"5/23/19 - Thursday", time:"8:30 AM - 9:30 AM", location:"Jr Ballroom B", description:"A comprehensive review of the Renewal Tool and Expiring Source.", instructors:"TBA, Marti Fox, Barbara Wold-Vertafore" },
{ track:"BenefitPoint", name:"Day 3 Q & A", role:"All", skill:"All", date:"5/23/19 - Thursday", time:"11:00 AM - 12:00 PM", location:"W-263", description:"After a day of learning let's end the day with a panel discussion. Join the conversation to share what you learned, ask questions that you haven't gotten answered, and share your ideas with the development team about how you want to see BenefitPoint grow and change in the future.", instructors:"Chris Walters, Mindy Day, Michelle Lewis, Gary Bossert, Angela Minutaglio, Tony Franza" }
];
return {
getAll: function(){
return accelerates;
}
};
});
}());
html,body {
margin: 0;
padding: 20px;
font-family:Verdana, sans-serif;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
font-family:Verdana, sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.filter-form {
height: 300px;
width:100%;
}
.filter-item {
background: #fff;
min-height: 30px;
padding: 5px 10px;
color: #333;
border-bottom: solid 1px #ed601a;
width: 100%;
}
.filter-options {
display: flex;
margin-bottom: 20px;
}
.filter-option {
margin: 0 10px;
}
label, select, .filter-clear-button {
margin-left: 10px;
padding:10px;
float:left;
}
select .filter{
max-width:20%;
}
.filter-item h4{
font-weight:bold;
}
/* Education Sessions */
.ed-session {
width: 100%;
min-height: 150px;
margin: 5px;
padding:10px;
float: left;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
border-bottom: 2px #ed601a solid;
}
.ed-session:hover{
-ms-transform: scale(1.02); /* IE 9 */
-webkit-transform: scale(1.02); /* Safari 3-8 */
transform: scale(1.02);
/* background-color:#333;
color:#fff;
font-size:15px;*/
}
.session-title{
font-weight: 800;
font-size:18px;
margin-bottom:5px;
}
.track-system{
color:#ed601a;
}
.desc {
margin:10px 0px;
font-size: 15px;
transition: all 0.4s ease-in-out 0s;
}
.specifics{
font-size:14px;
border-left: 2px solid #ddd;
/*margin-left: 25px;*/
padding:5px;
}
.small-text{
/* font-weight:bold;*/
color:#808080;
border-right: 2px solid #ddd;
margin-right:5px;
/*background-color:#ccc;*/
}
#media (max-width: 500px) {
select{
width:100%;
float:right;
}
label{
width:100%;
margin:0px auto;
text-align:left;
}
}
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="lodash.js#*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<!-- Main Content --->
<body ng-app="app" class="container">
<div ng-controller="mainController">
<h1>Accelerate Education Sessions</h1>
<label>Track:</label>
<select class="filter" ng-model="selectedTrack" ng-options="track for track in tracks" class="form-control"> </select>
<label>Date:</label>
<select class="filter" ng-model="selectedYear" ng-options="year for year in years | orderBy:'date'" class="form-control"></select>
<label>Role:</label>
<select class="filter" ng-model="selectedRole" ng-options="role for role in roles" class="form-control"></select>
<button class="filter-clear-button" ng-click="clearFilters()">Clear</button>
<table class="table">
<tbody>
<div ng-repeat="accelerate in accelerates | orderBy : 'date' | filter:{ track: selectedTrack, date:selectedYear, role:selectedRole}">
<div class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
Date: <b>{{accelerate.date }} </b>| {{accelerate.time }}</b> | Room:{{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></div>
</div>
</tbody>
</table>
</div>
<div class="filter-form">
<ul class="filter-items" ng-repeat="accelerate in accelerates | filter:{ track:selectedTrack, date:selectedDate, name:selectedName}">
<li class="filter-item ed-session"><h4 class="session-title">{{ accelerate.name }}</h4>
<div class="specifics"> <b class="track-system">{{accelerate.track }}</b><br/>
Role: <b>{{accelerate.role }}</b> | Skill Level: <b>{{accelerate.skill }}</b><br/>
{{accelerate.date }} | {{accelerate.time }}</b> {{accelerate.location }} </div>
<p class="desc"><span class="small-text">Description </span> {{accelerate.description}} — Instructor(s): <em>{{accelerate.instructors}}</em></p></li>
</ul>
</div>
</div>
</body>
</html>
Using fetchMock I want to make sure that the React component will display news stories from an external API. These tests were passing until I updated React from 15.4.2 to 16.4.2 and Enzyme from 2.9.1 to 3.7.0.
Issue is that when I run yarn run test it tells me that Error: Method “props” is only meant to be run on a single node. 0 found instead.
Putting a debugger and running wrapper.children().debug() displays the HTML without any of the news articles from fetch. However, wrapper.html() displays all the articles, which is exactly what I want. How can I run tests so that it's testing the contents in wrapper.html() not wrapper.children().debug()?
Spec file:
import News from '../../app/javascript/react/components/DailyUpdate/News'
import fetchMock from 'fetch-mock'
describe('News fetch news', () => {
let wrapper;
let newsData;
beforeEach(() => {
newsData = {
"status": "ok",
"totalResults": 5,
"articles": [
{
"source": {
"id": null,
"name": "Androidheadlines.com"
},
"author": null,
"title": "Valve's Upcoming VR Headset Leaks In Full",
"description": null,
"url": "https://www.androidheadlines.com/2018/11/valve-upcoming-vr-headset-leak.html",
"urlToImage": null,
"publishedAt": "2018-11-12T16:51:05Z",
"content": null
},
{
"source": {
"id": null,
"name": "Appleinsider.com"
},
"author": "AppleInsider",
"title": "iPhone XR sales estimates slashed by Ming-Chi Kuo, as trade war headwinds swirl",
"description": "Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v…",
"url": "https://appleinsider.com/articles/18/11/12/iphone-xr-sales-estimates-slashed-by-ming-chi-kuo-similar-to-his-iphone-x-prognostications",
"urlToImage": "https://apple.insidercdn.com/gallery/28487-44424-28273-43866-iPhone-XR-Hero-l-xl.jpg",
"publishedAt": "2018-11-12T16:14:01Z",
"content": "Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v… [+2568 chars]"
},
{
"source": {
"id": "business-insider",
"name": "Business Insider"
},
"author": "Steven John",
"title": "The best smartphone chargers you can buy",
"description": "There are lots of ways to charge your phone now, so we've rounded up the best phone chargers, including wireless, fast, car chargers, and more.",
"url": "http://uk.businessinsider.com/best-phone-charger",
"urlToImage": "https://amp.businessinsider.com/images/5be5eb4c38150718db7fce86-960-480.jpg",
"publishedAt": "2018-11-12T15:23:00Z",
"content": "Why you'll love it: The Aukey Dual Port USB-C and USB Wall Charger works with all three common charging cables — the Lightning Cable, the Micro USB, and the USB-C. Whether you need to power up an iPhone 8 Plus, a Microsoft Surface tablet, a 12-inch MacBook, o… [+1578 chars]"
},
{
"source": {
"id": null,
"name": "Cnet.com"
},
"author": "Andrew Krok",
"title": "Jaguar's one-off F-Type rally car is the gnarliest kind of homage",
"description": "This new dirt-pounder pays respect to the XK 120, itself a rally champ.",
"url": "https://www.cnet.com/roadshow/news/jaguar-f-type-convertible-rally-car/",
"urlToImage": "https://cnet4.cbsistatic.com/img/ntGwUbgZurzemPwiRfsU190qH-I=/2018/11/12/f4310247-66ff-45b4-93e8-d6ad75b30b81/jaguar-f-type-rally-ogi.jpg",
"publishedAt": "2018-11-12T15:07:48Z",
"content": "The Jaguar F-Type exudes effortless cool, but you know what would make it even better? Jaguar knows the answer -- turning it into a rally car, of course. Jaguar on Monday unveiled the F-Type rally car. Now, these won't be going into service anywhere, as they'… [+1361 chars]"
},
{
"source": {
"id": null,
"name": "Macworld.com"
},
"author": "",
"title": "13-inch MacBook Pro SSD service program FAQ: Everything you need to know",
"description": "Apple has launched an SSD repair program for the 13-inch non-Touch Bar MacBook Pro. Here's everything you need to know.",
"url": "https://www.macworld.com/article/3320456/macs/13-inch-macbook-pro-ssd-service-program-faq.html",
"urlToImage": "https://images.idgesg.net/images/article/2018/07/13in-macbook-pro-no-touchbar-2018-100765203-large.jpg",
"publishedAt": "2018-11-12T15:07:22Z",
"content": "Despite Apple’s push to turn all Mac professionals into Touch Bar devotees, the 13-inch MacBook Pro with a traditional row of function keys has remained quite popular. If you own one, you might be able to take advantage of a new SSD service program. Here’s ev… [+2698 chars]"
},
]
}
fetchMock.get('/api/v1/news', {
status: 200,
body: newsData
});
wrapper = mount(
<News />
)
})
afterEach(fetchMock.restore)
describe('News', () => {
it('renders the news with images.', (done) => {
console.log(3,wrapper);
setTimeout(() => {
expect(wrapper.find('.news-card').length).toEqual(4);
expect(wrapper.find('.news-image').length).toEqual(4);
let images = wrapper.find('.news-image')
expect(images.at(0).props().src).toEqual(newsData.articles[1].urlToImage)
expect(images.at(1).props().src).toEqual(newsData.articles[2].urlToImage)
expect(images.at(2).props().src).toEqual(newsData.articles[3].urlToImage)
expect(images.at(3).props().src).toEqual(newsData.articles[4].urlToImage)
let titles = wrapper.find('.news-title > a')
expect(titles.at(0).props().href).toEqual(newsData.articles[1].url)
expect(titles.at(1).props().href).toEqual(newsData.articles[2].url)
expect(titles.at(2).props().href).toEqual(newsData.articles[3].url)
expect(titles.at(3).props().href).toEqual(newsData.articles[4].url)
titles = wrapper.find('.news-title')
expect(titles.at(0).text()).toEqual(newsData.articles[1].title)
expect(titles.at(1).text()).toEqual(newsData.articles[2].title)
expect(titles.at(2).text()).toEqual(newsData.articles[3].title)
expect(titles.at(3).text()).toEqual(newsData.articles[4].title)
let descriptions = wrapper.find('p.news-description')
expect(descriptions.at(0).text()).toEqual(newsData.articles[1].description)
expect(descriptions.at(1).text()).toEqual(newsData.articles[2].description)
expect(descriptions.at(2).text()).toEqual(newsData.articles[3].description)
expect(descriptions.at(3).text()).toEqual(newsData.articles[4].description)
done()
})
})
})
})
Following is returned with wrapper.children().debug().
"<div className="grid-x grid-margin-x grid-margin-y news">
<h1 className="cell small-24 news-header">
News
</h1>
</div>"
Following is returned with wrapper.html().
"<div class="grid-x grid-margin-x grid-margin-y news">
<h1 class="cell small-24 news-header">News</h1>
<div class="cell small-24 large-12 news-card ">
<div class="news-image-container">
<img class="news-image" src="https://apple.insidercdn.com/gallery/28487-44424-28273-43866-iPhone-XR-Hero-l-xl.jpg">
</div>
<h3 class="news-title">
<a href="https://appleinsider.com/articles/18/11/12/iphone-xr-sales-estimates-slashed-by-ming-chi-kuo-similar-to-his-iphone-x-prognostications">
iPhone XR sales estimates slashed by Ming-Chi Kuo, as trade war headwinds swirl
</a>
</h3>
<p class="news-description">Ming-Chi Kuo has cut expectations for sales of the iPhone XR for the next year by 30 percent to 70 million, based on a possibility of a trade war with China, and other factors possibly weighing on sales, very similar to his erroneous predictions of iPhone X v…</p>
</div>
<div class="cell small-24 large-12 news-card ">
<div class="news-image-container">
<img class="news-image" src="https://amp.businessinsider.com/images/5be5eb4c38150718db7fce86-960-480.jpg">
</div>
<h3 class="news-title">
<a href="http://uk.businessinsider.com/best-phone-charger">
The best smartphone chargers you can buy
</a>
</h3>
<p class="news-description">There are lots of ways to charge your phone now, so we've rounded up the best phone chargers, including wireless, fast, car chargers, and more.</p>
</div>
<div class="cell small-24 large-12 news-card ">
<div class="news-image-container">
<img class="news-image" src="https://cnet4.cbsistatic.com/img/ntGwUbgZurzemPwiRfsU190qH-I=/2018/11/12/f4310247-66ff-45b4-93e8-d6ad75b30b81/jaguar-f-type-rally-ogi.jpg">
</div>
<h3 class="news-title">
<a href="https://www.cnet.com/roadshow/news/jaguar-f-type-convertible-rally-car/">
Jaguar's one-off F-Type rally car is the gnarliest kind of homage
</a>
</h3>
<p class="news-description">This new dirt-pounder pays respect to the XK 120, itself a rally champ.</p>
</div>
<div class="cell small-24 large-12 news-card ">
<div class="news-image-container">
<img class="news-image" src="https://images.idgesg.net/images/article/2018/07/13in-macbook-pro-no-touchbar-2018-100765203-large.jpg">
</div>
<h3 class="news-title">
<a href="https://www.macworld.com/article/3320456/macs/13-inch-macbook-pro-ssd-service-program-faq.html">
13-inch MacBook Pro SSD service program FAQ: Everything you need to know
</a>
</h3>
<p class="news-description">
Apple has launched an SSD repair program for the 13-inch non-Touch Bar MacBook Pro. Here's everything you need to know.
</p>
</div>
</div>"
News React Component
import React, { Component } from 'react';
class News extends Component {
constructor(props) {
super(props);
this.state = {
news: []
};
this.fetchNews = this.fetchNews.bind(this)
}
fetchNews() {
let weatherURL = `/api/v1/news`;
fetch(weatherURL)
.then(response => {
if (response.ok) {
return response;
} else {
let errorMessage = `${response.status} (${response.statusText})`,
error = new Error(errorMessage);
throw(error);
}
})
.then(response => response.json())
.then(data => {
this.setState({
news: data.articles
})
})
.catch(error => console.error(`Error in fetch: ${error.message}`));
}
componentDidMount(){
this.fetchNews()
}
render(){
let newsWithImage = []
let newsWithoutImage = []
this.state.news.forEach(news => {
if(news.urlToImage){
newsWithImage.push(news)
}else{
newsWithoutImage.push(news)
}
})
let news = newsWithImage.map(news => {
return(
<div key={news.title} className="cell small-24 large-12 news-card ">
<div className="news-image-container">
<img className="news-image" src={news.urlToImage} />
</div>
<h3 className="news-title"><a href={news.url}>{news.title}</a></h3>
<p className="news-description">{news.description}</p>
</div>
)
})
return(
<div className="grid-x grid-margin-x grid-margin-y news">
<h1 className="cell small-24 news-header">News</h1>
{news}
</div>
)
}
}
export default News