# TODOs

- debug.ts vllt anders nennen (weil entscheided über production mode...)
  - oder in docs?
  

  
## irgendwann mal
- https://github.com/benkeen/ace-diff
  - bei recover code from frontend settings anzeigen

- readonly lines with ace...
  - https://gist.github.com/ericallam/1348983 | https://jsfiddle.net/tripflex/y0huvc1b/
  - https://stackoverflow.com/questions/24958589/ace-editor-lock-or-readonly-code-segment | http://jsfiddle.net/bzwheeler/btsxgena/
  - https://www.bootply.com/V8d74PJXqd
  - https://groups.google.com/forum/#!topic/ace-discuss/WuwAVBmJbKA
  - https://reformatcode.com/code/javascript/how-to-make-multiple-chunk-of-lines-readonly-in-ace-editor
  


## medium

- check if automatic end (releases are correctly applied for automatic releases)


* pro loading site noch property hasError einführen und dann fehlermeldung anzeigen?? 



* https://medium.com/the-many/adding-login-and-authentication-sections-to-your-react-or-react-native-app-7767fd251bd1
  * force auth
  

## braucht backend


neue actions...

export interface SET_isBackgroundColorPickerOpenedAction extends ActionBase {
  readonly type: ActionType.SET_isBackgroundColorPickerOpened
  readonly isOpened: boolean
}

falschen/alten ActionType


# performance
list views werden immer neu gemacht (constructor, will mount) wenn man dialog anzeigt mit aktuellem pattern

- render list performance --> eigenes comp machen mit props --> comp kann entscheiden, ob gererendert wird, list row weiß das nicht



# server 
https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services


# TODO backend

wenn jemand iregdnwie austritt aus gruppe
und dann nicht mehr in der default gruppe ist...??


# regex anleitung einbinden (markdown)

https://github.com/zeeshanu/learn-regex

# rename 

groupsCardsView --> CardsView bei allen, da ordner schon name gibt 

# null checks
ts config
"strictNullChecks": true,

# in docs

- importing
  - import isEqual from 'lodash-es/isEqual' damit nur teil importiert wird...

