package updates

next.config.js

@@ -1,5 +1,3 @@
-const withCSS = require('@zeit/next-css')
-
 // eslint-disable-next-line no-unused-vars
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
@@ -25,11 +23,4 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   })
 }
 
-module.exports = withSvgr(
-  withCSS({
-    cssModules: true,
-    cssLoaderOptions: {
-      localIdentName: '[local]___[hash:base64:5]'
-    }
-  })
-)
+module.exports = withSvgr()

package.json

@@ -15,38 +15,37 @@
   "author": "Matthias Kretschmann <m@kretschmann.io>",
   "license": "MIT",
   "dependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "axios": "^0.19.0",
-    "ipfs-http-client": "^40.0.1",
-    "next": "^9.1.4",
-    "next-seo": "^3.1.0",
+    "axios": "^0.19.2",
+    "ipfs-http-client": "^42.0.0",
+    "next": "^9.3.0",
+    "next-seo": "^4.4.0",
     "next-svgr": "^0.0.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "react-dropzone": "^10.2.1",
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^9.1.4",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@types/jest": "^24.0.23",
+    "@next/bundle-analyzer": "^9.3.0",
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.5.0",
+    "@types/jest": "^25.1.4",
     "@types/next-seo": "^1.10.0",
-    "@types/node": "^12.12.14",
-    "@types/react": "^16.9.15",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
+    "@types/node": "^13.9.0",
+    "@types/react": "^16.9.23",
+    "@typescript-eslint/eslint-plugin": "^2.23.0",
+    "@typescript-eslint/parser": "^2.23.0",
     "cssnano": "^4.1.10",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.7.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.17.0",
-    "jest": "^24.9.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "jest": "^25.1.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.19.1",
-    "ts-jest": "^24.2.0",
-    "typescript": "^3.7.3"
+    "ts-jest": "^25.2.1",
+    "typescript": "^3.8.3"
   },
   "engines": {
     "node": "10.x"

postcss.config.js

@@ -1,8 +1,6 @@
 module.exports = {
   plugins: {
-    'postcss-preset-env': {
-      importFrom: './src/styles/_variables.css'
-    },
+    'postcss-preset-env': {},
     cssnano: {}
   }
 }

src/components/Add.tsx

@@ -17,16 +17,16 @@ const ipfsConfig: IpfsConfig = {
 
 export default function Add() {
   const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
-  const [files, setFiles] = useState()
+  const [files, setFiles] = useState([])
   const [loading, setLoading] = useState(false)
   const [message] = useState()
-  const [error, setError] = useState()
+  const [error, setError] = useState('')
 
   async function handleOnDrop(acceptedFiles: FileDropzone[]): Promise<any> {
     if (!acceptedFiles) return
 
     setLoading(true)
-    setError(null)
+    setError('')
 
     try {
       const directoryCid = await addToIpfs(ipfs, acceptedFiles)
@@ -45,7 +45,7 @@ export default function Add() {
     <div className={styles.add}>
       {loading ? (
         <Loader message={message} />
-      ) : files ? (
+      ) : files.length ? (
         <ul style={{ textAlign: 'left' }}>
           {files.map((file: FileIpfs) => (
             <li key={file.path}>

src/components/Dropzone.tsx

@@ -43,7 +43,7 @@ export default function Dropzone({
         `Drop it like it's hot!`
       ) : multiple === false ? (
         `Drag 'n' drop a file here, or click to select a file.`
-      ) : error ? (
+      ) : error !== '' ? (
         <div className={styles.error}>{error}</div>
       ) : (
         `Drag 'n' drop some files here, or click to select files.`

src/components/ThemeSwitch.module.css

@@ -52,11 +52,11 @@
   cursor: pointer;
 }
 
-[type='checkbox']:checked + .checkboxContainer .checkboxFake::after {
+.input:checked + .checkboxContainer .checkboxFake::after {
   transform: translate3d(100%, 0, 0);
 }
 
-[type='checkbox'],
+.input,
 .label {
   width: 1px;
   height: 1px;

src/components/ThemeSwitch.tsx

@@ -21,6 +21,7 @@ const ThemeToggleInput = ({
   toggleDark(): void
 }) => (
   <input
+    className={styles.input}
     onChange={toggleDark}
     type="checkbox"
     name="toggle"

src/ipfs.ts

@@ -17,6 +17,7 @@ export function streamFiles(ipfs: any, ipfsFiles: FileIpfsAdd[]) {
       wrapWithDirectory: true
       // progress: (length: number) => setFileSizeReceived(formatBytes(length, 0))
     })
+    console.log(stream)
 
     stream.on('data', (data: FileIpfs) => {
       console.log(`Added ${data.path} hash: ${data.hash}`)

src/styles/_variables.css

@@ -55,7 +55,7 @@
   --link-underline-color: var(--brand-grey-dimmed);
 }
 
-:global(.dark) {
+.dark {
   --body-background-color: #1d2224;
   --color-text: var(--brand-grey-light);
   --color-headings: var(--brand-main-light);