<p>How to complete an observable when the other completes ?</p>
<hr>
<h2>When to use RxJs ?</h2>
<p>I'm working on real time data these days, and now I'm getting pretty good with <strong>RxJS</strong>.
I have ranted many years against RxJS because it was packed with Angular, and
I don't see the point of using an Observable for a rest request, when a <strong>Promise</strong> is
perfect for that.</p>
<p>Moreover, RxJs api was moving fast, causing displeasure when you don't follow that much this
project.</p>
<p>When dealing with real time data, it's another story. RxJs nails it, and its
integration with <strong>Typescript</strong> is perfect.</p>
<h2>Completing an observable</h2>
<p>There are many operators included with RxJs, and over the time, they removed some to limit
the api surface, which is good. It's very easy to make your own operator,
so if your code often use a certain combination of operators with recurrent logic,
don't hesitate to factorize your code with your <strong>customized operator</strong>.</p>
<p>In my project, I often need to terminate an <code>Observable</code> when another finish. They
both finish at the same time. I first supposed that this is common and therefore an
operator already exists, but <code>takeUntil(other$)</code> terminates your observable
when the <code>other$</code> starts.</p>
<p>It's also easy to complete a <code>Subject</code>, with <code>subject.completes()</code>, but I prefer to
work with observables.</p>
<h2>My customized operator</h2>
<p>I want my <code>stream$</code> to complete with <code>other$</code> stream. I wish to use it like this:</p>
<pre><code class="language-typescript">stream$.pipe(completeWith(other$))
</code></pre>
<p>My <code>completesWith</code> function uses 4 lines of code:</p>
<pre><code class="language-typescript">export const completesWith = (other$: Observable&#x3C;any>) => (o: Observable&#x3C;number>) => {
  const terminator$ = new Subject()
  other$.subscribe().add(() => {
    terminator$.next('terminate')
  })
  return o.pipe(takeUntil(terminator$))
}
</code></pre>
<p>When other$ completes, a terminator$ Subject will emit any value, and using
takeUntil, it will then complete our observable.</p>
<h2>Replace Subject by an Observable</h2>
<p>As I said before, I prefer to avoid Subjects. The way Subjects store listeners could provoke
memory leaks. Functional style has much more guarantees.</p>
<pre><code class="language-typescript">export const completesWith = (end$: Observable&#x3C;any>) => (o: Observable&#x3C;number>) => {
  const terminator$ = new Observable(subscriber => {
    end$.subscribe().add(() => {
      // Will officially start the observable
      subscriber.next('FUNCTIONAL terminate')
    })
  })

  return o.pipe(takeUntil(terminator$))
}
</code></pre>
<p>This is more an exercise than a reality, as my project is full of Subjects, but they are always private object,
with very limited power. I just use them because it's convenient, more readable. Thought a bit dangerous...</p>
<p>If you can't replace your <code>Subject</code> by an <code>Observable</code>, probably harm is already done. Your Subject
may be linked to other objects, with complexity that puts your memory at risk.</p>


Completing a RxJs Observable with another

<p>Styled component is a technology that scales css. It's great, but there are some
traps. Here is what I wished I knew the most when starting Styled Components.</p>
<hr>
<h2>Goals and Difficulties</h2>
<p><strong>Styled Component</strong> is a library coded by the impressive Max Stoiber and now
maintained by many others, proof of success and durability.</p>
<p>There are two main goals in my point of vue.</p>
<ul>
<li>Scale by avoiding hell of BEM, like using class name such as <code>search-box__btn search -box__btn_max_visible</code></li>
<li>Protect your component from the cascading pattern of CSS. Yes. Break the <b>C</b> of CSS</li>
</ul>
<p>Like you may expect, this second goal may bring some pain, or at least surprises when, like me
, your are too naive.</p>
<h3>Quick example</h3>
<p>Let starts with an example <a href="https://styled-components.com/docs/basics#extending">from the doc</a>:</p>
<pre><code class="language-jsx">const Button = styled.button`
  color: palevioletred;
`;

const TomatoButton = styled(Button)`
  color: tomato;
`;
</code></pre>
<p>That works and gives two nice buttons. But using:</p>
<pre><code class="language-jsx">const MyButton = ()=>&#x3C;button>Click Me&#x3C;/button>

