-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.tsx
105 lines (93 loc) · 2.63 KB
/
main.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Devvit } from '@devvit/public-api';
Devvit.configure({
redditAPI: true,
});
Devvit.addMenuItem({
label: 'Create Calculator Post',
location: 'subreddit',
onPress: async (_, { reddit, ui }) => {
const subreddit = await reddit.getCurrentSubreddit();
await reddit.submitPost({
preview: (
<vstack padding="medium" cornerRadius="medium">
<text style="heading" size="medium">
Loading Calculator...
</text>
</vstack>
),
title: `Devvit Calculator`,
subredditName: subreddit.name,
});
ui.showToast({
text: `Successfully created a Calculator post!`,
appearance: 'success',
});
},
});
Devvit.addCustomPostType({
name: 'Calculator',
render: context => {
const [expression, setExpression] = context.useState('');
const handleButtonClick = value => {
setExpression(prevExpression => prevExpression + value);
};
const handleCalculate = () => {
try {
setExpression(eval(expression).toString());
} catch (error) {
setExpression('Error');
}
};
const handleClear = () => {
setExpression('');
};
return (
<vstack alignment='center middle' height='100%' gap='small'>
<text size='xxlarge' weight='bold'>
Calculator 🧮
</text>
<text size='large'>{expression}</text>
<hstack alignment='center' gap='small'>
{[1, 2, 3, '+'].map(value => (
<button key={value} onPress={() => handleButtonClick(value)}>
{value}
</button>
))}
</hstack>
<hstack alignment='center' gap='small'>
{[4, 5, 6, '-'].map(value => (
<button key={value} onPress={() => handleButtonClick(value)}>
{value}
</button>
))}
</hstack>
<hstack alignment='center' gap='small'>
{[7, 8, 9, '*'].map(value => (
<button key={value} onPress={() => handleButtonClick(value)}>
{value}
</button>
))}
</hstack>
<hstack alignment='center' gap='small'>
{[0, '/', '=', 'C'].map(value => (
<button
key={value}
onPress={() => {
if (value === '=') {
handleCalculate();
} else if (value === 'C') {
handleClear();
} else {
handleButtonClick(value);
}
}}
>
{value}
</button>
))}
</hstack>
</vstack>
);
},
});
export default Devvit;