Skip to content

/app/pages/common/Modals/PreferencesModal/Badges/index.js 🔨 Refactor 🧠 Overmind Hacktoberfest #2760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 22, 2019
Merged

/app/pages/common/Modals/PreferencesModal/Badges/index.js 🔨 Refactor 🧠 Overmind Hacktoberfest #2760

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
afcba2f
refactored badges to use overmind
Sowmiya07 Oct 13, 2019
0f5f6cf
Update index.js
SaraVieira Oct 19, 2019
853ff6f
Rename index.js to index.tsx
SaraVieira Oct 19, 2019
337f2c7
Update index.tsx
SaraVieira Oct 19, 2019
ad14ff4
Update index.tsx
SaraVieira Oct 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions ...n/Modals/PreferencesModal/Badges/index.js → .../Modals/PreferencesModal/Badges/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import React from 'react';
import { inject, observer } from 'app/componentConnectors';
import React, {FunctionComponent} from 'react';
Copy link
Contributor

@Saeris Saeris Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import React, {FunctionComponent} from 'react';
import React from 'react';

For types we don't need to use named imports, we can just pull it off React

import { useOvermind } from 'app/overmind';

import Margin from '@codesandbox/common/lib/components/spacing/Margin';
import Badge from '@codesandbox/common/lib/utils/badges/Badge';
import { Title } from '../elements';

function BadgesComponent({ store, signals }) {
const badgesCount = store.user.badges.length;
export const Badges: FunctionComponent = () => {
Copy link
Contributor

@Saeris Saeris Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export const Badges: FunctionComponent = () => {
export const Badges: React.FC = () => {

const {
state: {
user: {badges},
Copy link
Contributor

@Saeris Saeris Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
user: {badges},
user: { badges },

eslint --fix should have caught this, not sure why it didn't. Adding spaces for consistency

},
actions: {
preferences: {setBadgeVisibility},
Copy link
Contributor

@Saeris Saeris Oct 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
preferences: {setBadgeVisibility},
preferences: { setBadgeVisibility },

},
} = useOvermind();
const badgesCount = badges.length;

return (
<div>
Expand All @@ -17,12 +25,12 @@ function BadgesComponent({ store, signals }) {
visibility.
</strong>
<Margin top={2}>
{store.user.badges.map(badge => (
{badges.map(badge => (
<Badge
key={badge.id}
tooltip={false}
onClick={b =>
signals.preferences.setBadgeVisibility({
setBadgeVisibility({
...b,
visible: !b.visible,
})
Expand All @@ -37,4 +45,3 @@ function BadgesComponent({ store, signals }) {
);
}

export const Badges = inject('store', 'signals')(observer(BadgesComponent));