We Keep Coding

how to arrange images according to date with blockwise in reactjs?

How to arrange the images according to date in blocks? It should show the images with particular date with block and date as header for each block.
import React from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import './App.css';
class App extends React.Component {
state = {
photoIndex: 0,
isOpen: false,
images: [
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg", mdate: "9 Jul 2019 3:56 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg", mdate: "9 Jul 2019 12:14 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg", mdate: "9 Jul 2019 12:14 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg", mdate: "9 Jul 2019 12:14 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg", mdate: "8 Jul 2019 4:49 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg", mdate: "8 Jul 2019 4:48 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg", mdate: "8 Jul 2019 4:47 pm"},
{path: "https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg", mdate: "1 Jul 2019 1:51 pm"}
]
}
renderImages = () => {
let photoIndex = -1;
const { images } = this.state;
return images.map(imageSrc => {
photoIndex++;
const privateKey = photoIndex;
return (
<MDBCol md="4" key={photoIndex}>
<p style={{marginBottom:"5px"}}> {imageSrc.mdate}</p>
<figure>
<img src={imageSrc.path} alt="Gallery" className="img-fluid" onClick={()=>
this.setState({ photoIndex: privateKey, isOpen: true })
}
/>
</figure>
</MDBCol>
);
})
}
render() {
return (
<MDBContainer className="mt-5">
<div className="mdb-lightbox no-margin">
<MDBRow>
{this.renderImages()}
</MDBRow>
</div>
</MDBContainer>
);
}
}
export default App;
The current output is:
Display images of the that particular date.Date as header and related images of that date it should display below to it.

Pass date range picker value to filter

I am using daterangepicker to select the start and the end date.
This is my JsFiddle example
The date is working and I can select the start and the end date.
<input type="text" class="date" ng-model="selectDate" />
But how can I pass the selectDate model to the filters so that only those events will be selected where selectDate will match the eventStartDateTime
$scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];
Any help or suggestion would be appreciated.
Thanks in advance

