thedevs-network/kutt-extension
1
0
Fork 0
mirror of https://github.com/thedevs-network/kutt-extension.git synced 2026-02-03 13:53:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: show spinner on shortening

Browse Source
This commit is contained in:
abhijithvijayan
2020-02-08 12:47:23 +05:30
parent 426141223f
commit fd43dc7a5f
3 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Popup/Popup.tsx
View File

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
import { UserSettingsResponseProperties, DomainEntryProperties } from '../Background';
import { getExtensionSettings } from '../util/settings';
import BodyWrapper from '../components/BodyWrapper';
import Loader from '../components/Loader';
import PopupForm from './PopupForm';
import PopupHeader from './Header';
@@ -79,7 +80,7 @@ const Popup: React.FC = () => {
<PopupForm domainOptions={domainOptions} defaultDomainId="default" />
</>
) : (
'Loading...'
<Loader />
)}
</div>
</BodyWrapper>

49
src/Popup/PopupForm.tsx
View File

@@ -1,10 +1,11 @@
import React from 'react';
import { withFormik, Field, Form, FormikHelpers, FormikProps, FormikErrors } from 'formik';
import { DomainOptionsProperties } from './Popup';
import { SelectField, TextField } from '../components/Input';
import Loader from '../components/Loader';
import messageUtil from '../util/mesageUtil';
import { DomainOptionsProperties } from './Popup';
import { SHORTEN_URL } from '../Background/constants';
import { SelectField, TextField } from '../components/Input';
import { ShortenUrlBodyProperties, SuccessfulShortenStatusProperties, ApiErroredProperties } from '../Background';
type FormValuesProperties = {
@@ -17,21 +18,37 @@ const InnerForm: React.FC<FormikProps<FormValuesProperties>> = props => {
const { isSubmitting, handleSubmit, domainOptions } = props;
return (
<Form onSubmit={handleSubmit} autoComplete="off" id="popup__form">
<div>
<Field name="domain" type="text" component={SelectField} label="Domain" options={domainOptions} />
</div>
<div>
<Field name="customurl" type="text" component={TextField} label="Custom URL" />
</div>
<div>
<Field name="password" type="password" component={TextField} label="Password" />
</div>
<>
{isSubmitting ? (
<>
<div className="popup__loader">
<Loader />
</div>
</>
) : (
<Form onSubmit={handleSubmit} autoComplete="off" id="popup__form">
<div>
<Field
name="domain"
type="text"
component={SelectField}
label="Domain"
options={domainOptions}
/>
</div>
<div>
<Field name="customurl" type="text" component={TextField} label="Custom URL" />
</div>
<div>
<Field name="password" type="password" component={TextField} label="Password" />
</div>
<button type="submit" disabled={isSubmitting}>
Create
</button>
</Form>
<button type="submit" disabled={isSubmitting}>
Create
</button>
</Form>
)}
</>
);
};

2
src/Popup/styles.scss
View File

@@ -7,6 +7,7 @@ body {
}
#popup {
min-height: 300px;
min-width: 250px;
font-size: 1.125em;
text-align: center;
@@ -36,7 +37,6 @@ body {
}
}
#header {
padding: 5px;
display: flex;