From f113808010cfbc6e58fe58b581f1938aca9fcab3 Mon Sep 17 00:00:00 2001 From: Athithiyan <30665279+Athithiyan@users.noreply.github.com> Date: Sun, 26 May 2019 15:27:36 +0530 Subject: [PATCH] Add files via upload Tried Pagination --- App.css | 21 ++- App.js | 416 ++++++++++++++++++++++++++++++++++++++------------------ 2 files changed, 305 insertions(+), 132 deletions(-) diff --git a/App.css b/App.css index 7d6cea0..b19d7ca 100644 --- a/App.css +++ b/App.css @@ -92,4 +92,23 @@ html, body{ color: #5e6871; margin-left: 14px; margin-top: 1em; -} \ No newline at end of file +} + +#page-numbers{ + padding: 1% 50%; + cursor:pointer; + display:inline-block +} +.pagination li{ + color: black; + float: left; + padding: 8px 16px; + text-decoration: none; + transition: background-color .3s; + border: 1px solid #ddd; + margin: 0 4px; + color: black; + border: 1px solid #5e6871; +} + +.pagination li:hover:not(.active) {background-color: #5e6871;} \ No newline at end of file diff --git a/App.js b/App.js index b7c8dc0..65781cc 100644 --- a/App.js +++ b/App.js @@ -5,137 +5,291 @@ import './App.css'; // const pstyle={ // top:'16px' // } -function App() { - return ( -
-
-
-
-
-
- - -
+ +export default class App extends React.Component { + + constructor(props) { + super(props); + this.state = { + availableItems: [ + { id: 1, name: 'course.jpg', text: 'This is a sample text.' }, + { id: 2, name: 'course2.jpg', text: 'This is a sample text.' }, + { id: 3, name: 'course3.jpg', text: 'This is a sample text.' }, + { id: 4, name: 'course4.jpg', text: 'This is a sample text.' }, + { id: 5, name: 'course5.jpg', text: 'This is a sample text.' }, + { id: 6, name: 'course6.jpg', text: 'This is a sample text.' }, + { id: 7, name: 'course7.jpg', text: 'This is a sample text.' }, + { id: 8, name: 'course8.jpg', text: 'This is a sample text.' }, + { id: 9, name: 'course9.jpg', text: 'This is a sample text.' }, + { id: 10, name: 'course10.jpg', text: 'This is a sample text.' }, + { id: 11, name: 'course11.jpg', text: 'This is a sample text.' }, + { id: 12, name: 'course12.jpg', text: 'This is a sample text.' }, + { id: 13, name: 'course13.jpg', text: 'This is a sample text.' }, + { id: 14, name: 'course14.jpg', text: 'This is a sample text.' }, + { id: 15, name: 'course15.jpg', text: 'This is a sample text.' }, + { id: 16, name: 'course16 .jpg', text: 'This is a sample text.' }, + { id: 17, name: 'video.gif', text: 'This is a sample text.' }, + { id: 18, name: 'video2.gif', text: 'This is a sample text.' }, + { id: 19, name: 'video3.gif', text: 'This is a sample text.' }, + { id: 20, name: 'video4.gif', text: 'This is a sample text.' }, + { id: 21, name: 'video5.gif', text: 'This is a sample text.' }, + { id: 22, name: 'video6.gif', text: 'This is a sample text.' }, + { id: 23, name: 'video7.gif', text: 'This is a sample text.' }, + { id: 24, name: 'video8.gif', text: 'This is a sample text.' }, + { id: 25, name: 'video9.gif', text: 'This is a sample text.' }, + { id: 26, name: 'video10.gif', text: 'This is a sample text.' }, + { id: 27, name: 'video11.gif', text: 'This is a sample text.' }, + { id: 28, name: 'video12.gif', text: 'This is a sample text.' }, + { id: 29, name: 'course17.jpg', text: 'This is a sample text.' }, + { id: 30, name: 'course18.jpg', text: 'This is a sample text.' }, + { id: 31, name: 'course19.jpg', text: 'This is a sample text.' }, + { id: 32, name: 'course20.jpg', text: 'This is a sample text.' }, + { id: 33, name: 'course21.jpg', text: 'This is a sample text.' }, + { id: 34, name: 'course22 .jpg', text: 'This is a sample text.' }, + { id: 35, name: 'video13.gif', text: 'This is a sample text.' }, + { id: 36, name: 'video14.gif', text: 'This is a sample text.' }, + { id: 37, name: 'video15.gif', text: 'This is a sample text.' }, + { id: 38, name: 'video16.gif', text: 'This is a sample text.' }, + { id: 39, name: 'video17.gif', text: 'This is a sample text.' }, + { id: 40, name: 'video18.gif', text: 'This is a sample text.' }, + { id: 41, name: 'video19.gif', text: 'This is a sample text.' }, + { id: 42, name: 'video20.gif', text: 'This is a sample text.' }, + { id: 43, name: 'video21.gif', text: 'This is a sample text.' }, + { id: 44, name: 'video22.gif', text: 'This is a sample text.' }, + { id: 45, name: 'video23.gif', text: 'This is a sample text.' }, + { id: 46, name: 'video24.gif', text: 'This is a sample text.' } + ], + items: [], + currentPage : 1, + itemsPerPage : 18, + //availableVideoItems: [ + // { id: 1, name: 'video.gif', text: 'This is a sample text.' }, + // { id: 2, name: 'video2.gif', text: 'This is a sample text.' }, + // { id: 3, name: 'video3.gif', text: 'This is a sample text.' }, + // { id: 4, name: 'video4.gif', text: 'This is a sample text.' }, + // { id: 5, name: 'video5.gif', text: 'This is a sample text.' }, + // { id: 6, name: 'video.gif', text: 'This is a sample text.' } + //], + //videoItems: [] + } + this.pagination = this.pagination.bind(this); + this.doSearchFilter = this.doSearchFilter.bind(this); + + } + + componentWillMount(){ + this.setState({ + ...this.state, + items: this.state.availableItems, + //videoItems: this.state.availableVideoItems + }); + } + + doSearchFilter = (event) => { + console.log('Event : ', event.target.value); + this.setState({ + ...this.state, + items: this.state.availableItems.filter(ai => + ai.name.toLowerCase().includes(event.target.value.toLowerCase())) + //videoItems: this.state.availableVideoItems.filter(avi => + // avi.name.toLowerCase().includes(event.target.value.toLowerCase())) + }); + } + + pagination(event){ + console.log("Pagination : event - ",event); + console.log("Pagination : event.target.id - ",event.target.id); + this.setState({ + currentPage: Number(event.target.id) + }); + } + + render() { + const {items, currentPage, itemsPerPage} = this.state; + const lastItem = currentPage * itemsPerPage; + const firstItem = lastItem - itemsPerPage; + const currentItemsDisplay = items.slice(firstItem, lastItem); + + const renderItems = currentItemsDisplay.map((item, index) => { + return ( +
+
+
{item.text}
+
{item.name}
+
+
+ ) + }); + + const pageNumbers = []; + for(let i =1; i <= Math.ceil(items.length / itemsPerPage);i++){ + pageNumbers.push(i); + } + + const renderPageNumbers = pageNumbers.map(pageNum => { + return ( +
  • {pageNum}
    • + ) + }); + + return ( +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    + {renderItems} +
    +
    +
      + {renderPageNumbers} +
    +
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    Quiz title
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    untitled quiz
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    -
    -
    untitled quiz
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    Quiz title
    -
    -
    -
    -
    -
    -
    Hello World!
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    Quiz title
    -
    -
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    Quiz title
    -
    -
    -
    -
    -
    -
    course.jpg
    -
    -
    -
    -
    -
    -
    Quiz title
    -
    -
    -
    -
    -
    -
    RecordRTC
    -
    -
    -
    -
    -
    -
    RecordRTC
    -
    -
    -
    -
    -
    - ); -} + ); + } + } + +// function App() { +// return ( +//
    +//
    +//
    +//
    +//
    +//
    +// +// +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    Quiz title
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    untitled quiz
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    untitled quiz
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    Quiz title
    +//
    +//
    +//
    +//
    +//
    +//
    Hello World!
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    Quiz title
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    Quiz title
    +//
    +//
    +//
    +//
    +//
    +//
    course.jpg
    +//
    +//
    +//
    +//
    +//
    +//
    Quiz title
    +//
    +//
    +//
    +//
    +//
    +//
    RecordRTC
    +//
    +//
    +//
    +//
    +//
    +//
    RecordRTC
    +//
    +//
    +//
    +//
    +//
    +// ); +// } -export default App; +// export default App;