April update

src/components/composer.js

@@ -3,11 +3,13 @@ import React, { useState } from 'react'
 import Modal from './modal'
 
 import styles from './composer.module.css'
+import constants from '../constants.json'
 
-export default function Composer({ onSubmit }) {
+export default function Composer({ onSubmit, allowFile, fileOnly }) {
   const [editorShowing, setEditorShowing] = useState(false)
   const [val, setVal] = useState('')
   const [title, setTitle] = useState('')
+  const [file, setFile] = useState()
 
   return (
     <>
@@ -18,7 +20,7 @@ export default function Composer({ onSubmit }) {
           }}
           className={styles.new}
         >
-          Bejegyzés írása...
+          Új poszt ...
         </div>
       </div>
       {editorShowing && (
@@ -37,27 +39,70 @@ export default function Composer({ onSubmit }) {
                 setTitle(e.target.value)
               }}
             />
-            <textarea
-              placeholder={'Írj ide valamit...'}
-              required
-              value={val}
-              onChange={(e) => {
-                setVal(e.target.value)
-              }}
-            />
+            {!fileOnly && (
+              <textarea
+                placeholder={'Írj ide valamit...'}
+                required
+                value={val}
+                onChange={(e) => {
+                  setVal(e.target.value)
+                }}
+              />
+            )}
+            {(allowFile || fileOnly) && (
+              <input
+                className={styles.fileInput}
+                type="file"
+                name="file"
+                accept={`${constants.imageExts
+                  .map((x) => `.${x}`)
+                  .join(',')},${constants.videoExts
+                  .map((x) => `.${x}`)
+                  .join(',')}`}
+                onChange={(e) => {
+                  const selectedFile = e.target.files[0]
+                  setFile(selectedFile)
+                  if (!title) {
+                    setTitle(
+                      selectedFile.name.split('.').slice(0, -1).join('.')
+                    )
+                  }
+                }}
+              />
+            )}
             <div className={`actions ${styles.composerAction}`}>
               <span
                 onClick={() => {
                   if (!title) {
-                    alert('Üres a tartalom!')
-                    return
-                  }
-                  if (!val) {
                     alert('Üres a téma!')
                     return
                   }
+                  if (!val && !fileOnly) {
+                    alert('Üres a tartalom!')
+                    return
+                  }
+                  if (fileOnly && !file) {
+                    alert('Kérlek tölts fel egy fájlt!')
+                    return
+                  }
 
-                  onSubmit(title, val)
+                  const ext = file.name.split('.').reverse()[0]
+                  if (
+                    !constants.imageExts.includes(ext.toLowerCase()) &&
+                    !constants.videoExts.includes(ext.toLowerCase())
+                  ) {
+                    alert(
+                      `Kérlek helyes formátum fájlt tölts fel! (${constants.imageExts.join(
+                        ', '
+                      )}, ${constants.videoExts.join(', ')})`
+                    )
+                    return
+                  }
+
+                  onSubmit(title, val, file)
+                  setTitle('')
+                  setVal('')
+                  setFile(undefined)
                   setEditorShowing(false)
                 }}
               >