refactor logic out of component

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

View file

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

View file

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