Skip to content

added feed URL #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rameshkumarmk wants to merge 4 commits into
base: main
Choose a base branch
from
Open

added feed URL #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4795fe4
cursor based scroll
rameshbabloo Sep 17, 2022
bce11ca
added feed URL
rameshbabloo Sep 27, 2022
184a6a1
final
rameshbabloo Sep 27, 2022
c94c5f2
Merge branch 'testbranch' of https://github.com/rameshkumarmk/infinit…
rameshbabloo Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions db.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
"email": "பிரதமர் மோடி",
"body": "பிரதமர் மோடி ஜப்பானின் பிரதமர் கிஷிடாவை சந்தித்தார்"
},
{
"postId": 1,
Expand Down
35 changes: 29 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<title>React App</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Noto+Sans:400,400i,700,700i" rel="stylesheet" /><link href="https://fonts.googleapis.com/earlyaccess/notosanstamil.css" rel="stylesheet" type="text/css" />
<title>Dinamalar Infinite Scroll App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
23 changes: 23 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
body{ font-family: 'Noto Sans Tamil', Roboto, sans-serif;}
.App {
text-align: center;
}
Expand All @@ -24,9 +25,31 @@
color: white;
}

.title a {
color: #3a3b39;
text-decoration: none;
}
.card-text{ color: #555;}

.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.mt-2{ margin:0; padding: .5em 0; border-bottom: #ccc solid 1px; color: #555;}
.title {
margin: 0;
font-size: 1.5rem;
text-decoration: none;
line-height: 1.4;
color: #3a3b39;
}


.App-link {
color: #61dafb;
}
.imgfit{ width: 100%; margin-bottom: .5em;}

@keyframes App-logo-spin {
from {
Expand Down
11 changes: 8 additions & 3 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Comment from "./components/Comment";
import Loader from "./components/Loader";
import EndMsg from "./components/EndMsg";


function App() {
const [items, setItems] = useState([]);

Expand All @@ -16,7 +17,7 @@ function App() {
useEffect(() => {
const getComments = async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/comments?_page=1&_limit=20`
`https://rss.dinamalar.com/internal/wnews.asp?id=31`
// For json server use url below
// `http://localhost:3004/comments?_page=1&_limit=20`
);
Expand All @@ -29,7 +30,7 @@ function App() {

const fetchComments = async () => {
const res = await fetch(
`https://jsonplaceholder.typicode.com/comments?_page=${page}&_limit=20`
`https://rss.dinamalar.com/internal/wnews.asp?id=31`
// For json server use url below
// `http://localhost:3004/comments?_page=${page}&_limit=20`
);
Expand All @@ -47,6 +48,9 @@ function App() {
setpage(page + 1);
};
return (
<>
<h2 className="card-title text-center mt-2 h5"> Dinamalar Listing Page - Infinite Scroll </h2>

<InfiniteScroll
dataLength={items.length} //This is important field to render the next data
next={fetchData}
Expand All @@ -57,11 +61,12 @@ function App() {
<div className="container">
<div className="row m-2">
{items.map((item) => {
return <Comment key={item.id} item={item} />;
return <Comment key={item.guid} item={item} />;
})}
</div>
</div>
</InfiniteScroll>
</>
);
}

Expand Down
15 changes: 11 additions & 4 deletions src/components/Comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@


function Comment({item: { id, email, body }}) {

function Comment({item: { guid, title, description, permaLink, StoryImage }}) {
return (
<div className="col-sm-4 my-2" >
<div className="card shadow-sm w-100" style={{ minHeight: 225 }}>
<div className="card-body">
<h5 className="card-title text-center h2">Id : {id}</h5>
<h6 className="card-subtitle mb-2 text-muted text-center">{email}</h6>
<p className="card-text">{body}</p>
<h5 className="card-title text-left h4">
<a href={permaLink.web} className="title" target="_blank"> {title}</a>
</h5>

<img className="imgfit" src={StoryImage}/>
<p className="card-text">{description}</p>
<hr/>
<p className="card-text text-center">Id No: {guid}</p>

</div>
</div>
</div>
Expand Down