const MyTomatoButton = styled(MyButton)`
  color: tomato;
`;
</code></pre>
<p>I'm naive and I have a button. I want to style it, so I write <code>styled(button)</code>.
But my new button won't have any tomato color 😞</p>
<h3>Read the manual</h3>
<p>First, be smarter than me and don't miss this most important line <a href="https://styled-components.com/docs/basics#styling-any-component">from the manual</a>:</p>
<blockquote>
<p>The styled method works perfectly on all of your own or any third-party component, <strong>as
long as they attach the passed className</strong> prop to a DOM element.</p>
</blockquote>
<pre><code class="language-jsx">const Link = ({ className, children }) => (
  &#x3C;a className={className}>
    {children}
  &#x3C;/a>
);
</code></pre>
<p>Why ? Because later the examples given across the web, including Styled Component
documentation gives examples where it looks easy to modify a component, when
this second goal is <b>exactly</b> to avoid any modification of a component.</p>
<h2>Applying classes</h2>
<p>The problem is that styled(Comp) is effective only if Comp is already a styled component.
To achieve this, you must add the <code>className</code> to MyButton</p>
<pre><code class="language-jsx">const MyStyledButton = ({className})=>&#x3C;button className={className}>Click Me&#x3C;/button>

const MyTomatoButton = styled(MyStyledButton)`
  color: tomato;
`;
</code></pre>
<p>Now StyleComponent will create some classes and apply them to your component, making it a styled
component.</p>
<p><img src="./images/styled-classname.png" alt="ClassName applied to styled component"></p>
<p><em>No className, no style</em>. When using <code>styled.div</code>, then StyledComponent has
already applied the <code>className</code> trick.</p>
<p>This is wanted behaviour. You are not supposed to transform a component except
if the component creator has explicitly said you can ! It's the
<a href="https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle">open/close principal</a>
applied to styling.</p>
<h2>Advanced usage</h2>
<h3>Restyle</h3>
<p>Once a component is styled, you can re-style it.</p>
<pre><code class="language-jsx">const AttachingComp = ({className})=>&#x3C;div className={className}>I am a &#x3C;strong>attaching&#x3C;/strong> component&#x3C;/div>

const GreenAttachingComp= styled(AttachingComp)`
  color:green;
  strong{
    text-decoration:underline
  }
`

const Child = styled(GreenAttachingComp)`
   margin: 20px 20px;
   color: red;
`

</code></pre>
<p><img src="./images/restyle.png" alt="Restyling from another component"></p>
<h3>Nesting components</h3>
<p>The same <em>closed by default</em> behaviour is applied to nesting components. If you
have not applied <code>className</code> to a React element, nesting rules are ...not applied.</p>
<pre><code class="language-jsx">
const BasicComp = () => &#x3C;div>I am a &#x3C;strong>basic &#x3C;/strong>component&#x3C;/div>;

const AttachedComp = ({ className }) => (
  &#x3C;div className={className}>
    I am an &#x3C;strong>attached&#x3C;/strong> component
  &#x3C;/div>
);

const StyledBasicComp = styled(BasicComp)``;
const StyledAttachedComp = styled(AttachedComp)``;


const DemoNesting = ({className})=>{
  return (
    &#x3C;div className={className}>
      &#x3C;StyledBasicComp/>
      &#x3C;StyledAttachedComp/>
    &#x3C;/div>
)}


export const StyledDemoNesting = styled(DemoNesting)`
// general css rules. Will be applied to all nodes below
font-size:12px;
strong{
  color:red;
}


// component rule on basic component. Won't be effective
${StyledBasicComp}{
  color:yellow;
}

// component rule on className attached component. Rule is effective
${StyledAttachedComp}{
  color:green;
  font-size:24px;
}
`
</code></pre>
<p>You can test it in this <a href="https://stackblitz.com/edit/styled-components-robusta?file=nesting.js">Stackblitz</a></p>
<h2>When should I attach className ?</h2>
<p>Most often, you should not. Because it's designed this way. If you have a few rules, you should
prefer standard css or sass.</p>
<p>If you have a bigger application, then attaching <code>className</code> could increase interferences.</p>
<p>If you want to present a component in different way, you will rather use a <a href="https://styled-components.com/docs/advanced#theming">theme</a>
or <a href="https://styled-components.com/docs/basics#passed-props">passed props</a> if it's through your application state:</p>
<p>Attaching <code>className</code> is really meant for the case where you create a third party library, and you
design a point of extension. You create some open explicitly for the style. Attaching the
<code>className</code> will avoid some hacks are they are described here <a href="https://github.com/styled-components/styled-components/issues/2076">in this issue</a></p>
<p>I kind of attach <code>className</code> for creating my own library. I design some Theme Component, such as
<code>TCard</code>, then I modify the spacing at different point of this Gatsby website, or reuse it for similar
websites.</p>
<p>For the moment, it's just a test, and it looks good. But it took me way too much time to really
understand how and why attach <code>className</code>. Maybe this article will help you 😊</p>


Completing a RxJs Observable with another

Applying correctly className with Styled components