Skip to content

Commit e3cccd9

Browse files
sammarxzsammarxz
committed
change Delete to the Snippet Component
1 parent fe6f00e commit e3cccd9

File tree

4 files changed

+158
-132
lines changed

4 files changed

+158
-132
lines changed

‎components/Editor/index.tsx

+8-87
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,7 @@ import {
66
Flex,
77
Text,
88
Stack,
9-
IconButton,
10-
Button,
11-
Modal,
12-
ModalOverlay,
13-
ModalContent,
14-
ModalHeader,
15-
ModalFooter,
16-
ModalBody,
17-
ModalCloseButton,
18-
useDisclosure,
199
} from '@chakra-ui/react'
20-
import {FaTrash} from 'react-icons/fa'
2110
import moment from 'moment'
2211

2312
import {Code} from 'components'
@@ -35,7 +24,6 @@ export function Editor({...rest}) {
3524
} = useAppContext()
3625
const {supabase} = useSupabase()
3726
const [snippetData, setSnippetData] = useAutosave<SnippetType | null>(null)
38-
const {isOpen, onOpen, onClose} = useDisclosure()
3927

4028
useEffect(() => {
4129
const getSnippet = async () => {
@@ -44,7 +32,7 @@ export function Editor({...rest}) {
4432
.from('snippet')
4533
.select('*')
4634
.eq('id', selectedSnippet)
47-
35+
4836
if (snippet) {
4937
setSnippetData(snippet[0])
5038
dispatch({
@@ -82,82 +70,36 @@ export function Editor({...rest}) {
8270
function updateSnippets(updatedSnippet:SnippetType) {
8371
let updatedSnippets = snippets
8472
if (snippetData) {
85-
const snippetToUpdateIndex = updatedSnippets.findIndex(snippet =>
73+
const snippetToUpdateIndex = updatedSnippets.findIndex(snippet =>
8674
snippet.id === snippetData.id
8775
)
8876
updatedSnippets[snippetToUpdateIndex] = updatedSnippet
8977
}
9078
}
9179

92-
async function handleDeleteSnippet(snippetId:string) {
93-
const { data, error } = await supabase
94-
.from('snippet')
95-
.delete()
96-
.eq('id', snippetId)
97-
98-
if (!error) {
99-
const updatedSnippets = snippets.filter(snippet => snippet.id !== snippetId)
100-
dispatch({
101-
type: 'SET_SNIPPETS',
102-
payload: updatedSnippets
103-
})
104-
if (updatedSnippets.length > 0) {
105-
dispatch({
106-
type: 'SELECT_SNIPPET',
107-
payload: updatedSnippets[0].id
108-
})
109-
dispatch({
110-
type: 'SET_SNIPPET',
111-
payload: updatedSnippets[0]
112-
})
113-
} else {
114-
dispatch({
115-
type: 'SELECT_SNIPPET',
116-
payload: ''
117-
})
118-
// dispatch({
119-
// type: 'SET_SNIPPET',
120-
// payload: ''
121-
// })
122-
}
123-
124-
onClose()
125-
}
126-
}
127-
12880
return (
12981
<Box as="section" px={8} py={5} overflowY="auto" {...rest}>
13082
{snippetData && selectedSnippet && (
13183
<>
13284
<Flex align="center" justify="space-between">
13385
<Stack spacing={0} flex={1}>
134-
<Input
135-
variant="unstyled"
86+
<Input
87+
variant="unstyled"
13688
size="lg"
13789
isFullWidth
138-
fontSize="xl"
139-
color="whiteAlpha.900"
140-
fontWeight="bold"
90+
fontSize="xl"
91+
color="whiteAlpha.900"
92+
fontWeight="bold"
14193
value={snippetData.title}
14294
placeholder="Snippet Title"
14395
onChange={(e) => handleChange(e.target.value, 'title')}
14496
autoFocus
14597
/>
14698
<Text fontSize="sm">
147-
last modification:
99+
last modification:
148100
{moment(snippetData.updated_at).fromNow()}
149101
</Text>
150102
</Stack>
151-
<IconButton
152-
colorScheme="whiteAlpha"
153-
bg="transparent"
154-
color="whiteAlpha.600"
155-
_hover={{bg: 'whiteAlpha.300'}}
156-
aria-label="Delete Snippet"
157-
size="xs"
158-
icon={<FaTrash />}
159-
onClick={onOpen}
160-
/>
161103
</Flex>
162104
<Textarea
163105
isRequired
@@ -172,27 +114,6 @@ export function Editor({...rest}) {
172114
my={4}
173115
/>
174116
<Code onChange={handleChange} />
175-
<Modal variant="dark" isOpen={isOpen} onClose={onClose} size="xs">
176-
<ModalOverlay />
177-
<ModalContent bg="modalBG" textColor="whiteAlpha.600">
178-
<ModalHeader>Confirm Delete</ModalHeader>
179-
<ModalCloseButton />
180-
<ModalBody>
181-
<Text>
182-
Are you sure you would like to delete snippet{' '}
183-
<strong>{snippetData.title}</strong>?
184-
</Text>
185-
</ModalBody>
186-
<ModalFooter>
187-
<Button colorScheme="whiteAlpha" mr={3} onClick={onClose}>
188-
Cancel
189-
</Button>
190-
<Button colorScheme="red" onClick={() => handleDeleteSnippet(snippetData.id)}>
191-
Delete
192-
</Button>
193-
</ModalFooter>
194-
</ModalContent>
195-
</Modal>
196117
</>
197118
)}
198119
</Box>

‎components/Snippet/index.tsx

+125-30
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,25 @@
1-
import {Stack, Flex, Text, Badge} from '@chakra-ui/react'
1+
import {
2+
Stack,
3+
Flex,
4+
Text,
5+
Badge,
6+
IconButton,
7+
useDisclosure,
8+
Button,
9+
Modal,
10+
ModalOverlay,
11+
ModalContent,
12+
ModalHeader,
13+
ModalFooter,
14+
ModalBody,
15+
ModalCloseButton,
16+
} from '@chakra-ui/react'
17+
18+
import {FaTrash} from 'react-icons/fa'
219
import moment from 'moment'
320

421
import {useAppContext} from 'hooks/useAppContext'
22+
import useSupabase from 'hooks/useSupabase'
523

624
import * as S from './styles'
725

@@ -22,7 +40,13 @@ export function Snippet({
2240
language,
2341
isSelected = false,
2442
}: SnippetProps) {
25-
const {dispatch} = useAppContext()
43+
const {supabase} = useSupabase()
44+
const {
45+
state: {
46+
snippets,
47+
}, dispatch
48+
} = useAppContext()
49+
const {isOpen, onOpen, onClose} = useDisclosure()
2650

2751
function setActiveSnippet(id: string) {
2852
dispatch({
@@ -31,34 +55,105 @@ export function Snippet({
3155
})
3256
}
3357

58+
async function handleDeleteSnippet(snippetId:string) {
59+
const { data, error } = await supabase
60+
.from('snippet')
61+
.delete()
62+
.eq('id', snippetId)
63+
64+
if (!error) {
65+
const updatedSnippets = snippets.filter(snippet => snippet.id !== snippetId)
66+
dispatch({
67+
type: 'SET_SNIPPETS',
68+
payload: updatedSnippets
69+
})
70+
if (updatedSnippets.length > 0) {
71+
dispatch({
72+
type: 'SELECT_SNIPPET',
73+
payload: updatedSnippets[0].id
74+
})
75+
dispatch({
76+
type: 'SET_SNIPPET',
77+
payload: updatedSnippets[0]
78+
})
79+
} else {
80+
dispatch({
81+
type: 'SELECT_SNIPPET',
82+
payload: ''
83+
})
84+
// dispatch({
85+
// type: 'SET_SNIPPET',
86+
// payload: ''
87+
// })
88+
}
89+
90+
onClose()
91+
}
92+
}
93+
3494
return (
35-
<Stack
36-
bg={isSelected ? 'whiteAlpha.200' : 'transparent'}
37-
cursor="pointer"
38-
transition="ease"
39-
transitionProperty="all"
40-
transitionDuration=".6s"
41-
px={5}
42-
py={4}
43-
borderRadius="md"
44-
opacity={isSelected ? 1 : 0.4}
45-
_hover={{opacity: 1}}
46-
onClick={() => setActiveSnippet(id)}
47-
>
48-
<S.Title fontSize="lg" textColor="whiteAlpha.800">
49-
{title}
50-
</S.Title>
51-
<S.Description fontFamily="mono" fontSize="sm" textColor="whiteAlpha.500">
52-
{description}
53-
</S.Description>
54-
<Flex alignItems="center" justifyContent="space-between">
55-
<Badge variant="subtle" colorScheme="whiteAlpha">
56-
{language}
57-
</Badge>
58-
<Text fontFamily="mono" fontSize="xs" textColor="whiteAlpha.500">
59-
created at {moment(created_at).fromNow()}
60-
</Text>
61-
</Flex>
62-
</Stack>
95+
<S.Wrapper>
96+
<Stack
97+
bg={isSelected ? 'whiteAlpha.200' : 'transparent'}
98+
cursor="pointer"
99+
transition="ease"
100+
transitionProperty="all"
101+
transitionDuration=".6s"
102+
px={5}
103+
py={4}
104+
borderRadius="md"
105+
opacity={isSelected ? 1 : 0.4}
106+
_hover={{opacity: 1}}
107+
onClick={() => setActiveSnippet(id)}
108+
>
109+
<Flex as="header" alignItems="center" justifyContent="space-between">
110+
<S.Title fontSize="lg" textColor="whiteAlpha.800">
111+
{title}
112+
</S.Title>
113+
<IconButton
114+
colorScheme="whiteAlpha"
115+
bg="transparent"
116+
color="whiteAlpha.600"
117+
_hover={{bg: 'whiteAlpha.300'}}
118+
aria-label="Delete Snippet"
119+
size="xs"
120+
icon={<FaTrash />}
121+
onClick={onOpen}
122+
/>
123+
</Flex>
124+
<S.Description fontFamily="mono" fontSize="sm" textColor="whiteAlpha.500">
125+
{description}
126+
</S.Description>
127+
<Flex alignItems="center" justifyContent="space-between">
128+
<Badge variant="subtle" colorScheme="whiteAlpha">
129+
{language}
130+
</Badge>
131+
<Text fontFamily="mono" fontSize="xs" textColor="whiteAlpha.500">
132+
created at {moment(created_at).fromNow()}
133+
</Text>
134+
</Flex>
135+
</Stack>
136+
<Modal variant="dark" isOpen={isOpen} onClose={onClose} size="xs">
137+
<ModalOverlay />
138+
<ModalContent bg="modalBG" textColor="whiteAlpha.600">
139+
<ModalHeader>Confirm Delete</ModalHeader>
140+
<ModalCloseButton />
141+
<ModalBody>
142+
<Text>
143+
Are you sure you would like to delete snippet{' '}
144+
<strong>{title}</strong>?
145+
</Text>
146+
</ModalBody>
147+
<ModalFooter>
148+
<Button colorScheme="whiteAlpha" mr={3} onClick={onClose}>
149+
Cancel
150+
</Button>
151+
<Button colorScheme="red" onClick={() => handleDeleteSnippet(id)}>
152+
Delete
153+
</Button>
154+
</ModalFooter>
155+
</ModalContent>
156+
</Modal>
157+
</S.Wrapper>
63158
)
64159
}

‎components/Snippet/styles.ts

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
import styled from '@emotion/styled'
2-
import {Heading, Text} from '@chakra-ui/react'
1+
import styled from "@emotion/styled";
2+
import { Heading, Text, Flex } from "@chakra-ui/react";
3+
4+
export const Wrapper = styled.div`
5+
header button {
6+
opacity: 0;
7+
transition: opacity 0.6s ease;
8+
}
9+
10+
&:hover header button {
11+
opacity: 0.5;
12+
}
13+
`;
314

415
export const Title = styled(Heading)`
516
display: -webkit-box;
617
-webkit-line-clamp: 1;
718
-webkit-box-orient: vertical;
819
overflow: hidden;
920
text-overflow: ellipsis;
10-
`
21+
`;
1122

1223
export const Description = styled(Text)`
1324
display: -webkit-box;
1425
-webkit-line-clamp: 2;
1526
-webkit-box-orient: vertical;
1627
overflow: hidden;
1728
text-overflow: ellipsis;
18-
`
29+
`;

‎hooks/useSupabase.ts

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import {useState, useEffect} from 'react'
2-
import {createClient} from '@supabase/supabase-js'
1+
import { useState } from "react";
2+
import { createClient } from "@supabase/supabase-js";
33

44
export const supabase = createClient(
55
process.env.NEXT_PUBLIC_SUPABASE_URL!,
6-
process.env.NEXT_PUBLIC_SUPABASE_API_KEY!,
7-
)
6+
process.env.NEXT_PUBLIC_SUPABASE_API_KEY!
7+
);
88

99
const useSupabase = () => {
10-
const [currentUser, setCurrentUser] = useState(null)
11-
const [session, setSession] = useState(supabase.auth.session())
10+
const [session, setSession] = useState(supabase.auth.session());
1211

1312
supabase.auth.onAuthStateChange(async (_event, session) => {
14-
setSession(session)
15-
})
13+
setSession(session);
14+
});
1615

17-
return {session, supabase}
18-
}
16+
return { session, supabase };
17+
};
1918

20-
export default useSupabase
19+
export default useSupabase;

0 commit comments

Comments
 (0)