[DO NOT MERGE] [WIP] reply-to-tweet-II

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tweries-app",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "private": true,
   "description": "Tweries, a tweet-storm-helper app that breaks up a long paragraph into multiple tweets.",
   "dependencies": {

src/components/Footer/__snapshots__/Footer.test.js.snap

@@ -38,7 +38,7 @@ exports[`Footer to match snapshot 1`] = `
        v
       1.0.0-beta.1
        © 
-      2020
+      2022
     </p>
   </footer>
 </div>

src/components/Form/Form.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { MAX_LENGTH } from '../../constants';
+import ReplyToTweet from '../../containers/ReplyToTweet/ReplyToTweet';
 import Counter from '../Counter/Counter';
-import ReplyToTweet from '../ReplyToTweet/ReplyToTweet';
 import Textarea from '../Textarea/Textarea';
 import TweetstormButton from '../TweetstormButton/TweetstormButton';
 

src/components/Form/Form.test.js

@@ -1,11 +1,11 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import ReplyToTweet from '../ReplyToTweet/ReplyToTweet';
+import ReplyToTweet from '../../containers/ReplyToTweet/ReplyToTweet';
 import TweetstormButton from '../TweetstormButton/TweetstormButton';
 import Form from './Form';
 
-jest.mock('../../components/ReplyToTweet/ReplyToTweet');
-jest.mock('../../components/TweetstormButton/TweetstormButton');
+jest.mock('../../containers/ReplyToTweet/ReplyToTweet');
+jest.mock('../TweetstormButton/TweetstormButton');
 
 describe('<Form />', () => {
   beforeEach(() => {

src/containers/Playground/Playground.css

@@ -0,0 +1,10 @@
+.Playground {
+  display: flex;
+  flex-direction: column;
+  margin: 32px;
+  width: 512px;
+}
+
+.Playground pre {
+  margin-top: 32px;
+}

src/containers/Playground/Playground.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useAuth0 } from '../../react-auth0-wrapper';
+import ReplyToTweet from '../ReplyToTweet/ReplyToTweet';
+import './Playground.css';
+
+function Playground() {
+  const { user } = useAuth0();
+
+  const tweetUrl = 'https://twitter.com/mattiaerre/status/1256370963622629376';
+
+  return (
+    <div className="Playground">
+      {user ? (
+        <>
+          <ReplyToTweet
+            callback={console.log}
+            onChange={console.log}
+            tweetUrl={tweetUrl}
+            userId={user.sub}
+          />
+          <pre>userId: {user.sub}</pre>
+        </>
+      ) : (
+        <span>Loading user ...</span>
+      )}
+    </div>
+  );
+}
+
+export default Playground;

src/components/ReplyToTweet/ReplyToTweet.js → src/containers/ReplyToTweet/ReplyToTweet.js

@@ -6,11 +6,9 @@ import fetchTweet from '../../api/fetchTweet';
 const copy = {
   'If you want to reply to a specific Tweet:':
     'If you want to reply to a specific Tweet:',
-  'Optional: reply to Tweet URL': 'Optional: reply to Tweet URL',
   'URL goes here': 'URL goes here'
 };
 
-// TODO: move to containers
 function ReplyToTweet({ callback, onChange, tweetUrl, userId }) {
   const [isValidTweet, setIsValidTweet] = useState(false);
   const [waiting, setWaiting] = useState(false);

src/index.js

@@ -7,6 +7,7 @@ import './styles.css';
 import config from './auth_config.json';
 import { AMPLITUDE_KEY } from './constants';
 import App from './containers/App/App';
+import Playground from './containers/Playground/Playground';
 import features from './features';
 import initializeReactGA from './initializeReactGA';
 import { Auth0Provider } from './react-auth0-wrapper';
@@ -28,6 +29,8 @@ function onRedirectCallback(appState) {
   );
 }
 
+const { REACT_APP_PLAYGROUND } = process.env;
+
 render(
   <Auth0Provider
     client_id={config.clientId}
@@ -42,10 +45,14 @@ render(
       <Amplitude>
         {({ logEvent }) => (
           <FeatureProvider features={features}>
-            <App
-              initialState={makeInitialState({ feature })}
-              reducer={augment({ logEvent, reducer: makeReducer(feature) })}
-            />
+            {REACT_APP_PLAYGROUND === 'on' ? (
+              <Playground />
+            ) : (
+              <App
+                initialState={makeInitialState({ feature })}
+                reducer={augment({ logEvent, reducer: makeReducer(feature) })}
+              />
+            )}
           </FeatureProvider>
         )}
       </Amplitude>