Skip to content

Commit

Permalink
Merge pull request #335 from EnCiv/civil-updates-1
Browse files Browse the repository at this point in the history
Civil updates 1
  • Loading branch information
ddfridley authored Jun 27, 2022
2 parents e5c9cb4 + e1ec0ee commit d5539bc
Show file tree
Hide file tree
Showing 132 changed files with 70,883 additions and 13,437 deletions.
16 changes: 16 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,19 @@ app/svgr
# Cypress screenshots and recordings
cypress/videos
cypress/screenshots

# Ignore because it's autogenerated
app/web-components/index.js
app/data-components/index.js

#less history
.lesshst

#temp directory
tmp

#directories that might contain secrets
.ssh/

#this is used by Jest-mongodb for testing only -
globalConfig.json
56 changes: 56 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const webpack = require('webpack')

module.exports = {
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: '@storybook/react',
core: {
builder: 'webpack5',
},
webpackFinal: async config => {
// config may or may not have these properties so we have to make sure they are there and then modify them to ensure we don't delete anything
if (!config.resolve) config.resolve = {}
if (!config.resolve.fallback) config.resolve.fallback = {}
Object.assign(config.resolve.fallback, {
fs: false,
buffer: require.resolve('buffer'),
path: require.resolve('path-browserify'),
stream: require.resolve('stream-browserify'),
os: require.resolve('os-browserify/browser'),
zlib: require.resolve('browserify-zlib'),
constants: require.resolve('constants-browserify'),
util: require.resolve('util'),
})
if (!config.plugins) config.plugins = []
config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
config.plugins.push(new webpack.ProvidePlugin({ process: 'process/browser' })) // fix "process is not defined" error: // (do "npm install process" before running the build)
for (const plugin of config.plugins) {
if (plugin.definitions) {
if (plugin.definitions['process.env']) {
console.info(
'.storybook/main.js: deleting process.env from',
{ plugin },
'see comments in that file'
)
delete plugin.definitions['process.env']
/*
webpack will try to string replace process.env with what is assigned in the definition.
// But if there is code in the browser side that does something like "if(process.env)" it will get replaced and cause syntax error and break the existing code
definitions{
...
"process.env": "{\"NODE_ENV\":\"development\",\"NODE_PATH\":[],\"STORYBOOK\":\"true\",\"PUBLIC_URL\":\".\"}",
...
}
causes this:
if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development'
to become
if (!{"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."}) {"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."} = {};
*/
}
}
}
return config
},
}
22 changes: 22 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react'
import { ThemeProvider } from 'react-jss'
import theme from '../app/theme'

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
}

export const decorators = [
Story => {
if (typeof window.logger === 'undefined') window.logger = console
if (typeof socket === 'undefined') window.socket = {}
window.socket.NoSocket = true
return (
<ThemeProvider theme={theme}>
<div style={{ backgroundColor: theme.backgroundColorApp }}>
<Story />
</div>
</ThemeProvider>
)
},
]
95 changes: 0 additions & 95 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,101 +40,6 @@ This project is now using prettier. This makes some spacing and the user of quot

If you are not using VSC prettier will also be run before you commit, but see if prettier is available for your editor and post instuctions here

## How to add a new web page to the server

Here is the flow. When a user visits the server with a url, `getIota()` in [server](./app/server/server.js) will look up the path in the database. If it finds a match, it will look for a webComponent and render that on the server through [app/server/routes/serverReactRender](./app/server/routes/server-react-render.jsx). All the properties of this webComponent will be passed as props to the corresponding React component.Then the page will be sent to the browser, and then rehydrated there, meaning the webComponent will run again on the browser, starting at [app/client/main.js](./app/client/main.js) and react will connect all the DOM elements.

### 1) Add a React Component to [./app/components/web-components](./app/components/web-components)\*\*

here is simple one, [./app/components/web-components/undebate-iframes.jsx](./app/components/web-components/undebate-iframes.jsx):

```
'use strict'
import React from 'react'
import injectSheet from 'react-jss'
const styles = {
title: {
color: 'black',
fontSize: '2rem',
textAlign: 'center',
},
frame: { marginTop: '1em', marginBottom: '1em', width: '100vw' },
}
class UndebateIframes extends React.Component {
render() {
const { classes } = this.props
const width = typeof window !== 'undefined' ? window.innerWidth : 1920
const height = typeof window !== 'undefined' ? window.innerHeight : 1080
return (
<div>
<div>
<span className={classes['title']}>These are the Undebates</span>
</div>
<iframe
className={classes.frame}
height={height * 0.9}
width={width}
name="race1"
src="https://cc.enciv.org/san-francisco-district-attorney"
/>
<iframe
className={classes.frame}
height={height * 0.9}
width={width}
name="race2"
src="https://cc.enciv.org/country:us/state:wi/office:city-of-onalaska-mayor/2020-4-7"
/>
</div>
)
}
}
export default injectSheet(styles)(UndebateIframes)
```

### 2) Add that component to the [index.js](./components/web-components/index.js)

```
...
const WebComponents = {
TestJoin: require('./test-join'),
...
UndebateIframes: require('./undebate-iframes'),
}
...
```

Wish List: I wish that this file could be automatically generated based on the files in the directory. For now, we do it manually.

### 3) Create a new document in the iotas collection of the database

The example is the minimum information required. Any additional properties you add to webComponent will be passed as props to the associated React component.

```
{
"path": "/iframe-demo",
"subject": "Iframe demo",
"description": "a quick prototype of a page showing multiple undebates in separate iframes",
"webComponent": {
"webComponent": "UndebateIframes"
},
}
```

Note that the \_id property is not shown here. When you add this document to the database, it will automatically assign the \_id.

### 4) Add new document to iota.js

If the new document that you are creating should be included in every new installation, then you should add the document, with the \_id assigned, to [iota.json](./iota.json)

### 5) Advanced: Component

If your page should pull data out of the database, or calculate something to pass to the web component, then you can add a component to [app/components/components](./app/components/data-components), add it to the [app/components/data-components/index.js](./app/components/data-components/index.js) and then add a component: {component: YourComponentNane, ...} to the document above.

## Database

There is a tool that lets you view and edit the database in a browser window. This has been really useful in development. To get there:
Expand Down
26 changes: 0 additions & 26 deletions app/api/send-contact-us.js

This file was deleted.

8 changes: 0 additions & 8 deletions app/api/socketlogger.js

This file was deleted.

26 changes: 0 additions & 26 deletions app/client/bconsole.js

This file was deleted.

18 changes: 18 additions & 0 deletions app/client/client-side-clustering.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use strict'

// clustering is a node thing, dummy it out on the client side

export function isMaster() {
return true
}

export function onlyOnMaster(f1, f2) {
return f1()
}

export function onMessage() {
return
}
export function send() {
return
}
File renamed without changes.
8 changes: 8 additions & 0 deletions app/client/main-app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
'use strict'

import { clientMain } from 'civil-client'
import App from '../components/app'

// this is the entry point for the client App running on the browser
// App will be run on both the server side, and the client side, but the stuff in clientMain will only be run to set things up on the browser
clientMain(App)
Loading

0 comments on commit d5539bc

Please sign in to comment.