Skip to content

Refactor SSEDownNotice to use hooks #1965

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 1 commit into from
May 27, 2019
Merged

Refactor SSEDownNotice to use hooks #1965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 12 additions & 10 deletions ...x/Editor/Workspace/SSEDownNotice/index.js → ...Workspace/SSEDownNotice/SSEDownNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React from 'react';
import { observer, inject } from 'mobx-react';
import getTemplate from '@codesandbox/common/lib/templates';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStore } from 'app/store';

import { Container } from './elements';

const ConnectionNotice = ({ store }) => {
export const SSEDownNotice = observer(() => {
const store = useStore();
Copy link
Contributor Author

@MichaelDeBoey MichaelDeBoey May 23, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

@Saeris I think you should destructur store just like you did in the other files

Suggested change
const store = useStore();
const {
editor: { currentSandbox: { template } },
server: { status },
} = useStore();


const templateDef = getTemplate(store.editor.currentSandbox.template);
if (!templateDef.isServer) {
return null;
Expand All @@ -18,9 +22,9 @@ const ConnectionNotice = ({ store }) => {
<Container>
<p
style={{
fontWeight: 700,
color: 'white',
color: '#FFFFFF',
fontSize: '.875rem',
fontWeight: 700,
marginTop: 0,
}}
>
Expand All @@ -35,17 +39,15 @@ const ConnectionNotice = ({ store }) => {
{"'"}t resolved with in a minute it would greatly help us if you could
let us know on{' '}
<a
style={{ color: 'white' }}
href="https://spectrum.chat/codesandbox"
target="_blank"
rel="noopener noreferrer"
style={{ color: '#FFFFFF' }}
target="_blank"
>
Spectrum
</a>
.
</p>
</Container>
);
};

export default inject('store')(observer(ConnectionNotice));
});
10 changes: 0 additions & 10 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/elements.js
View file
Open in desktop

This file was deleted.

12 changes: 12 additions & 0 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/elements.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled, { css } from 'styled-components';

export const Container = styled.div`
${({ theme }) => css`
background-color: ${theme.secondary};
color: rgba(255, 255, 255, 0.9);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.4;
padding: 1rem;
`}
`;
1 change: 1 addition & 0 deletions packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { SSEDownNotice } from './SSEDownNotice';
2 changes: 1 addition & 1 deletion packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import ConnectionNotice from './ConnectionNotice';
import Advertisement from './Advertisement';
import WorkspaceItem from './WorkspaceItem';
import Chat from './Chat';
import SSEDownNotice from './SSEDownNotice';
import { SSEDownNotice } from './SSEDownNotice';

import {
Container,
Expand Down