I never sleep, 'cause sleep is the cousin of death

Author: HotPotatoC

src/components/button.tsx

@@ -1,12 +1,15 @@
-//for footer navigation
-
-interface props {
-  children: string
+import { ReactNode } from 'react'
+type ButtonProps = {
+  children: ReactNode
   type: 'primary' | 'landing'
   submit?: boolean
 }
 
-const Button = ({ children, type, submit }: props) => {
+const Button: React.FunctionComponent<ButtonProps> = ({
+  children,
+  type,
+  submit,
+}) => {
   const buttonVariant = {
     primary:
       'duration-200 bg-primary-green hover:bg-dark-green font-bold py-3 px-8 rounded-full overflow-clip',

src/components/loader/rotate-loader.tsx

@@ -0,0 +1,157 @@
+// All credit goes to https://github.com/davidhu2000/react-spinners
+// This is copied from the react-spinners package directly
+
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react'
+
+interface CommonProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+  color?: string
+  loading?: boolean
+  cssOverride?: CSSProperties
+  speedMultiplier?: number
+}
+export type LengthType = number | string
+export interface LoaderSizeMarginProps extends CommonProps {
+  size?: LengthType
+  margin?: LengthType
+}
+
+export function cssValue(value: number | string): string {
+  const lengthWithunit = parseLengthAndUnit(value)
+
+  return `${lengthWithunit.value}${lengthWithunit.unit}`
+}
+
+export const createAnimation = (
+  loaderName: string,
+  frames: string,
+  suffix: string,
+): string => {
+  const animationName = `react-spinners-${loaderName}-${suffix}`
+
+  if (typeof window == 'undefined' || !window.document) {
+    return animationName
+  }
+
+  const styleEl = document.createElement('style')
+  document.head.appendChild(styleEl)
+  const styleSheet = styleEl.sheet
+
+  const keyFrames = `
+      @keyframes ${animationName} {
+        ${frames}
+      }
+    `
+
+  if (styleSheet) {
+    styleSheet.insertRule(keyFrames, 0)
+  }
+
+  return animationName
+}
+const cssUnit: { [unit: string]: boolean } = {
+  cm: true,
+  mm: true,
+  in: true,
+  px: true,
+  pt: true,
+  pc: true,
+  em: true,
+  ex: true,
+  ch: true,
+  rem: true,
+  vw: true,
+  vh: true,
+  vmin: true,
+  vmax: true,
+  '%': true,
+}
+interface LengthObject {
+  value: number
+  unit: string
+}
+export function parseLengthAndUnit(size: number | string): LengthObject {
+  if (typeof size === 'number') {
+    return {
+      value: size,
+      unit: 'px',
+    }
+  }
+  let value: number
+  const valueString: string = (size.match(/^[0-9.]*/) || '').toString()
+  if (valueString.includes('.')) {
+    value = parseFloat(valueString)
+  } else {
+    value = parseInt(valueString, 10)
+  }
+
+  const unit: string = (size.match(/[^0-9]*$/) || '').toString()
+
+  if (cssUnit[unit]) {
+    return {
+      value,
+      unit,
+    }
+  }
+
+  console.warn(
+    `React Spinners: ${size} is not a valid css value. Defaulting to ${value}px.`,
+  )
+
+  return {
+    value,
+    unit: 'px',
+  }
+}
+
+const sync = createAnimation(
+  'SyncLoader',
+  `33% {transform: translateY(10px)}
+    66% {transform: translateY(-10px)}
+    100% {transform: translateY(0)}`,
+  'sync',
+)
+
+function SyncLoader({
+  loading = true,
+  color = '#000000',
+  speedMultiplier = 1,
+  cssOverride = {},
+  size = 15,
+  margin = 2,
+  ...additionalprops
+}: LoaderSizeMarginProps): JSX.Element | null {
+  const wrapper: React.CSSProperties = {
+    display: 'inherit',
+    ...cssOverride,
+  }
+
+  const style = (i: number): React.CSSProperties => {
+    return {
+      backgroundColor: color,
+      width: cssValue(size),
+      height: cssValue(size),
+      margin: cssValue(margin),
+      borderRadius: '100%',
+      display: 'inline-block',
+      animation: `${sync} ${0.6 / speedMultiplier}s ${
+        i * 0.07
+      }s infinite ease-in-out`,
+      animationFillMode: 'both',
+    }
+  }
+
+  if (!loading) {
+    return null
+  }
+
+  return (
+    <span style={wrapper} {...additionalprops}>
+      <span style={style(1)} />
+      <span style={style(2)} />
+      <span style={style(3)} />
+    </span>
+  )
+}
+
+export default SyncLoader

src/pages/upload/upload.tsx

@@ -6,6 +6,8 @@ import Button from '../../components/button'
 import DropdownKey, { Key } from './upload-dropdown-keys'
 import { Tag, TagsAutoComplete } from './upload-tags-autocomplete'
 
+import { useNavigate } from 'react-router-dom'
+import RotateLoader from '../../components/loader/rotate-loader'
 import { UploadInput } from './upload-input'
 
 type UploadModalProps = {
@@ -36,6 +38,8 @@ export default function UploadModal({
   const [key, setKey] = useState<Key['name']>('C')
   const [keyScale, setKeyScale] = useState<'major' | 'minor'>('major')
 
+  const navigate = useNavigate()
+
   const {
     register,
     handleSubmit,
@@ -62,13 +66,15 @@ export default function UploadModal({
     setImage(null)
     setImagePreview('')
     setAudio(null)
+    navigate('/artist-dashboard')
   }
 
   function openModal() {
     setIsUpload(true)
   }
 
   const onSubmit = handleSubmit(async (data) => {
+    setLoading(true)
     await uploadSample({
       name: data.title,
       bpm: data.bpm,
@@ -78,6 +84,10 @@ export default function UploadModal({
       audioFile: audio,
       coverFile: image,
       tagIds: selectedTags?.map((tag) => tag.id) || [],
+    }).then((res) => {
+      console.log(res)
+      setLoading(false)
+      closeModal()
     })
   })
 
@@ -303,7 +313,14 @@ export default function UploadModal({
                                 Cancel
                               </button>
                               <Button type="primary" submit>
-                                Upload
+                                {loading && (
+                                  <RotateLoader
+                                    margin="1px"
+                                    size="10px"
+                                    color="#FAF9F6"
+                                  />
+                                )}
+                                {!loading && 'Upload'}
                               </Button>
                             </div>
                           </div>