Skip to content
Permalink
Browse files

First commit

  • Loading branch information...
techiediaries committed Jul 26, 2019
1 parent 845e4b6 commit bf0842d810ff65a0b3b48fd4799aae8ad8fd6b60
Showing with 89 additions and 110 deletions.
  1. +37 −0 package-lock.json
  2. +1 −0 package.json
  3. +1 −7 src/App.tsx
  4. +4 −4 src/components/Menu.tsx
  5. +46 −46 src/pages/Home.tsx
  6. +0 −53 src/pages/List.tsx

Some generated files are not rendered by default. Learn more.

@@ -10,6 +10,7 @@
"@types/react-dom": "^16.8.4",
"@types/react-router": "^4.4.4",
"@types/react-router-dom": "^4.3.1",
"axios": "^0.19.0",
"ionicons": "^4.6.2-0",
"node-sass": "^4.12.0",
"react": "^16.8.6",
@@ -5,7 +5,7 @@ import { AppPage } from './declarations';

import Menu from './components/Menu';
import Home from './pages/Home';
import List from './pages/List';

import { home, list } from 'ionicons/icons';

/* Core CSS required for Ionic components to work properly */
@@ -29,11 +29,6 @@ const appPages: AppPage[] = [
title: 'Home',
url: '/home',
icon: home
},
{
title: 'List',
url: '/home/list',
icon: list
}
];

@@ -45,7 +40,6 @@ const App: React.FunctionComponent = () => (
<IonPage id="main">
<IonRouterOutlet>
<Route path="/:tab(home)" component={Home} exact={true} />
<Route path="/:tab(home)/list" component={List} exact={true} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonPage>
@@ -21,16 +21,16 @@ interface MenuProps extends RouteComponentProps {
const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
<IonMenu contentId="main">
<IonHeader>
<IonToolbar>
<IonToolbar color="primary">
<IonTitle>Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonContent color="primary">
<IonList style= {{ background : '#3880ff'}} color="primary">
{appPages.map((appPage, index) => {
return (
<IonMenuToggle key={index} auto-hide="false">
<IonItem href={appPage.url}>
<IonItem color="primary" href={appPage.url}>
<IonIcon slot="start" icon={appPage.icon} />
<IonLabel>{appPage.title}</IonLabel>
</IonItem>
@@ -1,71 +1,71 @@
import {
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonMenuButton,
IonTitle,
IonToolbar
} from '@ionic/react';
import { book, build, colorFill, grid } from 'ionicons/icons';
IonToolbar,
IonButton
} from '@ionic/react';

import React from 'react';
import axios from 'axios';

import './Home.css';

const API_KEY = "e40d07f00b094602953cc3bf8537477e";
const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

const fetchArticles = () => {

return axios({
url: URL,
method: 'get'
}).then(response => {

console.log(response);
return response.data;
})
};

const HomePage: React.FunctionComponent = () => {

const [articles, setArticles] = React.useState([]);
const items: any[] = [];

React.useEffect(() => {

fetchArticles().then(data => setArticles(data.articles));

}, []);

return (
<>
<IonHeader>
<IonToolbar>
<IonToolbar color="primary">
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Home</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonCard class="welcome-card">
<img src="/assets/shapes.svg" alt=""/>
<IonCardHeader>
<IonCardSubtitle>Get Started</IonCardSubtitle>
<IonCardTitle>Welcome to Ionic</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<p>
Now that your app has been created, you'll want to start building out features and
components. Check out some of the resources below for next steps.
</p>
</IonCardContent>
</IonCard>
<IonContent color="primary" >
<IonList color="primary">

{
articles.map(a => {
return (
<IonItem>
{a['title']}
<IonButton href={a['url']} color="primary" slot="end">Read</IonButton>
</IonItem>
);
})
}

<IonList lines="none">
<IonListHeader>
<IonLabel>Resources</IonLabel>
</IonListHeader>
<IonItem href="https://ionicframework.com/docs/" target="_blank">
<IonIcon slot="start" color="medium" icon={book} />
<IonLabel>Ionic Documentation</IonLabel>
</IonItem>
<IonItem href="https://ionicframework.com/docs/building/scaffolding" target="_blank">
<IonIcon slot="start" color="medium" icon={build} />
<IonLabel>Scaffold Out Your App</IonLabel>
</IonItem>
<IonItem href="https://ionicframework.com/docs/layout/structure" target="_blank">
<IonIcon slot="start" color="medium" icon={grid} />
<IonLabel>Change Your App Layout</IonLabel>
</IonItem>
<IonItem href="https://ionicframework.com/docs/theming/basics" target="_blank">
<IonIcon slot="start" color="medium" icon={colorFill} />
<IonLabel>Theme Your App</IonLabel>
</IonItem>
</IonList>
</IonContent>
</>

This file was deleted.

0 comments on commit bf0842d

Please sign in to comment.
You can’t perform that action at this time.