Getting rid of default exports 💡

[divyanshu-rawat]

Is your feature request related to a problem? Please describe.
Currently we are exporting some components as default & some components as const.

Describe the solution you'd like
Now we plant to completely get rid of default export at all, reason being are stated in the blog attached in additional context.

Describe alternatives you've considered
N.A

Additional context
https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

[divyanshu-rawat]

I will soon create a PR for some components then anyone who is willing to take up this issue can follow the same process. cc - @Paarmita , @gittysachin , @Marvin9

[divyanshu-rawat]

To ensure better dev experience if we are exporting a single component out of directory then we will name the file that is exporting the component as index.tsx instead of naming it as a name of the component.

[Marvin9]

Agreed.
What should be our approach on components with error boundries? Should be stick with export default there?

[divyanshu-rawat]

example of exporting const with HOC.

I am updating the PR.

import React from 'react';
import {Link} from 'react-router-dom';
import {Container, Paragraph, TopSection, BottomSection} from '../styles';
import {Button} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons';
import {withErrorBoundary} from '../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary';

export const GetStarted: React.FunctionComponent = withErrorBoundary(() => (
  <Container>
    <TopSection>
      <Paragraph>
        Get started for free - join thousands of students and researchers
        already using Ignitus to share their knowledge, work together, and get
        amazing opportunites.
      </Paragraph>
    </TopSection>
    <BottomSection>
      <Link to="/Signup">
        <Button category="orange" size="large">
          Sign-Up
        </Button>
      </Link>
    </BottomSection>
  </Container>
));

[divyanshu-rawat]

We will be exporting everything as const. what do you say @Marvin9 ?

[divyanshu-rawat]

I am also deleting selectors, sagas, actionTypes etc in those file that will never be calling any server endpoint, I will pushing major cleanup in develop soon.

[Marvin9]

I strongly agree with migration to export const.

[divyanshu-rawat]

Great 👍

[divyanshu-rawat]

export const along with index.tsx/index-ts inside Components directory, instead of creating 2 files one for exporting the other, I will be sending PR soon for some components.

[Marvin9]

Sure. Do we need migrate slowly? Or in one PR.

[divyanshu-rawat]

I will migrate some then you can pick up some :)

[Marvin9]

@divyanshu-rawat

By wrapping component in withErrorBoundry, props definitions are being untracked.

export const Login: React.FC<LogInProps> = withErrorBoundary(({ logInRequest, studentLoginData, clearPreviousLogin }) => {

Solution could be

export const Login: React.FC = withErrorBoundary(({ logInRequest, studentLoginData, clearPreviousLogin }: LogInProps) => {

However I think It will become cluttered. What do you think?

[divyanshu-rawat]

@Marvin9 So it is the question of code readability right ? or props definitions are being untracked are causing any trouble to typescript complier.

[Marvin9]

Code readability. I would prefer components defined as Component: React.FC<Props>

[Paarmita]

Changed all default exports to constants

[Dishebh]

@divyanshu-rawat can I take up the issue, if it is available under gssoc?

[github-actions]

Stale issue message