wip: #10 support for nuget

components/FileUploader/DropZone/DropZone.module.css

@@ -0,0 +1,8 @@
+.container, .textContainer {
+  width: var(--sizes-100);
+  height: var(--sizes-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+

components/FileUploader/DropZone/DropZone.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  DropEvent,
+  useDropzone,
+  FileRejection,
+  DropzoneOptions,
+  DropzoneState,
+} from "react-dropzone";
+import styles from "./DropZone.module.css";
+import clsx from "clsx";
+
+export type OnUpload = <T extends File>(
+  acceptedFiles: T[],
+  fileRejections: FileRejection[],
+  event: DropEvent
+) => void;
+
+type Props = {
+  children: (state: DropzoneState) => string | React.ReactElement;
+  options?: DropzoneOptions;
+  className?: string;
+};
+
+export const DropZone: React.VFC<Props> = ({
+  options,
+  children,
+  className,
+}) => {
+  const dropZoneState = useDropzone({
+    ...options,
+  });
+  const { getRootProps, getInputProps } = dropZoneState;
+
+  return (
+    <div {...getRootProps()} className={clsx(styles.container, className)}>
+      <input {...getInputProps()} />
+      <div className={styles.textContainer}>{children(dropZoneState)}</div>
+    </div>
+  );
+};

components/FileUploader/DropZone/index.ts

@@ -0,0 +1 @@
+export * from "./DropZone";

components/FileUploader/FileUploader.module.css

@@ -1,8 +1,32 @@
-.container, .textContainer {
+.container {
   width: var(--sizes-100);
-  height: var(--sizes-100);
+  height: 150px;
+  cursor: copy;
+  padding: var(--spacings-s);
+  border: var(--borders-strong);
   display: flex;
   align-items: center;
+  font-weight: var(--font-weights-bold);
+  border-radius: var(--radii-s);
   justify-content: center;
+  border-color: var(--colors-gray-lightest);
+  transition: var(--transitions-fast);
 }
 
+.container.loading {
+  cursor: unset;
+}
+
+.container.loading:hover {
+  box-shadow: unset;
+}
+
+.container:hover {
+  box-shadow: var(--shadows-medium);
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    padding: var(--spacings-s);
+  }
+}

components/FileUploader/FileUploader.tsx

@@ -1,40 +1,79 @@
-import React from "react";
-import {
-  DropEvent,
-  useDropzone,
-  FileRejection,
-  DropzoneOptions,
-  DropzoneState,
-} from "react-dropzone";
-import styles from "./FileUploader.module.css";
+import React, { useCallback } from "react";
+import Loader from "react-spinners/PacmanLoader";
 import clsx from "clsx";
-
-export type OnUpload = <T extends File>(
-  acceptedFiles: T[],
-  fileRejections: FileRejection[],
-  event: DropEvent
-) => void;
+import { ProjectInfo } from "../../types/projects";
+import { acceptedFileConfigs } from "../../utils/config";
+import { DropZone, OnUpload } from "./DropZone";
+import styles from "./FileUploader.module.css";
 
 type Props = {
-  children: (state: DropzoneState) => string | React.ReactElement;
-  options?: DropzoneOptions;
-  className?: string;
+  onUpload: (fundingLinks?: ProjectInfo[]) => void;
+  isLoading?: boolean;
+  setIsLoading: (isLoading: boolean) => void;
 };
 
+function getAcceptedFileExtensions() {
+  return acceptedFileConfigs.map(({ extension }) => extension);
+}
+
 export const FileUploader: React.VFC<Props> = ({
-  options,
-  children,
-  className,
+  onUpload,
+  isLoading,
+  setIsLoading,
 }) => {
-  const dropZoneState = useDropzone({
-    ...options,
-  });
-  const { getRootProps, getInputProps } = dropZoneState;
+  const onDrop: OnUpload = useCallback(
+    async (acceptedFiles) => {
+      setIsLoading(true);
+      try {
+        const formData = new FormData();
+
+        acceptedFiles.forEach((file) => {
+          formData.append("file", file);
+        });
+
+        const response = await fetch("/api/get-grouped-funding-links", {
+          method: "POST",
+          body: formData,
+        });
+
+        const groupedFundingLinks = await response.json();
+
+        onUpload(groupedFundingLinks || []);
+      } catch (e) {
+        onUpload([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onUpload, setIsLoading]
+  );
+
+  const renderText = useCallback(
+    ({ isDragActive }) => {
+      if (isLoading) {
+        return <Loader size={24} color="var(--colors-gray-light)" />;
+      }
+
+      if (isDragActive) {
+        return "Drop your package.json here ...";
+      }
+
+      return "Drag 'n' drop your package.json, or click to select it from your computer";
+    },
+    [isLoading]
+  );
 
   return (
-    <div {...getRootProps()} className={clsx(styles.container, className)}>
-      <input {...getInputProps()} />
-      <div className={styles.textContainer}>{children(dropZoneState)}</div>
-    </div>
+    <DropZone
+      className={clsx(styles.container, isLoading && styles.loading)}
+      options={{
+        onDrop,
+        accept: getAcceptedFileExtensions(),
+        multiple: false,
+        disabled: isLoading,
+      }}
+    >
+      {renderText}
+    </DropZone>
   );
 };

components/Home/Home.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useProjects } from "../../contexts/ProjectsContext";
 
 import { FundingGroup } from "../FundingGroup";
-import { PackageJsonUploader } from "../PackageJsonUploader";
+import { FileUploader } from "../FileUploader";
 
 import styles from "./Home.module.css";
 import Bleed from "nextra-theme-docs/bleed";
@@ -15,7 +15,7 @@ export const Home: React.VFC = () => {
     <Bleed full>
       <div className={styles.container}>
         <h1 className={styles.title}>Sponsorhello</h1>
-        <PackageJsonUploader
+        <FileUploader
           onUpload={setFundingLinks}
           isLoading={isLoading}
           setIsLoading={setIsLoading}

middlewares/fileParser/fileParser.ts

@@ -14,7 +14,9 @@ function getFileConfig(
 
   return acceptedFileConfigs.find(
     (config) =>
-      config.name === file.originalFilename && config.mimetype === file.mimetype
+      file.originalFilename &&
+      config.name.test(file.originalFilename) &&
+      config.mimetype === file.mimetype
   );
 }
 

pages/api/get-grouped-funding-links.ts

@@ -20,6 +20,7 @@ const handler = nc<NextApiRequest, NextApiResponse>({
 })
   .use(fileParser)
   .post(async (req, res) => {
+    console.log(req.body.platform, req.body.content);
     platformsClient.parseFileContent(req.body.platform, req.body.content);
 
     const groupedFundingLinks = await platformsClient.getFunding(

types/dependencies.ts

@@ -1,5 +1,6 @@
 export type DependenciesFileConfig = {
-  name: string;
+  name: RegExp;
+  extension: string;
   mimetype: string;
   platform: string;
 };

utils/config.ts

@@ -2,8 +2,15 @@ import { DependenciesFileConfig } from "../types/dependencies";
 
 export const acceptedFileConfigs: DependenciesFileConfig[] = [
   {
-    name: "package.json",
-    mimetype: "application/json",
+    name: /package.json/g,
     platform: "npm",
+    mimetype: "application/json",
+    extension: ".json",
+  },
+  {
+    name: /\w*.csproj/g,
+    platform: "nuget",
+    mimetype: "application/octet-stream",
+    extension: ".csproj",
   },
 ];