Remove use of default props (#4118)

* refactor: replace defaultProps with function parameters in Modal, Statusbar, ChatContainer, and CrossfadeImage components

* New commit for Default properties of React components after syncing fork and rebasing

* fix: fix linter warning

---------

Co-authored-by: swarup <swarupnarkhede999@gmail.com>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "owncast",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -79,8 +79,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   usernameToHighlight,
   chatUserId,
   isModerator,
-  showInput,
+  showInput = true,
-  height,
+  height = 'auto',
   chatAvailable: chatEnabled,
   desktop,
   focusInput = true,
@@ -377,8 +377,3 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     </ErrorBoundary>
   );
 };
-
-ChatContainer.defaultProps = {
-  showInput: true,
-  height: 'auto',
-};

web/components/ui/CrossfadeImage/CrossfadeImage.tsx

@@ -21,8 +21,8 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
   src = '',
   width,
   height,
-  objectFit = 'fill',
+  objectFit = 'fill', // default value for objectFit
-  duration = '1s',
+  duration = '3s', // default value for duration
   className,
 }) => {
   const spanStyle: React.CSSProperties = useMemo(
@@ -70,8 +70,3 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
     </span>
   );
 };
-
-CrossfadeImage.defaultProps = {
-  objectFit: 'fill',
-  duration: '3s',
-};

web/components/ui/Modal/Modal.tsx

@@ -18,14 +18,14 @@ export type ModalProps = {
 
 export const Modal: FC<ModalProps> = ({
   title,
-  url,
+  url = undefined,
   open,
-  handleOk,
+  handleOk = undefined,
-  handleCancel,
+  handleCancel = undefined,
-  afterClose,
+  afterClose = undefined,
   height,
   width,
-  children,
+  children = undefined,
 }) => {
   const [loading, setLoading] = useState(!!url);
 

web/components/ui/Statusbar/Statusbar.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import styles from './Statusbar.module.scss';
 
 // Lazy loaded components
-
 const EyeFilled = dynamic(() => import('@ant-design/icons/EyeFilled'), {
   ssr: false,
 });
@@ -40,8 +39,8 @@ function makeDurationString(lastConnectTime: Date): string {
 
 export const Statusbar: FC<StatusbarProps> = ({
   online,
-  lastConnectTime,
+  lastConnectTime = null,
-  lastDisconnectTime,
+  lastDisconnectTime = null,
   viewerCount,
   className,
 }) => {
@@ -84,8 +83,3 @@ export const Statusbar: FC<StatusbarProps> = ({
     </div>
   );
 };
-
-Statusbar.defaultProps = {
-  lastConnectTime: null,
-  lastDisconnectTime: null,
-};