- when an method in a react component is async and an await is in there 
  then after the await the props are re populated (i'm 90% sure, but better test) !
  - e.g. edit exercise/headerBarContent > onSaveKeyPress don't need to get the state to get the new savedNewExercise value...
  

- LoginTimeoutHelper

- still TODO when multiple plangs supported:
  - user cannot change plang in any site ...!!! just to mention some:
    - user cannot change plang in do editor site
    - user cannot change plang in edit custom project site
    - user cannot change plang in tutor view

- altes syndrom frontend ist nicht mehr zu 100% kompativel
  - problem bei den submissions (results) jetzt wird ein anderer typ zurückgegeben...

- to see webpack bundles sizes go open webpack.config.dist.js and in the plugin section enable new BundleAnalyzerPlugin() [webpack-bundle-analyzer]  

- wir machen kein diff editor, da für 2 dateien einfach, aber für mehrere bäruchte man wieder tabs --> neues design & neue props (reducer) ...

- https://css-tricks.com/strategies-for-cache-busting-css/
  - https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
  - machen WIR NICHT, da man die alten dateien löschen müsste ... ssds?

- allStylues muss alle .styl dateien importieren ... alle finden mit (dafür nicht in .ts importieren!!)
  - `find .  -name "*.styl" in root` verzeichnis suchen

- frontend settings werden erst gelöscht, wenn sich anderer einloggt

- dirs externalLibsForBundling ist für nicht npm pakete oder geändert
- dir customChangedLib ist für geändert aber eigentlich nur für custom typings
  - todo mal mergen geänderte files in 1 der beiden dirs??

- debugOriginUrl & debugApiHost setzen für debug
  - für links & für api path bei localhost

- releases werden nur noch für eine plang freigegeben,
  null ist für alle, aber sollte nicht mehr unterstützt werden (nur für legacy)
  --> auch in backend docs
  
- nur noch manuelle releases, automatisch nicht getestet und teilweise auch nicht implementiert (auch auf backend beim un/release)
  - vergleich zu alter version: auch das 2. unrelease startet automatische bewertung... (geht nur noch release/unrelease, wenn keine bewertung läuft oder schon abgeschlossen)

- close ask & so ist normalerweise im PanelHeaderBar

- ids <= 0 sollen im backend als neu behandelt werden z.b. auch, wenn kinder id > 0 haben soll trotzdem erstellt werden siehe kopie exercise
- popups verschiebung immer machen


- fom field mit <HelpPopup>
  - wrap both in a div with css rule `form-field-label-with-ico`

### fehler

...
render returns undefined (only return)
--> return null


in redux
```
TypeError: Cannot read property 'getHostNode' of null
```

and js error
```
Uncaught (in promise) TypeError: Cannot read property 'getHostNode' of null
```

this can happen if we try to render a list and the list contains `[undefined]`
e.g. because the data is not yet loaded or just wrong (array index)


### so

- question circle checken, sollten rechts sein (wobei icons eigentlich vor text sollen)
  - sollte aber rechts sein, da besonderes element (erklärung)
  - normale icons sollten vor den text! 

generelles vorgehen beim erstellen einer seite/dialog ... was dazu gehört

beim import von semantic ui react geht immer schief ... dann berichtigen

_reducer reduced fremde actions aber wird auch bei state gebraucht ...  
ist aber nicht immer so, manche haben eigene states z.B. pLangs, Langs, ...

render list/table performance ... beispiel machen, wie es z.b. jetzt bei activated users ist ...    
wenn man einfach ein map macht und dann die tr, dann wird beim update der comp jede tr neu gemacht (da kein shouldUpdate da ist, da keine eigene row comp)  
macht man eine neue comp für die tr und übergibt nur die daten für tr, kann jede tr comp bestimmen, ob sie neu gerendert werden muss (da nur 1 tr geändert wird, wird sich auch nur 1 neu rendern...)



rootstate sollte nur eigene props von reducer benutzen, sonst myprops nutzen
z.b. dialog auf site state zugreifen


componentWillMount vs constructor??

--> https://github.com/reactjs/react-redux/issues/129

- templates für 
  - reducer
  - async load reducer (pending stuff)
- beispiel für reducer: systemRoles & actions

tut for react/redux

https://www.youtube.com/watch?v=nrg7zhgJd4w

https://github.com/piotrwitek/react-redux-typescript-guide


# markdown

for uml plantUML??

https://github.com/mdaines/viz.js


https://github.com/knsv/mermaid


https://stackoverflow.com/questions/28626329/marked-markdown-mermaid-flow-chart-diagrams



# readd

//    "react-intl": "2.3.0",

## Production

- https://github.com/gajus/react-css-modules | Production (extract styles to separate file)
  https://github.com/css-modules/css-modules/issues/61
  
  
# react router tut
https://reacttraining.com/react-router/web/example/basic
  
# editor

for ace there are many good plugins ...

monaco is new and get's many new features in the future (language server protocol) that might be good for e.g. debugging, go to definition ...

https://github.com/superRaytin/react-monaco-editor
  
https://github.com/Microsoft/language-server-protocol/wiki/Protocol-Implementations

https://github.com/Microsoft/monaco-editor/issues/421

for monaco we need at least

https://github.com/Microsoft/monaco-editor/issues/239 to be closed
else we cannot restore the editor state if e.g. a dialog is displayed (like the re-login dialog)

https://github.com/Microsoft/monaco-editor/issues/604 helps:

```
To implement tabs, the recommended way is:

create a single editor instance via monaco.editor.create({ ... , model: null })
create N model instances via monaco.editor.createModel(...).
switch tabs by calling editorInstance.setModel(modelInstance)
for each model, you can save its view state (cursor, scroll position, etc) via editorInstance.saveViewState() and restore it via editorInstance.restoreViewState().
```

so we would need to store the model instances... however for redux the instance should be a plain object (is it?)
we could also use some not redux storage external storage and only store a reference to the external storage in redux?


interesting is also
- eclipse che / orion editor
  
# animations

https://github.com/chenglou/react-motion


# interessant

https://github.com/projectstorm/react-diagrams


# docker for testing

https://www.sumologic.com/blog/security/securing-docker-containers/

# automatic ui testing

https://github.com/DevExpress/testcafe

# resizable grids (tested, not good)

https://github.com/STRML/react-grid-layout

- does not integrate good... resize not working ... dragging position glitch (on click)


/*

type Test = {
  id: number
  displayName: string
}

type ValidationFunc<T> = (value: T) => boolean

function getValidationCollection<T>(collectionObject: {[fieldName in keyof T]: ValidationFunc<T>[] }): any {
  return collectionObject
}

const validationRules = getValidationCollection<Test>({
  id: [(e) => true],
  displayName: [() => true]
})

function getValidationCollection2<T>(collectionObject: {[fieldName in keyof T]: ReadonlyArray<ValidationFunc<T>> }): any {
  return collectionObject
}

const validationRules2 = getValidationCollection2<Test>({
  id: [(e) => true],
  displayName: [e) => true] //error.... TODO WHY??
})
 */