gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(client): loader to TypeScript

Browse Source
This commit is contained in:
Marlon Johnson
2021-06-20 10:28:45 -07:00
parent fcfd949abc
commit cc8af262bc
5 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/client-only-routes/ShowProfileOrFourOhFour.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import Loader from '../components/helpers/Loader'; import Loader from '../components/helpers/loader';
import { import {
userByNameSelector, userByNameSelector,
userProfileFetchStateSelector, userProfileFetchStateSelector,

2
client/src/components/helpers/index.js
View File

@ -1,7 +1,7 @@
export { default as ButtonSpacer } from './ButtonSpacer'; export { default as ButtonSpacer } from './ButtonSpacer';
export { default as FullWidthRow } from './FullWidthRow'; export { default as FullWidthRow } from './FullWidthRow';
export { default as SlimWidthRow } from './slim-width-row'; export { default as SlimWidthRow } from './slim-width-row';
export { default as Loader } from './Loader'; export { default as Loader } from './loader';
export { default as SkeletonSprite } from './skeleton-sprite'; export { default as SkeletonSprite } from './skeleton-sprite';
export { default as Spacer } from './spacer'; export { default as Spacer } from './spacer';
export { default as Link } from './Link'; export { default as Link } from './Link';

2
client/src/components/helpers/loader.test.tsx
View File

@ -2,7 +2,7 @@
import React from 'react'; import React from 'react';
import { render, cleanup } from '@testing-library/react'; import { render, cleanup } from '@testing-library/react';
import Loader from './Loader'; import Loader from './loader';
describe('<Loader />', () => { describe('<Loader />', () => {
afterEach(cleanup); afterEach(cleanup);

13
client/src/components/helpers/loader.tsx
View File

@ -1,13 +1,16 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Spinner from 'react-spinkit'; import Spinner from 'react-spinkit';
import './loader.css'; import './loader.css';
function Loader({ fullScreen, timeout }) { interface LoaderProps {
fullScreen?: boolean;
timeout?: number;
}
function Loader({ fullScreen, timeout }: LoaderProps): JSX.Element {
const [showSpinner, setShowSpinner] = useState(!timeout); const [showSpinner, setShowSpinner] = useState(!timeout);
useEffect(() => { useEffect(() => {
let timerId; let timerId: ReturnType<typeof setTimeout>;
if (!showSpinner) { if (!showSpinner) {
timerId = setTimeout(() => setShowSpinner(true), timeout); timerId = setTimeout(() => setShowSpinner(true), timeout);
} }
@ -21,9 +24,5 @@ function Loader({ fullScreen, timeout }) {
} }
Loader.displayName = 'Loader'; Loader.displayName = 'Loader';
Loader.propTypes = {
fullScreen: PropTypes.bool,
timeout: PropTypes.number
};
export default Loader; export default Loader;

2
client/src/templates/Challenges/video/Show.js
View File

@ -20,7 +20,7 @@ import ChallengeDescription from '../components/Challenge-Description';
import Spacer from '../../../components/helpers/spacer'; import Spacer from '../../../components/helpers/spacer';
import CompletionModal from '../components/CompletionModal'; import CompletionModal from '../components/CompletionModal';
import Hotkeys from '../components/Hotkeys'; import Hotkeys from '../components/Hotkeys';
import Loader from '../../../components/helpers/Loader'; import Loader from '../../../components/helpers/loader';
import { import {
isChallengeCompletedSelector, isChallengeCompletedSelector,
challengeMounted, challengeMounted,