ruidy/react_template
1
0
Fork 0
mirror of https://github.com/rjNemo/react_template synced 2026-06-10 23:36:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor logic out of component

Browse source
This commit is contained in:
Ruidy 2020-10-25 13:05:01 +01:00
parent 1e08ccc1c3
commit 61201094db
2 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/containers/home/index.tsx
View file

@ -1,23 +1,14 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { gql, useQuery } from '@apollo/client';
import TodoList from './TodoList'; import TodoList from './TodoList';
import { Button } from '../../components/button'; import { Button } from '../../components/button';
import { Container } from '../../components/container'; import { Container } from '../../components/container';
const LIST_TODOS = gql` import { useListTodos } from '../../core/services/todo';
query ListAll {
listTodos {
todoId
title
isDone
}
}
`;
export const Home: FC = () => { export const Home: FC = () => {
// const todos: Todo[] = listTodos(); const { loading, error, data } = useListTodos();
const { loading, error, data } = useQuery(LIST_TODOS);
if (error) { if (error) {
return <p>Sorry...</p>; return <p>Sorry...</p>;
} }
@ -26,7 +17,7 @@ export const Home: FC = () => {
<Container> <Container>
<h1>Your tasks</h1> <h1>Your tasks</h1>
<p>Hi there!</p> <p>Hi there!</p>
{!loading && <TodoList todos={data.listTodos} />} {!loading && !!data && <TodoList todos={data.listTodos} />}
<Button primary onClick={() => console.log('Clicked Normal Button')}> <Button primary onClick={() => console.log('Clicked Normal Button')}>
Normal Button Normal Button
</Button> </Button>

26
src/core/services/todo.ts
View file

@ -1,16 +1,18 @@
import { gql, useQuery } from '@apollo/client';
import Todo from '../models/todo'; import Todo from '../models/todo';
export const listTodos = (): Todo[] => { const LIST_TODOS = gql`
return [ query ListAll {
{ listTodos {
todoId: '1', todoId
title: 'test', title
isDone: false isDone
},
{
todoId: '2',
title: 'second',
isDone: true
} }
]; }
`;
export const useListTodos = () => {
const { loading, error, data } = useQuery<{ listTodos: Todo[] }>(LIST_TODOS);
return { loading, error, data };
}; };