const path = require('path');
  const NodemonPlugin = require('nodemon-webpack-plugin');

const commonConfig = {
 module: {
   rules: [
     {
       test: /\.(scss|css)$/,
       use: ['css-loader', 'sass-loader'],
     },
     {
       test: /\.(ts|tsx)$/,
       use: 'ts-loader',
       exclude: /node_modules/,
     },
     {
       test: /\.jsx$/,
       exclude: /node_modules/,
       use: [
         {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-react'],
             plugins: ['@issr/babel-plugin'],
           },
         },
       ],
     },
   ],
 },
 resolve: {
   extensions: ['.tsx', '.ts', '.js', '.jsx', '.scss'],
 },
};

module.exports = [
 {
   ...commonConfig,
   target: 'node',
   entry: './src/server.jsx',
   output: {
     path: path.resolve(__dirname, './dist'),
     filename: 'index.js',
   },
   plugins: [
     new NodemonPlugin({
       watch: path.resolve(__dirname, './dist'),
     }),
   ],
 },
 {
   ...commonConfig,
   entry: './src/client.tsx',
   output: {
     path: path.resolve(__dirname, './public'),
     filename: 'index.js',
   },
 },
];

import React, { useEffect } from 'react';
import { useSsrState, useSsrEffect } from '@issr/core';
import './styles/index.scss';

const asyncFn = () =>
  new Promise((resolve) => setTimeout(() => resolve({ data: 'Cocker Spaniel' }), 1000));

export const App = () => {
  const [dog, setDog] = useSsrState('Dog image goes here');
  
  useEffect(() => {
    asyncFn().then((data) => {
      console.log(data);
    });
  }, []);

  useSsrEffect(async () => {
    asyncFn().then((data) => {
      console.log(data);
    });

    console.log('LOOP');
    setDog('LOOP');
  });

  return (
    <div>
      <h1>Random dog</h1>
      <img src={dog} height="150" />            
    </div>
  );
};

        const { html: content} = await serverRender.string(() => (
            <ApolloContext.Provider value={{ ...{}, renderPromises }}>
                <ReduxProvider store={store}>
                    <ApolloProvider client={client}>
                        <CacheProvider value={cache}>
                            <StaticRouter location={req.url} context={context}>
                                <GA4Provider>
                                    <MainRoute />
                                </GA4Provider>
                            </StaticRouter>
                        </CacheProvider>
                    </ApolloProvider>
                </ReduxProvider>
                ,
            </ApolloContext.Provider>
        ), {
            outsideEffects: async () => {
                if (renderPromises.hasPromises()) {
                    await renderPromises.consumeAndAwaitPromises();
                  }
            }
        });