Dependencies

What is a Todo app without some clocks!? Well, still a Todo app, but certainly not as fun as one with the clocks!

So, let's add a couple of clocks to our app, to help us track time while we perform our tasks (and to demonstrate the app.dependencies feature).

For this, we will use the react-clock library from NPM. We can add it to our project as a dependency like this:

main.wasp

app TodoApp {  title: "Todo app",
  // ...    dependencies: [    ("react-clock", "3.0.0")  ]}

Run

wasp start

to have Wasp download and install the new dependency. If wasp start is already running, Wasp will detect the dependency change, and restart automatically.

Next, let's create a new component Clocks where we can play with the clocks.

ext/Clocks.js

import React, { useEffect, useState } from 'react'import Clock from 'react-clock'import 'react-clock/dist/Clock.css'
export default () => {  const [time, setTime] = useState(new Date())    useEffect(() => {    const interval = setInterval(() => setTime(new Date()), 1000)    return () => clearInterval(interval)  }, [])    return (    <div style={{ display: 'flex' }}>      <Clock value={time} />      <Clock value={new Date(time.getTime() + 60 * 60000)} />    </div>  )}

And let's import it in our main React component.

ext/MainPage.js

// ...import Clocks from './Clocks'
const MainPage = () => {  // ...
  return (    <div>      // ...
      <div> <Clocks /> </div>
      // ...    </div>  )}// ...

As you can see, importing other files from /ext is completely normal, just use the relative path.

That is it! We added a dependency and used it in our project.