Create Get images on page load

Author: juan-patrick

src/components/FileList/index.js

@@ -11,7 +11,7 @@ import { UploadContext } from '../../providers/UploadProvider';
 
 function FileList() {
   const themeContext = useContext(ThemeContext);
-  const { uploadedFiles } = useContext(UploadContext);
+  const { uploadedFiles, handleDelete } = useContext(UploadContext);
 
   return (
     <Container>
@@ -26,7 +26,11 @@ function FileList() {
                 <strong>{file.name}</strong>
                 <span>
                   {file.readableSize}
-                  {!!file.url && <button onClick={() => {}}>Excluir</button>}
+                  {!!file.url && (
+                    <button onClick={(e) => handleDelete(file.id)}>
+                      Excluir
+                    </button>
+                  )}
                 </span>
               </div>
             </FileInfo>

src/providers/UploadProvider.js

@@ -14,6 +14,28 @@ export default function UploadProvider({ children }) {
 
   const [uploading, setUploading] = useState(false);
 
+  useEffect(() => {
+    async function loadFiles() {
+      await api
+        .get('/posts')
+        .then(({ data }) => {
+          setUploadedFiles(
+            data.map((file) => ({
+              id: file._id,
+              name: file.name,
+              readableSize: filesize(file.size),
+              preview: file.url,
+              uploaded: true,
+              url: file.url,
+            }))
+          );
+        })
+        .catch(() => {});
+    }
+
+    loadFiles();
+  }, []);
+
   useEffect(() => {
     function updateFile(id, data) {
       setFilesToUpload(
@@ -88,9 +110,15 @@ export default function UploadProvider({ children }) {
     setUploading(true);
   }
 
+  async function handleDelete(fileId) {
+    await api.delete(`/posts/${fileId}`);
+
+    setUploadedFiles(uploadedFiles.filter((file) => file.id !== fileId));
+  }
+
   return (
     <UploadContext.Provider
-      value={{ handleUpload, uploadedFiles, setUploadedFiles }}
+      value={{ handleDelete, handleUpload, uploadedFiles, setUploadedFiles }}
     >
       {children}
     </UploadContext.Provider>