increase prettier width to 120

.prettierrc

@@ -1,2 +1,3 @@
 trailingComma: "es5"
-singleQuote: true
+singleQuote: true
+printWidth: 120

src/components/AudioTrack/AudioTrack.test.tsx

@@ -6,18 +6,14 @@ describe('the AudioTrack component', () => {
  it('should call the attach method when the component mounts', () => {
  const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
  render(<AudioTrack track={mockTrack} />);
- expect(mockTrack.attach).toHaveBeenCalledWith(
- expect.any(window.HTMLAudioElement)
- );
+ expect(mockTrack.attach).toHaveBeenCalledWith(expect.any(window.HTMLAudioElement));
  expect(mockTrack.detach).not.toHaveBeenCalled();
  });
 
  it('it should call the detach method when the component unmounts', () => {
  const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
  const { unmount } = render(<AudioTrack track={mockTrack} />);
  unmount();
- expect(mockTrack.detach).toHaveBeenCalledWith(
- expect.any(window.HTMLAudioElement)
- );
+ expect(mockTrack.detach).toHaveBeenCalledWith(expect.any(window.HTMLAudioElement));
  });
 });

src/components/LocalVideoPreview/LocalVideoPreview.test.tsx

@@ -21,9 +21,7 @@ describe('the LocalVideoPreview component', () => {
  it('should render null when there are no "camera" tracks', () => {
  mockedVideoContext.mockImplementation(() => {
  return {
- localTracks: [
- { name: 'microphone', attach: jest.fn(), detach: jest.fn() },
- ],
+ localTracks: [{ name: 'microphone', attach: jest.fn(), detach: jest.fn() }],
  } as any;
  });
  const { container } = render(<LocalVideoPreview />);

src/components/LocalVideoPreview/LocalVideoPreview.tsx

@@ -6,9 +6,7 @@ import { useVideoContext } from '../../hooks/context';
 export default function LocalVideoPreview() {
  const { localTracks } = useVideoContext();
 
- const videoTrack = localTracks.find(
- track => track.name === 'camera'
- ) as IVideoTrack;
+ const videoTrack = localTracks.find(track => track.name === 'camera') as IVideoTrack;
 
  return videoTrack ? <VideoTrack track={videoTrack} isLocal /> : null;
 }

src/components/Menu/Menu.test.tsx

@@ -16,36 +16,28 @@ const mockedUseVideoContext = useVideoContext as jest.Mock<IVideoContext>;
 describe('the Menu component', () => {
  it('should hide inputs when connected to a room', () => {
  mockedUseRoomState.mockImplementation(() => 'connected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { container } = render(<Menu />);
  expect(container.querySelector('input')).toEqual(null);
  });
 
  it('should display inputs when disconnected from a room', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { container } = render(<Menu />);
  expect(container.querySelectorAll('input').length).toEqual(2);
  });
 
  it('should display a loading spinner when connecting to a room', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: true } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: true } as any));
  const { container } = render(<Menu />);
  expect(container.querySelector('svg')).not.toBeNull();
  });
 
  it('should disable the Join Room button when the Name input or Room input are empty', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { getByLabelText, getByRole } = render(<Menu />);
  expect(getByRole('button').getAttribute('disabled')).toEqual('');
  fireEvent.change(getByLabelText('Name'), { target: { value: 'Foo' } });
@@ -57,9 +49,7 @@ describe('the Menu component', () => {
 
  it('should enable the Join Room button when the Name input and Room input are not empty', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { getByLabelText, getByRole } = render(<Menu />);
  fireEvent.change(getByLabelText('Name'), { target: { value: 'Foo' } });
  fireEvent.change(getByLabelText('Room'), { target: { value: 'Foo' } });
@@ -68,9 +58,7 @@ describe('the Menu component', () => {
 
  it('should disable the Join Room button when connecting to a room', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: true } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: true } as any));
  const { getByLabelText, getByRole } = render(<Menu />);
  fireEvent.change(getByLabelText('Name'), { target: { value: 'Foo' } });
  fireEvent.change(getByLabelText('Room'), { target: { value: 'Foo' } });
@@ -79,9 +67,7 @@ describe('the Menu component', () => {
 
  it('should dispatch a redux action when the Join Room button is clicked', () => {
  mockedUseRoomState.mockImplementation(() => 'disconnected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { getByLabelText, getByRole } = render(<Menu />);
  fireEvent.change(getByLabelText('Name'), { target: { value: 'Username' } });
  fireEvent.change(getByLabelText('Room'), { target: { value: 'Roomname' } });
@@ -91,9 +77,7 @@ describe('the Menu component', () => {
 
  it('should dispatch a redux action when the Leave Room button is clicked', () => {
  mockedUseRoomState.mockImplementation(() => 'connected');
- mockedUseVideoContext.mockImplementation(
- () => ({ isConnecting: false } as any)
- );
+ mockedUseVideoContext.mockImplementation(() => ({ isConnecting: false } as any));
  const { getByRole } = render(<Menu />);
  fireEvent.click(getByRole('button'));
  expect(receiveToken).toHaveBeenCalledWith('');

src/components/Menu/Menu.tsx

@@ -72,12 +72,7 @@ export default function Menu() {
  onChange={handleRoomNameChange}
  margin="dense"
  />
- <Button
- type="submit"
- color="primary"
- variant="contained"
- disabled={isConnecting || !name || !roomName}
- >
+ <Button type="submit" color="primary" variant="contained" disabled={isConnecting || !name || !roomName}>
  Join Room
  </Button>
  {isConnecting && <CircularProgress></CircularProgress>}

src/components/NewtorkQualityLevel/NetworkQualityLevel.test.tsx

@@ -4,23 +4,17 @@ import NetworkQualityLevel from './NetworkQualityLevel';
 
 describe('the NetworkQualityLevel component', () => {
  it('should render correctly for level 5', () => {
- const tree = renderer
- .create(<NetworkQualityLevel qualityLevel={5} />)
- .toJSON();
+ const tree = renderer.create(<NetworkQualityLevel qualityLevel={5} />).toJSON();
  expect(tree).toMatchSnapshot();
  });
 
  it('should render correctly for level 3', () => {
- const tree = renderer
- .create(<NetworkQualityLevel qualityLevel={3} />)
- .toJSON();
+ const tree = renderer.create(<NetworkQualityLevel qualityLevel={3} />).toJSON();
  expect(tree).toMatchSnapshot();
  });
 
  it('should render correctly for level 0', () => {
- const tree = renderer
- .create(<NetworkQualityLevel qualityLevel={0} />)
- .toJSON();
+ const tree = renderer.create(<NetworkQualityLevel qualityLevel={0} />).toJSON();
  expect(tree).toMatchSnapshot();
  });
 });

src/components/NewtorkQualityLevel/NetworkQualityLevel.tsx

@@ -16,11 +16,7 @@ const Container = styled('div')({
 
 const STEP = 3;
 
-export default function NetworkQualityLevel({
- qualityLevel,
-}: {
- qualityLevel: number | null;
-}) {
+export default function NetworkQualityLevel({ qualityLevel }: { qualityLevel: number | null }) {
  if (qualityLevel === null) return null;
  return (
  <Container>

src/components/Participant/Participant.tsx

@@ -8,16 +8,10 @@ interface ParticipantProps {
  disableAudio?: boolean;
 }
 
-export default function Participant({
- participant,
- disableAudio,
-}: ParticipantProps) {
+export default function Participant({ participant, disableAudio }: ParticipantProps) {
  return (
  <ParticipantInfo participant={participant}>
- <ParticipantTracks
- participant={participant}
- disableAudio={disableAudio}
- />
+ <ParticipantTracks participant={participant} disableAudio={disableAudio} />
  </ParticipantInfo>
  );
 }

src/components/ParticipantInfo/ParticipantInfo.test.tsx

@@ -3,10 +3,7 @@ import ParticipantInfo from './ParticipantInfo';
 import { shallow } from 'enzyme';
 import usePublications from '../../hooks/usePublications/usePublications';
 
-jest.mock(
- '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel',
- () => () => 4
-);
+jest.mock('../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel', () => () => 4);
 
 jest.mock('../../hooks/usePublications/usePublications');
 const mockUsePublications = usePublications as jest.Mock<any>;
@@ -15,45 +12,31 @@ describe('the ParticipantInfo component', () => {
  it('should render correctly', () => {
  mockUsePublications.mockImplementation(() => []);
  const wrapper = shallow(
- <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
- mock children
- </ParticipantInfo>
+ <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</ParticipantInfo>
  );
  expect(wrapper).toMatchSnapshot();
  });
 
  it('should display MicOff icon when microphone is disabled', () => {
- mockUsePublications.mockImplementation(() => [
- { trackName: 'microphone', isTrackEnabled: false },
- ]);
+ mockUsePublications.mockImplementation(() => [{ trackName: 'microphone', isTrackEnabled: false }]);
  const wrapper = shallow(
- <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
- mock children
- </ParticipantInfo>
+ <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</ParticipantInfo>
  );
  expect(wrapper.find('MicOffIcon').exists()).toEqual(true);
  });
 
  it('should not display MicOff icon when microphone is enabled', () => {
- mockUsePublications.mockImplementation(() => [
- { trackName: 'microphone', isTrackEnabled: true },
- ]);
+ mockUsePublications.mockImplementation(() => [{ trackName: 'microphone', isTrackEnabled: true }]);
  const wrapper = shallow(
- <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
- mock children
- </ParticipantInfo>
+ <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</ParticipantInfo>
  );
  expect(wrapper.find('MicOffIcon').exists()).toEqual(false);
  });
 
  it('should add hideVideoProp to InfoContainer component when video is disabled', () => {
- mockUsePublications.mockImplementation(() => [
- { trackName: 'camera', isTrackEnabled: false },
- ]);
+ mockUsePublications.mockImplementation(() => [{ trackName: 'camera', isTrackEnabled: false }]);
  const wrapper = shallow(
- <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
- mock children
- </ParticipantInfo>
+ <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</ParticipantInfo>
  );
  expect(
  wrapper
@@ -64,13 +47,9 @@ describe('the ParticipantInfo component', () => {
  });
 
  it('should not add hideVideoProp to InfoContainer component when video is enabled', () => {
- mockUsePublications.mockImplementation(() => [
- { trackName: 'camera', isTrackEnabled: true },
- ]);
+ mockUsePublications.mockImplementation(() => [{ trackName: 'camera', isTrackEnabled: true }]);
  const wrapper = shallow(
- <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
- mock children
- </ParticipantInfo>
+ <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>mock children</ParticipantInfo>
  );
  expect(
  wrapper

src/components/ParticipantInfo/ParticipantInfo.tsx

@@ -20,8 +20,7 @@ const InfoContainer = styled('div')({
  height: '100%',
  padding: '0.4em',
  width: '100%',
- background: ({ hideVideo }: { hideVideo?: boolean }) =>
- hideVideo ? 'black' : 'transparent',
+ background: ({ hideVideo }: { hideVideo?: boolean }) => (hideVideo ? 'black' : 'transparent'),
 });
 
 const Identity = styled('h4')({
@@ -40,18 +39,11 @@ interface ParticipantInfoProps {
  children: React.ReactNode;
 }
 
-export default function ParticipantInfo({
- participant,
- children,
-}: ParticipantInfoProps) {
+export default function ParticipantInfo({ participant, children }: ParticipantInfoProps) {
  const networkQualityLevel = useParticipantNetworkQualityLevel(participant);
  const publications = usePublications(participant);
- const isAudioEnabled = usePublicationIsTrackEnabled(
- publications.find(p => p.trackName === 'microphone')
- );
- const isVideoEnabled = usePublicationIsTrackEnabled(
- publications.find(p => p.trackName === 'camera')
- );
+ const isAudioEnabled = usePublicationIsTrackEnabled(publications.find(p => p.trackName === 'microphone'));
+ const isVideoEnabled = usePublicationIsTrackEnabled(publications.find(p => p.trackName === 'camera'));
 
  return (
  <Container>

src/components/ParticipantTracks/ParticipantTracks.test.tsx

@@ -4,19 +4,15 @@ import usePublications from '../../hooks/usePublications/usePublications';
 import { shallow } from 'enzyme';
 import { useVideoContext } from '../../hooks/context';
 
-jest.mock('../../hooks/usePublications/usePublications', () =>
- jest.fn(() => [{ trackSid: 0 }, { trackSid: 1 }])
-);
+jest.mock('../../hooks/usePublications/usePublications', () => jest.fn(() => [{ trackSid: 0 }, { trackSid: 1 }]));
 jest.mock('../../hooks/context');
 
 const mockUseVideoContext = useVideoContext as jest.Mock<any>;
 
 describe('the ParticipantTracks component', () => {
  it('should render an array of publications', () => {
  mockUseVideoContext.mockImplementation(() => ({ room: {} }));
- const wrapper = shallow(
- <ParticipantTracks participant={'mockParticipant' as any} />
- );
+ const wrapper = shallow(<ParticipantTracks participant={'mockParticipant' as any} />);
  expect(usePublications).toHaveBeenCalledWith('mockParticipant');
  expect(wrapper).toMatchSnapshot();
  });
@@ -25,9 +21,7 @@ describe('the ParticipantTracks component', () => {
  mockUseVideoContext.mockImplementation(() => ({
  room: { localParticipant: 'mockParticipant' },
  }));
- const wrapper = shallow(
- <ParticipantTracks participant={'mockParticipant' as any} />
- );
+ const wrapper = shallow(<ParticipantTracks participant={'mockParticipant' as any} />);
  expect(
  wrapper
  .find('Publication')

src/components/ParticipantTracks/ParticipantTracks.tsx

@@ -9,10 +9,7 @@ interface ParticipantTracksProps {
  disableAudio?: boolean;
 }
 
-export default function ParticipantTracks({
- participant,
- disableAudio,
-}: ParticipantTracksProps) {
+export default function ParticipantTracks({ participant, disableAudio }: ParticipantTracksProps) {
  const { room } = useVideoContext();
  const publications = usePublications(participant);
  const isLocal = participant === room.localParticipant;