feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

components/design/FormState/FormState.test.tsx

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react'
+
+import { FormState } from './'
+
+describe('<FormState />', () => {
+  it('should return nothing if the state is idle', async () => {
+    const { container } = render(<FormState state='idle' />)
+    expect(container.innerHTML.length).toEqual(0)
+  })
+
+  it('should return nothing if the message is null', async () => {
+    const { container } = render(<FormState state='error' />)
+    expect(container.innerHTML.length).toEqual(0)
+  })
+
+  it('should render the <Loader /> if state is loading', async () => {
+    const { getByTestId } = render(<FormState state='loading' />)
+    expect(getByTestId('loader')).toBeInTheDocument()
+  })
+
+  it('should render the success message if state is success', async () => {
+    const message = 'Success Message'
+    const { getByText } = render(
+      <FormState state='success' message={message} />
+    )
+    expect(getByText(message)).toBeInTheDocument()
+  })
+
+  it('should render the error message if state is error', async () => {
+    const message = 'Error Message'
+    const { getByText } = render(<FormState state='error' message={message} />)
+    expect(getByText(message)).toBeInTheDocument()
+  })
+})

components/design/FormState/FormState.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames'
+import useTranslation from 'next-translate/useTranslation'
+
+import { FormState as FormStateType } from 'hooks/useFormState'
+import { Loader } from '../Loader'
+
+export interface FormStateProps {
+  state: FormStateType
+  message?: string | null
+  id?: string
+}
+
+export const FormState: React.FC<FormStateProps> = (props) => {
+  const { state, message, id } = props
+  const { t } = useTranslation()
+
+  if (state === 'loading') {
+    return (
+      <div data-testid='loader' className='mt-8 flex justify-center'>
+        <Loader />
+      </div>
+    )
+  }
+
+  if (state === 'idle' || message == null) {
+    return null
+  }
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'mt-6 relative flex flex-row items-center font-medium text-center max-w-xl',
+          {
+            'text-red-800 dark:text-red-400': state === 'error',
+            'text-green-800 dark:text-green-400': state === 'success'
+          }
+        )}
+      >
+        <div className='thumbnail bg-cover absolute top-0 inline-block font-headline'></div>
+        <span id={id} className={classNames({ 'pl-6': state === 'error' })}>
+          <b>{t(`errors:${state}`)}:</b> {message}
+        </span>
+      </div>
+
+      <style jsx>{`
+        .thumbnail {
+          min-width: 20px;
+          width: 20px;
+          height: ${state === 'error' ? '20px' : '25px'};
+          background-image: url('/images/svg/icons/input/${state}.svg');
+        }
+      `}</style>
+    </>
+  )
+}

components/design/FormState/index.ts

@@ -0,0 +1 @@
+export * from './FormState'