refactor code

src/components/WatchFolder/index.tsx

@@ -1,5 +1,4 @@
 import { MappingList } from './mappingList';
-import { NoMappingsContent } from './noMappingsContent';
 import React, { useContext, useEffect, useState } from 'react';
 import { Button, Dialog, DialogContent, Stack } from '@mui/material';
 import watchFolderService from 'services/watchFolder/watchFolderService';
@@ -98,17 +97,10 @@ export default function WatchFolder({ open, onClose }: Iprops) {
                 </DialogTitleWithCloseButton>
                 <DialogContent sx={{ flex: 1 }}>
                     <Stack spacing={1} p={1.5} height={'100%'}>
-                        {mappings.length === 0 ? (
-                            <NoMappingsContent />
-                        ) : (
                         <MappingList
                             mappings={mappings}
-                                handleRemoveWatchMapping={
-                                    handleRemoveWatchMapping
-                                }
+                            handleRemoveWatchMapping={handleRemoveWatchMapping}
                         />
-                        )}
-
                         <Button
                             fullWidth
                             color="accent"

src/components/WatchFolder/mappingList/index.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { WatchMapping } from 'types/watchFolder';
-import { MappingEntry } from './mappingEntry';
-import { MappingsContainer } from './styledComponents';
+import { MappingEntry } from '../mappingEntry';
+import { NoMappingsContent } from './noMappingsContent/noMappingsContent';
+import { MappingsContainer } from '../styledComponents';
 interface Iprops {
     mappings: WatchMapping[];
     handleRemoveWatchMapping: (value: WatchMapping) => void;
 }
 
 export function MappingList({ mappings, handleRemoveWatchMapping }: Iprops) {
-    return (
+    return mappings.length === 0 ? (
+        <NoMappingsContent />
+    ) : (
         <MappingsContainer>
             {mappings.map((mapping) => {
                 return (

src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx

@@ -3,7 +3,7 @@ import { FlexWrapper } from 'components/Container';
 import React from 'react';
 import constants from 'utils/strings/constants';
 import { CheckmarkIcon } from './checkmarkIcon';
-import { NoMappingsContainer } from './styledComponents';
+import { NoMappingsContainer } from '../../styledComponents';
 export function NoMappingsContent() {
     return (
         <NoMappingsContainer>