added

contributerMe · Feb 23, 2024 · 1e72440 · 1e72440
1 parent 5746dfc
commit 1e72440
Show file tree

Hide file tree

Showing 16 changed files with 500 additions and 26 deletions.
diff --git a/.cph/.test.cpp_a00fe16a0423a8ac3af4b39ad3e873af.prob b/.cph/.test.cpp_a00fe16a0423a8ac3af4b39ad3e873af.prob
@@ -0,0 +1 @@
+{"name":"Local: test","url":"d:\\WebDev Angela\\React\\newsapp\\test.cpp","tests":[{"id":1708188160519,"input":"7\n4 2 7 6 9 14 12\n5 \n1","output":""},{"id":1708188249806,"input":"9\n4 12 2 7 3 18 20 3 19\n10 \n2","output":""},{"id":1708188793570,"input":"4\n14 3 19 3 \n17\n0","output":""}],"interactive":false,"memoryLimit":1024,"timeLimit":3000,"srcPath":"d:\\WebDev Angela\\React\\newsapp\\test.cpp","group":"local","local":true}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -34,5 +35,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.3.3"
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/contributerMe/Reactcbc-NewsApp.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/contributerMe/Reactcbc-NewsApp/issues"
+  },
+  "homepage": "https://github.com/contributerMe/Reactcbc-NewsApp#readme"
 }
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Web app for latest news using React"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+    <title>News App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +41,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
   </body>
+  </body>
+
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,30 @@
-import logo from './logo.svg';
 import './App.css';
+import React, { Component } from 'react'
+import Navbar from './components/Navbar';
+import News from './components/News';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <Router>
+            <Navbar/>
+            <Switch>
+              <Route exact path="/"><News country="in" pageSize={12} category="general" key="general"/></Route>
+              <Route exact path="/"><News country="in" pageSize={12} category="general" key="general"/></Route>
+              <Route exact path="/business"><News country="in" pageSize={12} category="business" key="business"/></Route>
+              <Route exact path="/entertainment"><News country="in" pageSize={12} category="entertainment" key="entertainment"/></Route>
+              <Route exact path="/science"><News country="in" pageSize={12} category="science" key="science"/></Route>
+              <Route exact path="/sports"><News country="in" pageSize={12} category="sports" key="sports"/></Route>
+              <Route exact path="/technology"><News country="in" pageSize={12} category="technology" key="technology"/></Route>
+            </Switch>
+        </Router>
+      </div>
+    )
+  }
 }
-
-export default App;
diff --git a/src/components/Loading.js b/src/components/Loading.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import loading from '../loadinggif.gif'
+
+export default class Loading extends Component {
+  render() {
+    return (
+      <div className='text-center'>
+        <img className='img-fluid' src={loading} alt="Loading" />
+      </div>
+    )
+  }
+}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {a} from "react-router-dom";
+
+export class Navbar extends Component {
+  render() {
+    return (
+      <div>
+      <nav className="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
+  <a className="navbar-brand" href="#">NewsMonkey</a>
+  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span className="navbar-toggler-icon"></span>
+  </button>
+
+  <div className="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul className="navbar-nav mr-auto">
+      <li className="nav-item active">
+        <a className="nav-link" href="/">Home</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="/">General</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="/business">Business</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="/entertainment">Entertainment</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="science">Science</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="/sports">Sports</a>
+      </li>
+      <li className="nav-item">
+        <a className="nav-link" href="/technology">Technology</a>
+      </li>
+    </ul>
+
+  </div>
+</nav>
+      </div>
+    )
+  }
+}
+
+export default Navbar
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"Local: test","url":"d:\\WebDev Angela\\React\\newsapp\\test.cpp","tests":[{"id":1708188160519,"input":"7\n4 2 7 6 9 14 12\n5 \n1","output":""},{"id":1708188249806,"input":"9\n4 12 2 7 3 18 20 3 19\n10 \n2","output":""},{"id":1708188793570,"input":"4\n14 3 19 3 \n17\n0","output":""}],"interactive":false,"memoryLimit":1024,"timeLimit":3000,"srcPath":"d:\\WebDev Angela\\React\\newsapp\\test.cpp","group":"local","local":true}