-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
TodoApp.tsx
73 lines (62 loc) · 2.05 KB
/
TodoApp.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// @flow
/**
* This file provided by Facebook is for non-commercial testing and evaluation
* purposes only. Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import AddTodoMutation from '../mutations/AddTodoMutation';
import * as React from 'react';
// import { StyleSheet, View } from 'react-native';
// version 0.4.0
// import {createFragmentContainer, graphql, useIsConnected, useNetInfo } from 'react-relay-offline';
import {createFragmentContainer, graphql } from 'react-relay-offline';
// import TodoListFooter from './TodoListFooter';
import styled, { css } from "styled-components";
import { Paper } from '@wora/mui';
import { Typography } from '@wora/mui';
import TodoListFooter from "./TodoListFooter";
const StyledTodoApp = css`
background-color: #fff;
margin: 4px 0 4px 0;
position: relative;
`;
const TodoApp = ({relay, user}: any) => {
const handleTextInputSave = (text: string) => {
AddTodoMutation.commit(relay.environment, text, user);
return;
};
// version 0.4.0
// const isConnected = useIsConnected();
// const netInfo = useNetInfo();
const hasTodos = user.totalCount > 0;
return (
<Paper>
<Paper customStyle={StyledTodoApp}>
<Paper>
<Typography variant="h6" align="center">Todos</Typography>
</Paper>
{hasTodos && <TodoListFooter user={user} />}
</Paper>
</Paper>
);
};
export default createFragmentContainer(TodoApp, {
user: graphql`
fragment TodoApp_user on User {
id
userId
totalCount
completedCount
...TodoListFooter_user
}
`,
});
/*
...TodoListFooter_user
*/