Coder Social home page Coder Social logo

react-tweet's Issues

A ton of warnings in the console

Firstly, thanks a lot for this package. It's exactly what we were looking for, saved us hours and hours of work. 👍

I'm seeing a ton of warnings with react 0.15 like so:

warning.js:44 Warning: a button tag (owner: unknown) was passed a numeric string value for CSS property margin (value: 0) which will be treated as a unitless number in a future version of React.

Is it a compatibility issue with 0.15?

TypeError: null is not an object (evaluating 'o._currentElement')

I'm getting the above error when trying to render a tweet out and despite searching for an answer for the past few hours I can't figure out why.

The tweet I'm using is 887654816507408384.

Here is my package.json:

{
  "name": "Tweet Music",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.9.0",
    "dropbox": "^2.5.5",
    "express": "^4.15.3",
    "he": "^1.1.1",
    "history": "^2.0.0",
    "jquery": "^3.1.1",
    "jwt-decode": "^2.1.0",
    "moment": "^2.15.1",
    "react": "^15.3.2",
    "react-addons-shallow-compare": "^15.3.2",
    "react-bootstrap": "^0.30.5",
    "react-bootstrap-date-picker": "^3.7.0",
    "react-bootstrap-table": "^2.5.5",
    "react-dates": "^3.3.1",
    "react-datetime": "^2.6.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.5.2",
    "react-select": "^1.0.0-rc.5",
    "react-tinymce": "^0.5.1",
    "react-toggle": "^2.1.1",
    "react-toggle-switch": "^2.1.2",
    "react-tweet": "^1.1.1",
    "redux": "^3.5.2",
    "redux-persist": "^4.0.0-alpha5",
    "socket.io": "^2.0.3",
    "socket.io-client": "^2.0.3",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.11.0",
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-clean-css": "^3.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^3.3.0",
    "webpack-dev-middleware": "^1.8.4",
    "webpack-dev-server": "^2.5.1",
    "webpack-hot-middleware": "^2.13.0",
    "webpack-stream": "^3.2.0"
  }
}

Inline styles not working as expected

Ex: font-family: "font-size:14px;line-height:18px;list-style-image:none;list-style-position:outisde;list-style-type:none;padding:9px 12px;position:relative;text-align:start;

http://i.imgur.com/qJDoNgP.jpg
http://i.imgur.com/8pzMghH.png

import * as React from "react"
import * as Tweet from 'react-tweet'
import styles from './styles'
import {getData} from '../fetch'

