Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Mar 29 19:06
    yash-thakur opened #178
  • Mar 29 13:40

    greenkeeper[bot] on cloudinary-1.21.0

    (compare)

  • Mar 29 13:39

    greenkeeper[bot] on cloudinary-1.21.0

    chore(package): update cloudina… chore(package): update lockfile… (compare)

  • Mar 28 20:21

    greenkeeper[bot] on @types

    (compare)

  • Mar 28 20:20

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Mar 27 19:38
    x5engine commented #128
  • Mar 27 08:29
    ashlylau closed #177
  • Mar 27 08:27
    ashlylau reopened #177
  • Mar 27 08:27
    ashlylau closed #177
  • Mar 27 08:25
    ashlylau opened #177
  • Mar 26 20:10

    greenkeeper[bot] on @types

    (compare)

  • Mar 26 20:06

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Mar 26 13:35

    greenkeeper[bot] on fork-ts-checker-webpack-plugin-4.1.2

    (compare)

  • Mar 26 13:33

    greenkeeper[bot] on fork-ts-checker-webpack-plugin-4.1.2

    chore(package): update fork-ts-… chore(package): update lockfile… (compare)

  • Mar 25 08:51

    greenkeeper[bot] on snyk-1.305.0

    (compare)

  • Mar 25 08:50

    greenkeeper[bot] on snyk-1.305.0

    chore(package): update snyk to … chore(package): update lockfile… (compare)

  • Mar 24 17:46

    greenkeeper[bot] on snyk-1.304.0

    (compare)

  • Mar 24 17:44

    greenkeeper[bot] on snyk-1.304.0

    chore(package): update snyk to … chore(package): update lockfile… (compare)

  • Mar 24 10:49

    greenkeeper[bot] on snyk-1.303.2

    (compare)

  • Mar 24 10:48

    greenkeeper[bot] on snyk-1.303.2

    chore(package): update snyk to … chore(package): update lockfile… (compare)

Tirth Bodawala
@tirthbodawala
Sure
you can create a file sw.js in src
and add your code accordingly.
tentwentyniel
@tentwentyniel
Thanks. For firebase should we do it in client.js or we can create a js file and import in app-shell?
Tirth Bodawala
@tirthbodawala
Well if you need SSR with firebase the best way should be creating Provider both way client and server side.
tentwentyniel
@tentwentyniel
I don't think I need a provider. I just need to generate token and send it to the server. Will it be better if I do it in client.js? Just the initialization
Tirth Bodawala
@tirthbodawala
Yes then client.js would work.
tentwentyniel
@tentwentyniel
Thank you. Last question. I need to create a file called firebase-sw.js and call it via http://localhost:3003/firebase-messaging-sw.js, does adding js file to "public" folder under "src" still work?
Tirth Bodawala
@tirthbodawala
Yes public folder under src is the best to do that.
tentwentyniel
@tentwentyniel
Thanks @tirthbodawala ! I'll check :)
tentwentyniel
@tentwentyniel
@tirthbodawala public folder works as well as adding script in client.js. Thank you!
jorgelopezowd
@jorgelopezowd
@tirthbodawala hello,I need some help with server rendering, Im using Material UI v3 https://v3.material-ui.com/ , but when I enter by home all load OK, so if I change location and reload the page, server render dont load all CSS, what I can do ? this is my QA project https://tienda-qa.americanadecolchones.com/
jorgelopezowd
@jorgelopezowd
@tirthbodawala Im copy client and server from this repo https://github.com/Atyantik/example-pawjs-material-ui/blob/master/src/server.js, but dosent works
Mati Dastugue
@matextrem
Hey there! I wanted to know if there is any way to add transitions between routes. I noticed that there was an issue related to this some time ago but I don't know if it is productive now and how to implement it.
Tirth Bodawala
@tirthbodawala
@matextrem add transition like animations?
Mati Dastugue
@matextrem
Yep! like fade or slide. I noticed that the pages go blank when redirect
Tirth Bodawala
@tirthbodawala
You just need to arrange your code base accordingly. Maybe add app shell that has the animated transitions define at top
Mati Dastugue
@matextrem
Yes, I know it but I dont know how to implement this in the current codebase
Tirth Bodawala
@tirthbodawala
Well you can implement the Transition Provide in the APP Shell
For implmenting a simple app shell please checkout the repo. https://github.com/Atyantik/hn-reactpwa
I hope that helps.
Mati Dastugue
@matextrem
Great! I'll take a look at that. Thanks!
Mati Dastugue
@matextrem

I tried implementing it according to the repository you sent me but it still not working. I'm a bit lost since I don't know how it works.

This is my app shell :

import * as React from 'react';
import { withRouter } from 'react-router';
import './styles.css';

import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';

export default withRouter(props => (
  <>
    <TransitionGroup>
      <CSSTransition
        key={props.location.pathname}
        classNames="slide"
        timeout={1000}
      >
        {props.children}
      </CSSTransition>
    </TransitionGroup>
  </>
));
Is it okay?
Tirth Bodawala
@tirthbodawala
Yes, is this your app shell?
Mati Dastugue
@matextrem
yes, it is
Tirth Bodawala
@tirthbodawala
Its Ok. I am here to assist. :)
          <CSSTransition
            key={location.key}
            classNames="fade"
            timeout={300}
          >
Should it be not location key?
Mati Dastugue
@matextrem
Yes, sorry. That was a typo. I've already fix that
Tirth Bodawala
@tirthbodawala
Still not working?
Mati Dastugue
@matextrem
the problem I'm having is that when I move from one router to another, it goes blank for one second and then the page is rendered
Tirth Bodawala
@tirthbodawala
are you using loadData?
i.e. are your routes loaded after some data is being loaded?
Mati Dastugue
@matextrem
mmm, I have useEffects but i dont think it could be a problem
btw, the slide animation never happens :S
Tirth Bodawala
@tirthbodawala
Can you share a demo code or someting?
Put it on github?
Mati Dastugue
@matextrem
Yes, it is a private repo, but i could add you as a collaborator
Tirth Bodawala
@tirthbodawala
@matextrem I don't think that is good idea, maybe I will create a demo repo with animation and everyone else can use it too as reference.
Does that sound ok?
Mati Dastugue
@matextrem
Oh, it is okay
thanks a lot!
Mati Dastugue
@matextrem
I have another question, I'm changing between pages by making history.push . Could it be a problem?
Yash Thakur
@yash-thakur

Hello @tentwentyniel, I have implemented the Firebase Messaging in ReactPWA.

For a reference you can checkout this repo: https://github.com/yash-thakur/pwa-fcm

Tirth Bodawala
@tirthbodawala
Awesome @yash-thakur you are a saviour.
Create a PR and add it to readme file in React-PWA by creating new section Examples
So everyone can look at it.
tentwentyniel
@tentwentyniel
Thanks @yash-thakur ! I did the same thing but didn't add a provider. Instead watched the notification in another component. Would be useful for the next project. Many thanks!