Migration to styled-components

[alejandronanez]

Here's a list based off @andrewda's list for adding unit tests to the app (https://github.com/gitpoint/git-point/issues/518), feel free to add/remove components if you think it's necessary.

For newcomers:

1. Choose the component you want to style
2. Comment here which component you'd like to work on
3. We'll update this list with your name
4. Make sure to include "before" and "after" screenshots in your submitted PR

Loaders

• [x] LoadingListItem (@machour - #790)
• [x] LoadingMembersList (unclaimed)
• [x] LoadingRepositoryListItem (unclaimed)
• [x] LoadingRepositoryProfile (unclaimed)
• [x] LoadingUserListItem (@machour - #791)
• [x] LoadingModal (@machour - #792)

Components

• [ ] IssueListItem (@josenaranjo - #578)
• [ ] RepositoryProfile (@shmesa22 - PR Pending)

Screens

issue

• [ ] EditIssue (unclaimed)
• [ ] IssueSettings (unclaimed)
• [x] NewIssue (unclaimed)
• [ ] PullMerge (unclaimed)

repository

• [ ] IssueList (unclaimed)
• [ ] PullDiff (unclaimed)
• [ ] PullList (unclaimed)
• [ ] ReadMe (unclaimed)
• [ ] RepositoryCodeList (unclaimed)
• [ ] RepositoryFile (unclaimed)
• [x] Repository (@machour - #788)

Done:

• [x] Auth (@ZahraTee - #702)
• [x] Login (@machour - #787)
• [x] Notifications (@ZahraTee - #684)
• [x] Organization (@ZahraTee - #682)
• [x] Search (@Arjun-sna - #710)
• [x] User (@ZahraTee - #683)
• [x] Badge (@jpls93 – #535)
• [x] LoadingContainer (@machour - #782)
• [x] CodeLine (@josenaranjo – #561)
• [x] CommentInput (@shmesa22 – #596)
• [x] CommentListItem (@chinesedfan - #723)
• [x] DiffBlocks (@machour – #692)
• [x] EntityInfo (@MrLoh - #558)
• [x] ImageZoom (@MrLoh - #559)
• [x] InlineLabel (@binkpitch – #544)
• [x] IssueDescription (@josenaranjo - #563)
• [x] IssueEventListItem (@josenaranjo - #564)
• [x] LabelButton (@chinesedfan - #727)
• [x] LabelListItem (@pdong – #509)
• [x] Members (@shmesa22 - #606)
• [x] MentionArea (@binkpitch – #553)
• [x] NotificationIcon (@pdong – #510)
• [x] NotificationListItem (@LeoCp - #610)
• [x] ParallaxScroll (@shmesa22 - #607)
• [x] RepositoryListItem (@apoeco - #605)
• [x] RepositorySectionTitle (Useless component, see #730)
• [x] SectionList (@jamesg1 - #608)
• [x] StateBadge (@rkpasia - #715)
• [x] ViewContainer (@pdong – #508)
• [x] UserListItem (@shmesa22 - #601)
• [x] UserProfile (@chinesedfan – #724)
• [x] SearchBarAndroid (can't be migrated)

[MrLoh]

I could do Button, CommentListItem, EntityInfo. Do you have a guideline how to handle specific styles like buttonStyle on the button rom react-native-elements? styled-components could handle it like like this:

const StyledButton = styled(Button).attrs({
    buttonStyle: props => {
        switch (props.type) {
            case 'primary':
                return {
                    borderColor: '#2e6da4',
                    backgroundColor: '#286090',
                };
            default:
                return {
                    borderColor: '#adadad',
                    backgroundColor: '#e6e6e6',
                };
        }
    },
})``;

or without the switch simply keepin the current types object

[LeoCp]

I'll take NotificationListItem

[jamesg1]

I'll take SectionList please, thanks

[simonhoyos]

I'd like to take Members✌️

[alejandronanez]

Assigned @LeoCp @jamesg1 @shmesa22 Let us know if you have any question. Thanks a lot!

[jamesg1]

Thanks @alejandronanez I do have a few question: how to style ListItem as it has a titleStyle prop? Also for List I'm not sure to to convert it as it is a containerStyle? I also had issues converting topheader as its a flexbox, all of the titles seemed to squish up. Do we need to add anything else for flexbox?

Here is what I've done so far: https://github.com/jamesg1/git-point/commit/51897d2eec33ba4b455cdb76362f9dbdec42b51f

[MrLoh]

That’s pretty much the same question I had. But I never got a response. You can see an idea how to handle such styles though in that question as well as in some of my pull requests.

Generally I think it is a good idea to remove any style related props into the styled components part.

[machour]

@MrLoh the way you did it with styled(ListItem).attrs(/.../)``; was perfect, although there were some non desired effects (see #586).

@jamesg1, I think it's better to not convert ListItem yet, as there's an ongoing issue with react-native-elements: https://github.com/react-native-training/react-native-elements/issues/679

[apoeco]

I will give a shot to RepositoryListItem

[simonhoyos]

I'd like to take RepositoryProfile and ParallaxScroll

[alejandronanez]

Update the list with your names @shmesa22 and @apoeco, thanks for your interest!

[ZahraTee]

I can grab the Organization screen.

[machour]

@ZahraTee assigned to you, thanks!

[ZahraTee]

I can also take the Notifications and User repository list screens while I'm at it :)

It appears Houssein already did the user profile screen and the other user screens don't use Stylesheets.

[markpinero]

I’d like to claim the Issue screen

[andrewda]

@remarks Thanks! Added you!

[ZahraTee]

I'm looking at the Events screen (not listed) for another PR so I can pick that up while I'm there.

Also, all of the User screens that needed migration are done (#665 and #683) so that can be ticked off. \o/

[chinesedfan]

@ZahraTee Updated! The #683 was mismarked as Repository screens.

[ZahraTee]

I can take the rest of the Auth screens.

[Arjun-sna]

Refactored Seach screen #710

[jamesg1]

I can do Repository screen 👍

[rudsberg]

Hey I'm down contributing to you guys! I can do the LoadingRepositoryProfile and IssueSettings

[lex111]

@rudsberg we will be happy about this 🤗

[jglover]

@lex111 back with renewed motivation for Hacktoberfest again. I'm happy to take a couple of those issues to convert issue screens to styled components 👍

[lex111]

@jglover hi, look forward to your PRs!

[Chandrasekar-G]

Hi, I'd like to work on LoadingRepositoryProfile :)

[kimuradev]

I guess this list is not up-to-date. I'm searching for those pending components and all of them are styled. Is possible to update this list? :)

[chinesedfan]

@kimuradev Updated. Pick as you wish.