You can use the Angular.js directive for daterangepicker
Install it then add daterangepicker to your angular.module and initialize your variables:
var app = angular.module("myApp", ["daterangepicker"]);
app.controller("myCtrl", function($scope, $window) {
...
$scope.showFreeEvent = false;
$scope.selectDate = { date: { startDate: null, endDate: null } };
...
Then in your HTML add attribute date-range-picker to any input and bind it to model:
<input
date-range-picker
class="form-control date-picker"
type="text"
ng-model="selectDate.date"
/>
And to filter your events you can use moment().isBefore() and moment().isAfter():
if (!$scope.showFreeEvent) {
return true;
}
if (
$scope.selectDate.date.startDate.isAfter(el.eventStartDateTime) ||
$scope.selectDate.date.endDate.isBefore(el.eventStartDateTime)
) {
return false;
}
Demo: https://codesandbox.io/s/l29yqywx9m

add ng-onchange="filterfunction(dateModelInput)"
this will detect a change in your html,call your filter function. this will update your DOM.
make sure you include the filter into the html that needs the filtering.
<div>{{ctrl.data | filterResult }}</div>

window.open is not working in IE to download an event

I'm trying to create an ICS file on click of buttons inside each of my divs.
This works fine in Chrome and Firefox. However, it fails to work on IE.
What's wrong with the code in 'window.open'?
Also, how do I change the name of th file based on the event ID?
Here's the code
angular.module('myApp', []).controller('myCtrl', function($scope){
$scope.card = [{
Name: "New Year Celebration",
Description: "",
Venue: "",
StartDate: "Fri Dec 29 2017 23:30:00 GMT+0530",
EndDate: "Sat Dec 30 2017 00:30:00 GMT+0530",
EventID: "1"
}, {
Name: "25th Anniversary Celebration",
Description: "25th Anniversary Celebration of organization",
Venue: "Auditorium",
StartDate: "Wed May 31 2017 17:30:00 GMT+0530",
EndDate: "Wed May 31 2017 20:30:00 GMT+0530",
EventID: "2"
}, {
Name: "Annual Day",
Description: "",
Venue: "",
StartDate: "Fri Oct 13 2017 14:30:00 GMT+0530",
EndDate: "Fri Oct 13 2017 17:30:00 GMT+0530",
EventID: "3"
}];
$scope.add = function(eventObj) {
$scope.eventID= this.eventObj.EventID;
$scope.startDate= this.eventObj.StartDate;
$scope.endDate= this.eventObj.EndDate;
$scope.venue= this.eventObj.Venue;
$scope.subject= this.eventObj.Name;
$scope.result= this.eventObj.Description;
//console.log(this);
$scope.icsMSG = "BEGIN:VCALENDAR\nVERSION:2.0\nBEGIN:VEVENT\nDTSTART:" + $scope.startDate +"\nDTEND:" + $scope.endDate +"\nLOCATION:" + $scope.venue + "\nSUMMARY:" + $scope.subject + "\nDESCRIPTION:"+ $scope.result +"\nEND:VEVENT\nEND:VCALENDAR";
window.open("data:text/calendar;charset=utf8," + escape($scope.icsMSG),"_self");
};
});
.event {
height: 150px;
width: 250px;
border: 1px solid lightgrey;
background-color: skyblue;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="eventObj in card" class="event">
Subject: <span>{{eventObj.Name}}</span>
<br /><br />
Venue:<span>{{eventObj.Venue}}</span>
<br /><br />
Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
<br /><br />
<button ng-click="add(eventObj.EventID)">Add to Outlook</button>
</div>
</div>

Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements in IE.
The solution is to use navigator.msSaveBlob to generate the file and prompt the user to save it. Refer this answer
You could also use something like downloadify instead of data URLs (would work for IE as well) as mentioned here

Click on browser's back button doesn't work

My main component Portal.js is as follows :
class Portal extends React.Component {
render() {
const language = this.props.currentLanguage.default;
const allShowrooms = data.getAllLists();
return (
<div className="mainPortal">
<Navigation type="status" />
<Showrooms allLists={allShowrooms} language={language}/>
</div>
);
}
}
When this page loads allShowrooms is as follows:
allShowrooms = [
{
id: 1,
name: "All brands stock sale mei",
expires: "Sat Oktober 01 2016 15:58:59 GMT+0200",
type: "Fixed"
}, {
id: 2,
name: "List number Two",
expires: "Sat November 05 2016 23:59:59 GMT+0200",
type: "Fixed"
}, {
id: 3,
name: "List number Three",
expires: "Tue November 29 2016 23:59:59 GMT+0200",
type: "Unfixed"
}
]
When I click on one of the links in the navigation it goes to the new page. That works fine.
The problem is when I click on back in my browser, to go back to Portal. Then allShowrooms is changed to :
[
{
"id":3,
"name":"All brands stock sale mei",
"expires":"Sat Oktober 01 2016 15:58:59 GMT+0200",
"type":"Fixed"
},
{
"id":3,
"name":"List number Two",
"expires":"Sat November 05 2016 23:59:59 GMT+0200",
"type":"Fixed"
},
{
"id":3,
"name":"List number Three",
"expires":"Tue November 29 2016 23:59:59 GMT+0200",
"type":"Unfixed"
}
]
Thus, the ID for all lists inside allShowrooms is changed to 3. Why??
And then I have problem when I show photos, and the values in the circles, because I get those values via list id. I now, for all lists I have values of the list with id 3.
When I refresh the page, everything is ok.
Any advice?
Update
Data file (from where I get allShowroom = data.getAllLists())
let allLists = [
{
id: 1,
name: "All brands stock sale mei",
expires: "Sat Oktober 01 2016 15:58:59 GMT+0200",
type: "Fixed"
}, {
id: 2,
name: "List number Two",
expires: "Sat November 05 2016 23:59:59 GMT+0200",
type: "Fixed"
}, {
id: 3,
name: "List number Three",
expires: "Tue November 29 2016 23:59:59 GMT+0200",
type: "Unfixed"
}
];
export function getAllLists(){
return allLists;
}
UPDATE 2
Showrooms component is as follows :
render(){
const language = this.props.currentLanguage;
return (
<div>
{this.props.allLists.map( (list, i) => <View key={i} list={list} language={language}/>)}
</div>
)
}
And View component is as follows :
render (){
const list = this.props.list;
const url = list.id;
const remainingTime = this.props.remainingTime;
const language = this.props.language;
return (
<div className="block">
<div className="listName">{list.name}</div>
<div className="listBody">
<div className="counter"> {remainingTime.days} days {remainingTime).hours} : {remainingTime.minutes} : {remainingTime.seconds}</div>
<Circles language={language} list={list} />
<Status list={list}/>
</div>
<Link to={`/showroom/${url}/`}>{language.portal.openShowroom}</Link>
</div>
)
}
And then Circles component
render(){
let {list, language} = this.props;
const allCars = data.getAllCars(); //We get list of all cars
const cars = carData.getCarsInCurrentList(list.id, allCars); //We get all cars, but only from this list
const totalCarsInTheList = cars.length;
const statusTotalCars = data.getUserOnGoingStatus().filter(s => s.listID === list.id && s.userID === userInfo.getUserEmail()).length;
return (
<div className="circles-box">
<div className="circle-left">
<div className="circle-content">
<div className="circle-total-cars">{totalCarsInTheList}</div>
<div className="circle-subtitle">{language.portal.nrCars}</div>
</div>
</div>
<div className="circle-right">
<div className="circle-content">
<div className="circle-total-cars">{statusTotalCars}</div>
<div className="circle-subtitle">{language.portal.status}</div>
</div>
</div>
</div>
);
}

if data.getAllLists();is synchronous stuff you can do something like this. Avoid logic in your render, it has to be more pure as possible.
class Portal extends React.Component {
constructor (props, context) {
super(props, context);
this.allShowrooms = data.getAllLists();
this.language = props.currentLanguage.default;
}
render() {
return (
<div className="mainPortal">
<Navigation type="status" />
<Showrooms allLists={this.allShowrooms} language={this.language}/>
</div>
);
}
})

Unable to parse a JSON in jade

I am trying to parse a JSON object that comes in from mongodb but am unable to use it for some reason after parsing.
Here is the piece of javascript function that I am using
-function check(category) {
-var temp = JSON.stringify(category);
-return JSON.parse(temp);
-}
.row.wow.fadeInRight.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s')
.col-md-12
if(articles)
#client-feedbacks.owl-carousel.owl-theme
each article in articles
-var category = article.categories
.feedback-box
.client-image.hidden-xs
img(src=article._.image.fit(250,250), alt='article image')
// MESSAGE OF THE CLIENT
h6.article-title
a(href='/blog/post/' + article.slug, itemprop='url')!= article.title
br
.message!= article.content.brief
// CLIENT INFORMATION
.client
.quote.red-text
i.icon-fontawesome-webfont-294
.client-info
a.client-namea(href='/blog/post/' + article.slug, itemprop='url')!= prettyDate(article.publishedDate)
-var categories = check(category)
.client-company(itemtype="http://schema.org/BlogPosting") #{category[0].name}
Here is what the object looks like when i use json .stringify
{ updatedBy: 5498631c5cbfa2d03f4570e6,
updatedAt: Mon Feb 09 2015 00:30:48 GMT+0530 (IST),
createdBy: 5498631c5cbfa2d03f4570e6,
createdAt: Mon Feb 09 2015 00:30:48 GMT+0530 (IST),
key: 'mongoose',
name: 'Mongoose',
_id: 54d7b2601d88fc4f69d0e081,
__v: 0 },{ updatedBy: 5498631c5cbfa2d03f4570e6,
updatedAt: Mon Feb 09 2015 00:31:44 GMT+0530 (IST),
createdBy: 5498631c5cbfa2d03f4570e6,
createdAt: Mon Feb 09 2015 00:31:44 GMT+0530 (IST),
key: 'green-berrets',
name: 'Green Berrets',
_id: 54d7b298fe85a1c4698b2ec3,
__v: 0 }
I am confused on how to parse it as most of the things i tried did not work