export default class extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            tweets:getData().twitter
        }
    }
    render() {
        return(
            <div style={styles.backgroundColorNine}>
                <div style={styles.background}>
                    <div style={styles.tweetContainer}>
                        {
                            this.state.tweets.map( (item:any, i:number) => {
                                return <div style={styles.tweet}>
                                    <Tweet data={item} />
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

Another thing, import Tweet from 'react-tweet' wasn't working, that's why the * is in there. May be a versioning diff? Node -v v6.5.0


  "dependencies": {
    "body-parser": "^1.15.2",
    "compression": "^1.6.2",
    "concurrently": "^2.1.0",
    "css-loader": "^0.23.1",
    "del": "^2.2.1",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "fs": "0.0.2",
    "html-minifier": "^3.0.3",
    "mysql": "^2.11.1",
    "node-sass": "^3.8.0",
    "nodemon": "^1.9.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.4.1",
    "readline": "^1.3.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "twitter-js-client": "0.0.5",
    "typescript": "^1.8.10",
    "typings": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }

Typescript keeps throwing
Cannot find module 'react-tweet'.

Text getting appended in the DOM more than once

When iterating on a twitter api v1.1 search result, I am doing a map on the array to render <Tweet />.

I use uuid/v4 to generate unique key, after trying multiple over solution.

No matter what I do, I get the text appended multiple times in the dom randomly.

I have checked the data, everything fines, there's a bug in here.

TypeError: Cannot read property 'forEach' of undefined

Apparently the free streaming API sometimes gives me tweets that have an entities prop that doesn't have a urls prop, causing react-tweet to crash my app with TypeError: Cannot read property 'forEach' of undefined because of line 86 in Text.js:

// remove any quote links
if (entities && data.quoted_status) {
          entities.urls.forEach(function(u) {

Simple fix: Change to:
if (entities && entities.urls && data.quoted_status) {

Build error

With the recent changes in build process, I get the following error output after running npm install on a fresh clone of the master branch:

$ npm install
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN prepublish-on-install As of npm@5, `prepublish` scripts are deprecated.
npm WARN prepublish-on-install Use `prepare` for build steps and `prepublishOnly` for upload-only.
npm WARN prepublish-on-install See the deprecation note in `npm help scripts` for more information.

> [email protected] prepublish /home/fabi/github/react-tweet
> npm run build:js


> [email protected] build:js /home/fabi/github/react-tweet
> babel --plugins transform-runtime ./src/components -d ./lib

SyntaxError: src/components/Tweet/Context.js: Unexpected token (10:6)
   8 | 
   9 |     return (
> 10 |       <div className="context" style={styles.context}>
     |       ^
  11 |         <div className="tweet-context">
  12 |           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72" style={styles.IconContext}>
  13 |             <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z"/>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:js: `babel --plugins transform-runtime ./src/components -d ./lib`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/fabi/.npm/_logs/2018-01-21T22_02_16_701Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prepublish: `npm run build:js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Forking and changing the footer

I assume there is no problem in making a fork of this and adding a new icon to the footer? I am making a Twitter app where I need a new icon in the footer.

Could you please explain what the 4th div in the Footer.js render is doing? Is it a placeholder? Can I just add something here or does it do something in rare cases? In the example app it is empty.

This one:

<div className="ProfileTweet-action" style={styles.ProfileTweetAction}> <button className="ProfileTweet-actionButton" style={styles.ProfileTweetActionBtn}> <div className="IconContainer" style={styles.IconContainer}> <span className="Icon Icon--more" style={styles.Icon} /> </div> </button> </div>

Add support for displaying threads

The twitter api does not directly support threads. We can still infer the start, end, and membership of a thread from the in_reply_to_status_id field. While displaying tweets it might be beneficial to indicate that they are part of a thread.

Here is how I would like to implement this:-

To mimic's Twitter desktops implementation of thread display we would need to add a pseudo div after the user avatar for adding a bar. The tweet data will have following boolean fields
isThreadStart, isThreadMember and isThreadEnd

Can't resolve './lib/Tweet/Tweet'

During the fall I was using the react-tweet library for a project with no problems. After coming back to it, I am now getting this error when trying to compile my React webpage:

ERROR in ./~/react-tweet/index.js
Module not found: Error: Can't resolve './lib/Tweet/Tweet'

Something seems to have changed since November which broke this for me

Add option to autoplay videos

Currently animated GIFs are autoplayed but videos do not have a option to be autoplayed. Please add a prop to autoplay (or not ) videos

Unsupported style property margin-top. Did you mean marginTop?

Hi, I am just testing out your module and I have the following in my console:

Warning: Unsupported style property margin-top. Did you mean marginTop?
    in div (created by Header)
    in a (created by Header)
    in div (created by Header)
    in Header (created by Tweet)
    in div (created by Tweet)
    in div (created by Tweet)
    in Tweet (at TwitterPreviewField.js:22)

Use profile_image_url_https instead of http

Hi, thanks so much for your work. I've seen you are retrieving this field profile_image_url_https instead of profile_image_url to draw profile picture on Tweet component.

I've got some errors on my website which is loaded through https when it loads a tweet from an account it gets the http url.

Could react be a peerDependency?

I was checking out package.json and noticed that react is a dependency, so now my node_modules folder has 2 copies of react, your 0.14 version and my main 0.15 version.

Would it be possible to switch react to being a peerDependency instead? My npm packaging fu is not strong enough to say outright that it is possible, maybe it has other implications. I've seen quite a few packages using this approach with react, so I guess it is possible somehow, just not sure how much work is involved in getting there...

Prettify all the code (ie run prettier)

I followed this blogpost to run prettier on this repo.

This was the command I used to run prettier

git filter-branch -f --tree-filter '\
    prettier --single-quote   \
    --trailing-comma es5 \
    --print-width=100 --write "**/**.js" || \
    echo “Error formatting, possibly invalid JS“' -- --all

I pushed the branch with the rewritted git history to my repo

https://github.com/sudarshang/react-tweet/tree/prettify

Would you be interested in doing a force merge of that branch? I don't have any strong opinions about prettier options. If you want to use another set of options that would be totally fine with me. Since I started with prettier working without automated code formatting has become very difficult for me.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.