├── .babelrc
├── .formatter.exs
├── .gitignore
├── .prettierrc
├── .vscode
    ├── extensions.json
    └── settings.json
├── LICENSE
├── README.md
├── assets
    ├── css
    │   ├── app.css
    │   └── phoenix.css
    ├── js
    │   ├── Root.tsx
    │   ├── app.tsx
    │   ├── components
    │   │   ├── Header.tsx
    │   │   └── Main.tsx
    │   ├── pages
    │   │   ├── counter.tsx
    │   │   ├── fetch-data.tsx
    │   │   └── index.tsx
    │   └── socket.js
    └── static
    │   ├── favicon.ico
    │   ├── images
    │       └── phoenix.png
    │   └── robots.txt
├── config
    ├── config.exs
    ├── dev.exs
    ├── prod.exs
    └── test.exs
├── lib
    ├── phoenix_react_playground.ex
    ├── phoenix_react_playground
    │   ├── application.ex
    │   ├── example
    │   │   ├── example.ex
    │   │   └── language.ex
    │   └── repo.ex
    ├── phoenix_react_playground_web.ex
    └── phoenix_react_playground_web
    │   ├── channels
    │       └── user_socket.ex
    │   ├── controllers
    │       ├── fallback_controller.ex
    │       ├── language_controller.ex
    │       └── page_controller.ex
    │   ├── endpoint.ex
    │   ├── gettext.ex
    │   ├── router.ex
    │   ├── templates
    │       ├── layout
    │       │   └── app.html.eex
    │       └── page
    │       │   └── index.html.eex
    │   └── views
    │       ├── changeset_view.ex
    │       ├── error_helpers.ex
    │       ├── error_view.ex
    │       ├── language_view.ex
    │       ├── layout_view.ex
    │       └── page_view.ex
├── mix.exs
├── mix.lock
├── package.json
├── priv
    ├── gettext
    │   ├── en
    │   │   └── LC_MESSAGES
    │   │   │   └── errors.po
    │   └── errors.pot
    └── repo
    │   ├── migrations
    │       ├── .formatter.exs
    │       └── 20190116173737_create_languages.exs
    │   └── seeds.exs
├── test
    ├── phoenix_react_playground
    │   └── example
    │   │   └── example_test.exs
    ├── phoenix_react_playground_web
    │   ├── controllers
    │   │   ├── language_controller_test.exs
    │   │   └── page_controller_test.exs
    │   └── views
    │   │   ├── error_view_test.exs
    │   │   ├── layout_view_test.exs
    │   │   └── page_view_test.exs
    ├── support
    │   ├── channel_case.ex
    │   ├── conn_case.ex
    │   └── data_case.ex
    └── test_helper.exs
├── tsconfig.json
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "@babel/preset-env",
 4 |     "@babel/preset-react",
 5 |     "@babel/preset-typescript"
 6 |   ],
 7 |   "plugins": [
 8 |     "@babel/plugin-proposal-class-properties",
 9 |     "@babel/plugin-proposal-object-rest-spread"
10 |   ]
11 | }


--------------------------------------------------------------------------------
/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 |   import_deps: [:ecto, :phoenix],
3 |   inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
4 |   subdirectories: ["priv/*/migrations"]
5 | ]
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # The directory Mix will write compiled artifacts to.
 2 | /_build/
 3 | 
 4 | # If you run "mix test --cover", coverage assets end up here.
 5 | /cover/
 6 | 
 7 | # The directory Mix downloads your dependencies sources to.
 8 | /deps/
 9 | 
10 | # Where 3rd-party dependencies like ExDoc output generated docs.
11 | /doc/
12 | 
13 | # Ignore .fetch files in case you like to edit your project deps locally.
14 | /.fetch
15 | 
16 | # If the VM crashes, it generates a dump, let's ignore it too.
17 | erl_crash.dump
18 | 
19 | # Also ignore archive artifacts (built via "mix archive.build").
20 | *.ez
21 | 
22 | # Ignore package tarball (built via "mix hex.build").
23 | phoenix_react_playground-*.tar
24 | 
25 | # If NPM crashes, it generates a log, let's ignore it too.
26 | npm-debug.log
27 | 
28 | # The directory NPM downloads your dependencies sources to.
29 | node_modules/
30 | 
31 | # Since we are building assets from assets/,
32 | # we ignore priv/static. You may want to comment
33 | # this depending on your deployment strategy.
34 | /priv/static/
35 | 
36 | # Files matching config/*.secret.exs pattern contain sensitive
37 | # data and you should not commit them into version control.
38 | #
39 | # Alternatively, you may comment the line below and commit the
40 | # secrets files as long as you replace their contents by environment
41 | # variables.
42 | /config/*.secret.exs
43 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "parser": "typescript",
3 |   "semi": true,
4 |   "tabWidth": 2,
5 |   "printWidth": 80,
6 |   "singleQuote": true,
7 |   "trailingComma": "none"
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "EditorConfig.EditorConfig",
4 |     "eg2.tslint",
5 |     "esbenp.prettier-vscode",
6 |     "mjmcloug.vscode-elixir"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.tabSize": 2,
 3 |   "editor.insertSpaces": true,
 4 |   "editor.renderWhitespace": "boundary",
 5 |   "editor.rulers": [
 6 |     140
 7 |   ],
 8 |   "files.encoding": "utf8",
 9 |   "files.eol": "\n",
10 |   "files.trimTrailingWhitespace": true,
11 |   "files.insertFinalNewline": true,
12 |   "search.exclude": {
13 |     "**/node_modules": true,
14 |     "**/deps": true,
15 |     "**/_build": true,
16 |     "**/priv/static": true
17 |   },
18 |   "[javascript]": {
19 |     "editor.formatOnSave": true
20 |   },
21 |   "[typescript]": {
22 |     "editor.formatOnSave": true
23 |   },
24 |   "[typescriptreact]": {
25 |     "editor.formatOnSave": true
26 |   },
27 |   "git.ignoreLimitWarning": true,
28 |   "typescript.tsdk": "node_modules/typescript/lib"
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <https://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Phoenix+React Playground
 2 | 
 3 | > A sample Phoenix+React project that *actually works*.
 4 | 
 5 | This repo is originally made as a supplement to [this guide](https://resir014.github.io/blog/2017/08/09/a-phoenix-react-initial-setup-that-actually-works/). Feel free to use this as a base for your Phoenix+React project, however, everything would make sense if you read the original guide first, so probably go do that first. Don't worry, I'll wait.
 6 | 
 7 | ## A quick note
 8 | 
 9 | Phoenix 1.4 ships with [Webpack](https://webpack.js.org/) by default, therefore making the setup much more straightforward than before. The long-overdue rewrite has been finished, and has also been made up-to-date following recent updates to Phoenix. The [sample repo](https://github.com/resir014/phoenix_react_playground) has also been updated.
10 | 
11 | ## What's in the ~~box~~ repo
12 | 
13 | This repo contains a [Phoenix](http://www.phoenixframework.org/) app hooked up to a React frontend, which includes a basic example of your typical React app.
14 | 
15 | Bundling is done with [webpack 4](https://webpack.js.org/). The webpack team have done a great job to improve optimisation efforts as well as reducing the amount of configuration time required in version 4.
16 | 
17 | [Yarn](https://yarnpkg.com/en/) is used as our package manager. It features a robust lockfile which ensures your dependencies are identical across different devices. This is optional, but I recommend it for your own sanity.
18 | 
19 | Instead of plain JavaScript, we're going to use [TypeScript](https://www.typescriptlang.org). TypeScript is a superset of JavaScript which adds additional static typing, which is really helpful for [detecting bugs during compile time](https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/).
20 | 
21 | ## Requirements
22 | 
23 | * [Node.js](https://nodejs.org/en) (v8+)
24 | * [Elixir](https://elixir-lang.org/install.html) (v1.6+)
25 | * [Yarn](https://yarnpkg.com/en/docs/install) - optional. You can use `npm` if you want, but it's for your own sanity.
26 | 
27 | ## Getting started
28 | 
29 | To install dependencies and configure your project:
30 | 
31 | * Install Elixir dependencies with `mix deps.get`.
32 | * `cd` to the `assets/` directory and run `yarn` (or `npm install`) to install Node.js dependencies.
33 | * Modify the database settings in each `config/` files according to your needs.
34 | * Create and migrate your database with `mix ecto.setup` (this runs `mix ecto.create`, `mix ecto.migrate` and `mix run priv/repo/seeds.exs` in order)
35 | 
36 | To start your Phoenix server:
37 | 
38 | * Start Phoenix endpoint with `mix phx.server`
39 | 
40 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
41 | 
42 | Ready to run in production? Please [check out the deployment guides provided by Phoenix](http://www.phoenixframework.org/docs/deployment).
43 | 
44 | ## Learn more
45 | 
46 |   * Official website: http://www.phoenixframework.org/
47 |   * Guides: http://phoenixframework.org/docs/overview
48 |   * Docs: https://hexdocs.pm/phoenix
49 |   * Mailing list: http://groups.google.com/group/phoenix-talk
50 |   * Source: https://github.com/phoenixframework/phoenix
51 | 
52 | ---
53 | 
54 | Have fun! Feel free to [tweet at me](https://twitter.com/resir014) if you have any questions.
55 | 


--------------------------------------------------------------------------------
/assets/css/app.css:
--------------------------------------------------------------------------------
1 | /* This file is for your main application css. */
2 | 
3 | @import "~milligram";
4 | @import "./phoenix.css";
5 | 


--------------------------------------------------------------------------------
/assets/css/phoenix.css:
--------------------------------------------------------------------------------
  1 | /* Includes some default style for the starter application.
  2 |  * This can be safely deleted to start fresh.
  3 |  */
  4 | 
  5 | /* General style */
  6 | h1{font-size: 3.6rem; line-height: 1.25}
  7 | h2{font-size: 2.8rem; line-height: 1.3}
  8 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35}
  9 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5}
 10 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4}
 11 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2}
 12 | 
 13 | .container{
 14 |   margin: 0 auto;
 15 |   max-width: 80.0rem;
 16 |   padding: 0 2.0rem;
 17 |   position: relative;
 18 |   width: 100%
 19 | }
 20 | select {
 21 |   width: auto;
 22 | }
 23 | 
 24 | /* Alerts and form errors */
 25 | .alert {
 26 |   padding: 15px;
 27 |   margin-bottom: 20px;
 28 |   border: 1px solid transparent;
 29 |   border-radius: 4px;
 30 | }
 31 | .alert-info {
 32 |   color: #31708f;
 33 |   background-color: #d9edf7;
 34 |   border-color: #bce8f1;
 35 | }
 36 | .alert-warning {
 37 |   color: #8a6d3b;
 38 |   background-color: #fcf8e3;
 39 |   border-color: #faebcc;
 40 | }
 41 | .alert-danger {
 42 |   color: #a94442;
 43 |   background-color: #f2dede;
 44 |   border-color: #ebccd1;
 45 | }
 46 | .alert p {
 47 |   margin-bottom: 0;
 48 | }
 49 | .alert:empty {
 50 |   display: none;
 51 | }
 52 | .help-block {
 53 |   color: #a94442;
 54 |   display: block;
 55 |   margin: -1rem 0 2rem;
 56 | }
 57 | 
 58 | /* Phoenix promo and logo */
 59 | .phx-hero {
 60 |   text-align: center;
 61 |   border-bottom: 1px solid #e3e3e3;
 62 |   background: #eee;
 63 |   border-radius: 6px;
 64 |   padding: 3em;
 65 |   margin-bottom: 3rem;
 66 |   font-weight: 200;
 67 |   font-size: 120%;
 68 | }
 69 | .phx-hero p:last-child {
 70 |   margin-bottom: 0;
 71 | }
 72 | .phx-logo {
 73 |   min-width: 300px;
 74 |   margin: 1rem;
 75 |   display: block;
 76 | }
 77 | .phx-logo img {
 78 |   width: auto;
 79 |   display: block;
 80 | }
 81 | 
 82 | /* Headers */
 83 | header {
 84 |   width: 100%;
 85 |   background: #fdfdfd;
 86 |   border-bottom: 1px solid #eaeaea;
 87 |   margin-bottom: 2rem;
 88 | }
 89 | header section {
 90 |   align-items: center;
 91 |   display: flex;
 92 |   flex-direction: column;
 93 |   justify-content: space-between;
 94 | }
 95 | header section :first-child {
 96 |   order: 2;
 97 | }
 98 | header section :last-child {
 99 |   order: 1;
100 | }
101 | header nav ul,
102 | header nav li {
103 |   margin: 0;
104 |   padding: 0;
105 |   display: block;
106 |   text-align: right;
107 |   white-space: nowrap;
108 | }
109 | header nav ul {
110 |   margin: 1rem;
111 |   margin-top: 0;
112 | }
113 | header nav a {
114 |   display: block;
115 | }
116 | 
117 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */
118 |   header section {
119 |     flex-direction: row;
120 |   }
121 |   header nav ul {
122 |     margin: 1rem;
123 |   }
124 |   .phx-logo {
125 |     flex-basis: 527px;
126 |     margin: 2rem 1rem;
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/assets/js/Root.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { BrowserRouter, Route, Switch } from 'react-router-dom';
 3 | 
 4 | import Header from './components/Header';
 5 | import HomePage from './pages';
 6 | import CounterPage from './pages/counter';
 7 | import FetchDataPage from './pages/fetch-data';
 8 | 
 9 | const Root: React.FC = () => (
10 |   <>
11 |     <Header />
12 |     <BrowserRouter>
13 |       <Switch>
14 |         <Route exact path="/" component={HomePage} />
15 |         <Route path="/counter" component={CounterPage} />
16 |         <Route path="/fetch-data" component={FetchDataPage} />
17 |       </Switch>
18 |     </BrowserRouter>
19 |   </>
20 | );
21 | 
22 | export default Root;
23 | 


--------------------------------------------------------------------------------
/assets/js/app.tsx:
--------------------------------------------------------------------------------
 1 | import '../css/app.css';
 2 | 
 3 | import 'phoenix_html';
 4 | 
 5 | import * as React from 'react';
 6 | import * as ReactDOM from 'react-dom';
 7 | import Root from './Root';
 8 | 
 9 | // This code starts up the React app when it runs in a browser. It sets up the routing
10 | // configuration and injects the app into a DOM element.
11 | ReactDOM.render(<Root />, document.getElementById('react-app'));
12 | 


--------------------------------------------------------------------------------
/assets/js/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | const Header: React.FC = () => (
 4 |   <header>
 5 |     <section className="container">
 6 |       <nav role="navigation">
 7 |         <ul>
 8 |           <li>
 9 |             <a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a>
10 |           </li>
11 |         </ul>
12 |       </nav>
13 |       <a href="http://phoenixframework.org/" className="phx-logo">
14 |         <img src="/images/phoenix.png" alt="Phoenix Framework Logo" />
15 |       </a>
16 |     </section>
17 |   </header>
18 | );
19 | 
20 | export default Header;
21 | 


--------------------------------------------------------------------------------
/assets/js/components/Main.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | const Main: React.FC = ({ children }) => (
 4 |   <main role="main" className="container">
 5 |     {children}
 6 |   </main>
 7 | );
 8 | 
 9 | export default Main;
10 | 


--------------------------------------------------------------------------------
/assets/js/pages/counter.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | import Main from '../components/Main';
 5 | 
 6 | // Interface for the Counter component state
 7 | interface CounterState {
 8 |   currentCount: number;
 9 | }
10 | 
11 | const initialState = { currentCount: 0 };
12 | 
13 | export default class CounterPage extends React.Component<{}, CounterState> {
14 |   constructor(props: {}) {
15 |     super(props);
16 | 
17 |     // Set the initial state of the component in a constructor.
18 |     this.state = initialState;
19 |   }
20 | 
21 |   public render(): JSX.Element {
22 |     return (
23 |       <Main>
24 |         <h1>Counter</h1>
25 |         <p>
26 |           The Counter is the simplest example of what you can do with a React
27 |           component.
28 |         </p>
29 |         <p>
30 |           Current count: <strong>{this.state.currentCount}</strong>
31 |         </p>
32 |         {/* We apply an onClick event to these buttons to their corresponding functions */}
33 |         <button className="button" onClick={this.incrementCounter}>
34 |           Increment counter
35 |         </button>{' '}
36 |         <button
37 |           className="button button-outline"
38 |           onClick={this.decrementCounter}
39 |         >
40 |           Decrement counter
41 |         </button>{' '}
42 |         <button className="button button-clear" onClick={this.resetCounter}>
43 |           Reset counter
44 |         </button>
45 |         <br />
46 |         <br />
47 |         <p>
48 |           <Link to="/">Back to home</Link>
49 |         </p>
50 |       </Main>
51 |     );
52 |   }
53 | 
54 |   private incrementCounter = () => {
55 |     this.setState({
56 |       currentCount: this.state.currentCount + 1
57 |     });
58 |   };
59 | 
60 |   private decrementCounter = () => {
61 |     this.setState({
62 |       currentCount: this.state.currentCount - 1
63 |     });
64 |   };
65 | 
66 |   private resetCounter = () => {
67 |     this.setState({
68 |       currentCount: 0
69 |     });
70 |   };
71 | }
72 | 


--------------------------------------------------------------------------------
/assets/js/pages/fetch-data.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | import Main from '../components/Main';
 5 | 
 6 | // The interface for our API response
 7 | interface ApiResponse {
 8 |   data: Language[];
 9 | }
10 | 
11 | // The interface for our Language model.
12 | interface Language {
13 |   id: number;
14 |   name: string;
15 |   proverb: string;
16 | }
17 | 
18 | interface FetchDataExampleState {
19 |   languages: Language[];
20 |   loading: boolean;
21 | }
22 | 
23 | export default class FetchDataPage extends React.Component<
24 |   {},
25 |   FetchDataExampleState
26 | > {
27 |   constructor(props: {}) {
28 |     super(props);
29 |     this.state = { languages: [], loading: true };
30 | 
31 |     // Get the data from our API.
32 |     fetch('/api/languages')
33 |       .then(response => response.json() as Promise<ApiResponse>)
34 |       .then(data => {
35 |         this.setState({ languages: data.data, loading: false });
36 |       });
37 |   }
38 | 
39 |   private static renderLanguagesTable(languages: Language[]) {
40 |     return (
41 |       <table>
42 |         <thead>
43 |           <tr>
44 |             <th>Language</th>
45 |             <th>Example proverb</th>
46 |           </tr>
47 |         </thead>
48 |         <tbody>
49 |           {languages.map(language => (
50 |             <tr key={language.id}>
51 |               <td>{language.name}</td>
52 |               <td>{language.proverb}</td>
53 |             </tr>
54 |           ))}
55 |         </tbody>
56 |       </table>
57 |     );
58 |   }
59 | 
60 |   public render(): JSX.Element {
61 |     const content = this.state.loading ? (
62 |       <p>
63 |         <em>Loading...</em>
64 |       </p>
65 |     ) : (
66 |       FetchDataPage.renderLanguagesTable(this.state.languages)
67 |     );
68 | 
69 |     return (
70 |       <Main>
71 |         <h1>Fetch Data</h1>
72 |         <p>
73 |           This component demonstrates fetching data from the Phoenix API
74 |           endpoint.
75 |         </p>
76 |         {content}
77 |         <br />
78 |         <br />
79 |         <p>
80 |           <Link to="/">Back to home</Link>
81 |         </p>
82 |       </Main>
83 |     );
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/assets/js/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { RouteComponentProps, Link } from 'react-router-dom';
 3 | import Main from '../components/Main';
 4 | 
 5 | const HomePage: React.FC<RouteComponentProps> = () => (
 6 |   <Main>
 7 |     <section className="phx-hero">
 8 |       <h1>Welcome to Phoenix!</h1>
 9 |       <p>
10 |         A productive web framework that
11 |         <br />
12 |         does not compromise speed and maintainability.
13 |       </p>
14 |       <p>
15 |         <Link className="button" to="/counter">
16 |           Counter example
17 |         </Link>{' '}
18 |         <Link className="button button-outline" to="/fetch-data">
19 |           API example
20 |         </Link>
21 |       </p>
22 |     </section>
23 | 
24 |     <section className="row">
25 |       <article className="column">
26 |         <h2>Resources</h2>
27 |         <ul>
28 |           <li>
29 |             <a href="https://hexdocs.pm/phoenix/overview.html">
30 |               Guides &amp; Docs
31 |             </a>
32 |           </li>
33 |           <li>
34 |             <a href="https://github.com/phoenixframework/phoenix">Source</a>
35 |           </li>
36 |           <li>
37 |             <a href="https://github.com/phoenixframework/phoenix/blob/v1.4/CHANGELOG.md">
38 |               v1.4 Changelog
39 |             </a>
40 |           </li>
41 |         </ul>
42 |       </article>
43 |       <article className="column">
44 |         <h2>Help</h2>
45 |         <ul>
46 |           <li>
47 |             <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
48 |           </li>
49 |           <li>
50 |             <a href="https://webchat.freenode.net/?channels=elixir-lang">
51 |               #elixir-lang on Freenode IRC
52 |             </a>
53 |           </li>
54 |           <li>
55 |             <a href="https://twitter.com/elixirphoenix">
56 |               Twitter @elixirphoenix
57 |             </a>
58 |           </li>
59 |         </ul>
60 |       </article>
61 |     </section>
62 |   </Main>
63 | );
64 | 
65 | export default HomePage;
66 | 


--------------------------------------------------------------------------------
/assets/js/socket.js:
--------------------------------------------------------------------------------
 1 | // NOTE: The contents of this file will only be executed if
 2 | // you uncomment its entry in "assets/js/app.js".
 3 | 
 4 | // To use Phoenix channels, the first step is to import Socket,
 5 | // and connect at the socket path in "lib/web/endpoint.ex".
 6 | //
 7 | // Pass the token on params as below. Or remove it
 8 | // from the params if you are not using authentication.
 9 | import {Socket} from "phoenix"
10 | 
11 | let socket = new Socket("/socket", {params: {token: window.userToken}})
12 | 
13 | // When you connect, you'll often need to authenticate the client.
14 | // For example, imagine you have an authentication plug, `MyAuth`,
15 | // which authenticates the session and assigns a `:current_user`.
16 | // If the current user exists you can assign the user's token in
17 | // the connection for use in the layout.
18 | //
19 | // In your "lib/web/router.ex":
20 | //
21 | //     pipeline :browser do
22 | //       ...
23 | //       plug MyAuth
24 | //       plug :put_user_token
25 | //     end
26 | //
27 | //     defp put_user_token(conn, _) do
28 | //       if current_user = conn.assigns[:current_user] do
29 | //         token = Phoenix.Token.sign(conn, "user socket", current_user.id)
30 | //         assign(conn, :user_token, token)
31 | //       else
32 | //         conn
33 | //       end
34 | //     end
35 | //
36 | // Now you need to pass this token to JavaScript. You can do so
37 | // inside a script tag in "lib/web/templates/layout/app.html.eex":
38 | //
39 | //     <script>window.userToken = "<%= assigns[:user_token] %>";</script>
40 | //
41 | // You will need to verify the user token in the "connect/3" function
42 | // in "lib/web/channels/user_socket.ex":
43 | //
44 | //     def connect(%{"token" => token}, socket, _connect_info) do
45 | //       # max_age: 1209600 is equivalent to two weeks in seconds
46 | //       case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
47 | //         {:ok, user_id} ->
48 | //           {:ok, assign(socket, :user, user_id)}
49 | //         {:error, reason} ->
50 | //           :error
51 | //       end
52 | //     end
53 | //
54 | // Finally, connect to the socket:
55 | socket.connect()
56 | 
57 | // Now that you are connected, you can join channels with a topic:
58 | let channel = socket.channel("topic:subtopic", {})
59 | channel.join()
60 |   .receive("ok", resp => { console.log("Joined successfully", resp) })
61 |   .receive("error", resp => { console.log("Unable to join", resp) })
62 | 
63 | export default socket
64 | 


--------------------------------------------------------------------------------
/assets/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/resir014/phoenix_react_playground/d1046758784274c23e812b748ac35a43b9445bb5/assets/static/favicon.ico


--------------------------------------------------------------------------------
/assets/static/images/phoenix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/resir014/phoenix_react_playground/d1046758784274c23e812b748ac35a43b9445bb5/assets/static/images/phoenix.png


--------------------------------------------------------------------------------
/assets/static/robots.txt:
--------------------------------------------------------------------------------
1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
2 | #
3 | # To ban all spiders from the entire site uncomment the next two lines:
4 | # User-agent: *
5 | # Disallow: /
6 | 


--------------------------------------------------------------------------------
/config/config.exs:
--------------------------------------------------------------------------------
 1 | # This file is responsible for configuring your application
 2 | # and its dependencies with the aid of the Mix.Config module.
 3 | #
 4 | # This configuration file is loaded before any dependency and
 5 | # is restricted to this project.
 6 | 
 7 | # General application configuration
 8 | use Mix.Config
 9 | 
10 | config :phoenix_react_playground,
11 |   ecto_repos: [PhoenixReactPlayground.Repo]
12 | 
13 | # Configures the endpoint
14 | config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
15 |   url: [host: "localhost"],
16 |   secret_key_base: "FdoYieVIOFzJ2N5jcqVxZkhuw3Hs2lCV6HinhRJL+rUX2vEQ1NViSOEZ+sNKLsrX",
17 |   render_errors: [view: PhoenixReactPlaygroundWeb.ErrorView, accepts: ~w(html json)],
18 |   pubsub: [name: PhoenixReactPlayground.PubSub, adapter: Phoenix.PubSub.PG2]
19 | 
20 | # Configures Elixir's Logger
21 | config :logger, :console,
22 |   format: "$time $metadata[$level] $message\n",
23 |   metadata: [:request_id]
24 | 
25 | # Use Jason for JSON parsing in Phoenix
26 | config :phoenix, :json_library, Jason
27 | 
28 | # Import environment specific config. This must remain at the bottom
29 | # of this file so it overrides the configuration defined above.
30 | import_config "#{Mix.env()}.exs"
31 | 


--------------------------------------------------------------------------------
/config/dev.exs:
--------------------------------------------------------------------------------
 1 | use Mix.Config
 2 | 
 3 | # For development, we disable any cache and enable
 4 | # debugging and code reloading.
 5 | #
 6 | # The watchers configuration can be used to run external
 7 | # watchers to your application. For example, we use it
 8 | # with webpack to recompile .js and .css sources.
 9 | config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
10 |   http: [port: 4000],
11 |   debug_errors: true,
12 |   code_reloader: true,
13 |   check_origin: false,
14 |   watchers: [
15 |     node: [
16 |       "node_modules/webpack/bin/webpack.js",
17 |       "--mode",
18 |       "development",
19 |       "--watch-stdin",
20 |     ]
21 |   ]
22 | 
23 | # ## SSL Support
24 | #
25 | # In order to use HTTPS in development, a self-signed
26 | # certificate can be generated by running the following
27 | # Mix task:
28 | #
29 | #     mix phx.gen.cert
30 | #
31 | # Note that this task requires Erlang/OTP 20 or later.
32 | # Run `mix help phx.gen.cert` for more information.
33 | #
34 | # The `http:` config above can be replaced with:
35 | #
36 | #     https: [
37 | #       port: 4001,
38 | #       cipher_suite: :strong,
39 | #       keyfile: "priv/cert/selfsigned_key.pem",
40 | #       certfile: "priv/cert/selfsigned.pem"
41 | #     ],
42 | #
43 | # If desired, both `http:` and `https:` keys can be
44 | # configured to run both http and https servers on
45 | # different ports.
46 | 
47 | # Watch static and templates for browser reloading.
48 | config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
49 |   live_reload: [
50 |     patterns: [
51 |       ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
52 |       ~r{priv/gettext/.*(po)$},
53 |       ~r{lib/phoenix_react_playground_web/views/.*(ex)$},
54 |       ~r{lib/phoenix_react_playground_web/templates/.*(eex)$}
55 |     ]
56 |   ]
57 | 
58 | # Do not include metadata nor timestamps in development logs
59 | config :logger, :console, format: "[$level] $message\n"
60 | 
61 | # Set a higher stacktrace during development. Avoid configuring such
62 | # in production as building large stacktraces may be expensive.
63 | config :phoenix, :stacktrace_depth, 20
64 | 
65 | # Initialize plugs at runtime for faster development compilation
66 | config :phoenix, :plug_init_mode, :runtime
67 | 
68 | # Configure your database
69 | config :phoenix_react_playground, PhoenixReactPlayground.Repo,
70 |   username: "postgres",
71 |   password: "postgres",
72 |   database: "phoenix_react_playground_dev",
73 |   hostname: "localhost",
74 |   pool_size: 10
75 | 


--------------------------------------------------------------------------------
/config/prod.exs:
--------------------------------------------------------------------------------
 1 | use Mix.Config
 2 | 
 3 | # For production, don't forget to configure the url host
 4 | # to something meaningful, Phoenix uses this information
 5 | # when generating URLs.
 6 | #
 7 | # Note we also include the path to a cache manifest
 8 | # containing the digested version of static files. This
 9 | # manifest is generated by the `mix phx.digest` task,
10 | # which you should run after static files are built and
11 | # before starting your production server.
12 | config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
13 |   http: [:inet6, port: System.get_env("PORT") || 4000],
14 |   url: [host: "example.com", port: 80],
15 |   cache_static_manifest: "priv/static/cache_manifest.json"
16 | 
17 | # Do not print debug messages in production
18 | config :logger, level: :info
19 | 
20 | # ## SSL Support
21 | #
22 | # To get SSL working, you will need to add the `https` key
23 | # to the previous section and set your `:url` port to 443:
24 | #
25 | #     config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
26 | #       ...
27 | #       url: [host: "example.com", port: 443],
28 | #       https: [
29 | #         :inet6,
30 | #         port: 443,
31 | #         cipher_suite: :strong,
32 | #         keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
33 | #         certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
34 | #       ]
35 | #
36 | # The `cipher_suite` is set to `:strong` to support only the
37 | # latest and more secure SSL ciphers. This means old browsers
38 | # and clients may not be supported. You can set it to
39 | # `:compatible` for wider support.
40 | #
41 | # `:keyfile` and `:certfile` expect an absolute path to the key
42 | # and cert in disk or a relative path inside priv, for example
43 | # "priv/ssl/server.key". For all supported SSL configuration
44 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
45 | #
46 | # We also recommend setting `force_ssl` in your endpoint, ensuring
47 | # no data is ever sent via http, always redirecting to https:
48 | #
49 | #     config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
50 | #       force_ssl: [hsts: true]
51 | #
52 | # Check `Plug.SSL` for all available options in `force_ssl`.
53 | 
54 | # ## Using releases (distillery)
55 | #
56 | # If you are doing OTP releases, you need to instruct Phoenix
57 | # to start the server for all endpoints:
58 | #
59 | #     config :phoenix, :serve_endpoints, true
60 | #
61 | # Alternatively, you can configure exactly which server to
62 | # start per endpoint:
63 | #
64 | #     config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint, server: true
65 | #
66 | # Note you can't rely on `System.get_env/1` when using releases.
67 | # See the releases documentation accordingly.
68 | 
69 | # Finally import the config/prod.secret.exs which should be versioned
70 | # separately.
71 | import_config "prod.secret.exs"
72 | 


--------------------------------------------------------------------------------
/config/test.exs:
--------------------------------------------------------------------------------
 1 | use Mix.Config
 2 | 
 3 | # We don't run a server during test. If one is required,
 4 | # you can enable the server option below.
 5 | config :phoenix_react_playground, PhoenixReactPlaygroundWeb.Endpoint,
 6 |   http: [port: 4002],
 7 |   server: false
 8 | 
 9 | # Print only warnings and errors during test
10 | config :logger, level: :warn
11 | 
12 | # Configure your database
13 | config :phoenix_react_playground, PhoenixReactPlayground.Repo,
14 |   username: "postgres",
15 |   password: "postgres",
16 |   database: "phoenix_react_playground_test",
17 |   hostname: "localhost",
18 |   pool: Ecto.Adapters.SQL.Sandbox
19 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground do
 2 |   @moduledoc """
 3 |   PhoenixReactPlayground keeps the contexts that define your domain
 4 |   and business logic.
 5 | 
 6 |   Contexts are also responsible for managing your data, regardless
 7 |   if it comes from the database, an external API or others.
 8 |   """
 9 | end
10 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground/application.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.Application do
 2 |   # See https://hexdocs.pm/elixir/Application.html
 3 |   # for more information on OTP Applications
 4 |   @moduledoc false
 5 | 
 6 |   use Application
 7 | 
 8 |   def start(_type, _args) do
 9 |     # List all child processes to be supervised
10 |     children = [
11 |       # Start the Ecto repository
12 |       PhoenixReactPlayground.Repo,
13 |       # Start the endpoint when the application starts
14 |       PhoenixReactPlaygroundWeb.Endpoint
15 |       # Starts a worker by calling: PhoenixReactPlayground.Worker.start_link(arg)
16 |       # {PhoenixReactPlayground.Worker, arg},
17 |     ]
18 | 
19 |     # See https://hexdocs.pm/elixir/Supervisor.html
20 |     # for other strategies and supported options
21 |     opts = [strategy: :one_for_one, name: PhoenixReactPlayground.Supervisor]
22 |     Supervisor.start_link(children, opts)
23 |   end
24 | 
25 |   # Tell Phoenix to update the endpoint configuration
26 |   # whenever the application is updated.
27 |   def config_change(changed, _new, removed) do
28 |     PhoenixReactPlaygroundWeb.Endpoint.config_change(changed, removed)
29 |     :ok
30 |   end
31 | end
32 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground/example/example.ex:
--------------------------------------------------------------------------------
  1 | defmodule PhoenixReactPlayground.Example do
  2 |   @moduledoc """
  3 |   The Example context.
  4 |   """
  5 | 
  6 |   import Ecto.Query, warn: false
  7 |   alias PhoenixReactPlayground.Repo
  8 | 
  9 |   alias PhoenixReactPlayground.Example.Language
 10 | 
 11 |   @doc """
 12 |   Returns the list of languages.
 13 | 
 14 |   ## Examples
 15 | 
 16 |       iex> list_languages()
 17 |       [%Language{}, ...]
 18 | 
 19 |   """
 20 |   def list_languages do
 21 |     Repo.all(Language)
 22 |   end
 23 | 
 24 |   @doc """
 25 |   Gets a single language.
 26 | 
 27 |   Raises `Ecto.NoResultsError` if the Language does not exist.
 28 | 
 29 |   ## Examples
 30 | 
 31 |       iex> get_language!(123)
 32 |       %Language{}
 33 | 
 34 |       iex> get_language!(456)
 35 |       ** (Ecto.NoResultsError)
 36 | 
 37 |   """
 38 |   def get_language!(id), do: Repo.get!(Language, id)
 39 | 
 40 |   @doc """
 41 |   Creates a language.
 42 | 
 43 |   ## Examples
 44 | 
 45 |       iex> create_language(%{field: value})
 46 |       {:ok, %Language{}}
 47 | 
 48 |       iex> create_language(%{field: bad_value})
 49 |       {:error, %Ecto.Changeset{}}
 50 | 
 51 |   """
 52 |   def create_language(attrs \\ %{}) do
 53 |     %Language{}
 54 |     |> Language.changeset(attrs)
 55 |     |> Repo.insert()
 56 |   end
 57 | 
 58 |   @doc """
 59 |   Updates a language.
 60 | 
 61 |   ## Examples
 62 | 
 63 |       iex> update_language(language, %{field: new_value})
 64 |       {:ok, %Language{}}
 65 | 
 66 |       iex> update_language(language, %{field: bad_value})
 67 |       {:error, %Ecto.Changeset{}}
 68 | 
 69 |   """
 70 |   def update_language(%Language{} = language, attrs) do
 71 |     language
 72 |     |> Language.changeset(attrs)
 73 |     |> Repo.update()
 74 |   end
 75 | 
 76 |   @doc """
 77 |   Deletes a Language.
 78 | 
 79 |   ## Examples
 80 | 
 81 |       iex> delete_language(language)
 82 |       {:ok, %Language{}}
 83 | 
 84 |       iex> delete_language(language)
 85 |       {:error, %Ecto.Changeset{}}
 86 | 
 87 |   """
 88 |   def delete_language(%Language{} = language) do
 89 |     Repo.delete(language)
 90 |   end
 91 | 
 92 |   @doc """
 93 |   Returns an `%Ecto.Changeset{}` for tracking language changes.
 94 | 
 95 |   ## Examples
 96 | 
 97 |       iex> change_language(language)
 98 |       %Ecto.Changeset{source: %Language{}}
 99 | 
100 |   """
101 |   def change_language(%Language{} = language) do
102 |     Language.changeset(language, %{})
103 |   end
104 | end
105 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground/example/language.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.Example.Language do
 2 |   use Ecto.Schema
 3 |   import Ecto.Changeset
 4 | 
 5 | 
 6 |   schema "languages" do
 7 |     field :name, :string
 8 |     field :proverb, :string
 9 | 
10 |     timestamps()
11 |   end
12 | 
13 |   @doc false
14 |   def changeset(language, attrs) do
15 |     language
16 |     |> cast(attrs, [:name, :proverb])
17 |     |> validate_required([:name, :proverb])
18 |   end
19 | end
20 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground/repo.ex:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlayground.Repo do
2 |   use Ecto.Repo,
3 |     otp_app: :phoenix_react_playground,
4 |     adapter: Ecto.Adapters.Postgres
5 | end
6 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb do
 2 |   @moduledoc """
 3 |   The entrypoint for defining your web interface, such
 4 |   as controllers, views, channels and so on.
 5 | 
 6 |   This can be used in your application as:
 7 | 
 8 |       use PhoenixReactPlaygroundWeb, :controller
 9 |       use PhoenixReactPlaygroundWeb, :view
10 | 
11 |   The definitions below will be executed for every view,
12 |   controller, etc, so keep them short and clean, focused
13 |   on imports, uses and aliases.
14 | 
15 |   Do NOT define functions inside the quoted expressions
16 |   below. Instead, define any helper function in modules
17 |   and import those modules here.
18 |   """
19 | 
20 |   def controller do
21 |     quote do
22 |       use Phoenix.Controller, namespace: PhoenixReactPlaygroundWeb
23 | 
24 |       import Plug.Conn
25 |       import PhoenixReactPlaygroundWeb.Gettext
26 |       alias PhoenixReactPlaygroundWeb.Router.Helpers, as: Routes
27 |     end
28 |   end
29 | 
30 |   def view do
31 |     quote do
32 |       use Phoenix.View,
33 |         root: "lib/phoenix_react_playground_web/templates",
34 |         namespace: PhoenixReactPlaygroundWeb
35 | 
36 |       # Import convenience functions from controllers
37 |       import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]
38 | 
39 |       # Use all HTML functionality (forms, tags, etc)
40 |       use Phoenix.HTML
41 | 
42 |       import PhoenixReactPlaygroundWeb.ErrorHelpers
43 |       import PhoenixReactPlaygroundWeb.Gettext
44 |       alias PhoenixReactPlaygroundWeb.Router.Helpers, as: Routes
45 |     end
46 |   end
47 | 
48 |   def router do
49 |     quote do
50 |       use Phoenix.Router
51 |       import Plug.Conn
52 |       import Phoenix.Controller
53 |     end
54 |   end
55 | 
56 |   def channel do
57 |     quote do
58 |       use Phoenix.Channel
59 |       import PhoenixReactPlaygroundWeb.Gettext
60 |     end
61 |   end
62 | 
63 |   @doc """
64 |   When used, dispatch to the appropriate controller/view/etc.
65 |   """
66 |   defmacro __using__(which) when is_atom(which) do
67 |     apply(__MODULE__, which, [])
68 |   end
69 | end
70 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/channels/user_socket.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.UserSocket do
 2 |   use Phoenix.Socket
 3 | 
 4 |   ## Channels
 5 |   # channel "room:*", PhoenixReactPlaygroundWeb.RoomChannel
 6 | 
 7 |   # Socket params are passed from the client and can
 8 |   # be used to verify and authenticate a user. After
 9 |   # verification, you can put default assigns into
10 |   # the socket that will be set for all channels, ie
11 |   #
12 |   #     {:ok, assign(socket, :user_id, verified_user_id)}
13 |   #
14 |   # To deny connection, return `:error`.
15 |   #
16 |   # See `Phoenix.Token` documentation for examples in
17 |   # performing token verification on connect.
18 |   def connect(_params, socket, _connect_info) do
19 |     {:ok, socket}
20 |   end
21 | 
22 |   # Socket id's are topics that allow you to identify all sockets for a given user:
23 |   #
24 |   #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
25 |   #
26 |   # Would allow you to broadcast a "disconnect" event and terminate
27 |   # all active sockets and channels for a given user:
28 |   #
29 |   #     PhoenixReactPlaygroundWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
30 |   #
31 |   # Returning `nil` makes this socket anonymous.
32 |   def id(_socket), do: nil
33 | end
34 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/controllers/fallback_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.FallbackController do
 2 |   @moduledoc """
 3 |   Translates controller action results into valid `Plug.Conn` responses.
 4 | 
 5 |   See `Phoenix.Controller.action_fallback/1` for more details.
 6 |   """
 7 |   use PhoenixReactPlaygroundWeb, :controller
 8 | 
 9 |   def call(conn, {:error, %Ecto.Changeset{} = changeset}) do
10 |     conn
11 |     |> put_status(:unprocessable_entity)
12 |     |> put_view(PhoenixReactPlaygroundWeb.ChangesetView)
13 |     |> render("error.json", changeset: changeset)
14 |   end
15 | 
16 |   def call(conn, {:error, :not_found}) do
17 |     conn
18 |     |> put_status(:not_found)
19 |     |> put_view(PhoenixReactPlaygroundWeb.ErrorView)
20 |     |> render(:"404")
21 |   end
22 | end
23 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/controllers/language_controller.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.LanguageController do
 2 |   use PhoenixReactPlaygroundWeb, :controller
 3 | 
 4 |   alias PhoenixReactPlayground.Example
 5 |   alias PhoenixReactPlayground.Example.Language
 6 | 
 7 |   action_fallback PhoenixReactPlaygroundWeb.FallbackController
 8 | 
 9 |   def index(conn, _params) do
10 |     languages = Example.list_languages()
11 |     render(conn, "index.json", languages: languages)
12 |   end
13 | 
14 |   def create(conn, %{"language" => language_params}) do
15 |     with {:ok, %Language{} = language} <- Example.create_language(language_params) do
16 |       conn
17 |       |> put_status(:created)
18 |       |> put_resp_header("location", Routes.language_path(conn, :show, language))
19 |       |> render("show.json", language: language)
20 |     end
21 |   end
22 | 
23 |   def show(conn, %{"id" => id}) do
24 |     language = Example.get_language!(id)
25 |     render(conn, "show.json", language: language)
26 |   end
27 | 
28 |   def update(conn, %{"id" => id, "language" => language_params}) do
29 |     language = Example.get_language!(id)
30 | 
31 |     with {:ok, %Language{} = language} <- Example.update_language(language, language_params) do
32 |       render(conn, "show.json", language: language)
33 |     end
34 |   end
35 | 
36 |   def delete(conn, %{"id" => id}) do
37 |     language = Example.get_language!(id)
38 | 
39 |     with {:ok, %Language{}} <- Example.delete_language(language) do
40 |       send_resp(conn, :no_content, "")
41 |     end
42 |   end
43 | end
44 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/controllers/page_controller.ex:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.PageController do
2 |   use PhoenixReactPlaygroundWeb, :controller
3 | 
4 |   def index(conn, _params) do
5 |     render(conn, "index.html")
6 |   end
7 | end
8 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/endpoint.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.Endpoint do
 2 |   use Phoenix.Endpoint, otp_app: :phoenix_react_playground
 3 | 
 4 |   socket "/socket", PhoenixReactPlaygroundWeb.UserSocket,
 5 |     websocket: true,
 6 |     longpoll: false
 7 | 
 8 |   # Serve at "/" the static files from "priv/static" directory.
 9 |   #
10 |   # You should set gzip to true if you are running phx.digest
11 |   # when deploying your static files in production.
12 |   plug Plug.Static,
13 |     at: "/",
14 |     from: :phoenix_react_playground,
15 |     gzip: false,
16 |     only: ~w(css fonts images js favicon.ico robots.txt)
17 | 
18 |   # Code reloading can be explicitly enabled under the
19 |   # :code_reloader configuration of your endpoint.
20 |   if code_reloading? do
21 |     socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
22 |     plug Phoenix.LiveReloader
23 |     plug Phoenix.CodeReloader
24 |   end
25 | 
26 |   plug Plug.RequestId
27 |   plug Plug.Logger
28 | 
29 |   plug Plug.Parsers,
30 |     parsers: [:urlencoded, :multipart, :json],
31 |     pass: ["*/*"],
32 |     json_decoder: Phoenix.json_library()
33 | 
34 |   plug Plug.MethodOverride
35 |   plug Plug.Head
36 | 
37 |   # The session will be stored in the cookie and signed,
38 |   # this means its contents can be read but not tampered with.
39 |   # Set :encryption_salt if you would also like to encrypt it.
40 |   plug Plug.Session,
41 |     store: :cookie,
42 |     key: "_phoenix_react_playground_key",
43 |     signing_salt: "rgGfuEiO"
44 | 
45 |   plug PhoenixReactPlaygroundWeb.Router
46 | end
47 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/gettext.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.Gettext do
 2 |   @moduledoc """
 3 |   A module providing Internationalization with a gettext-based API.
 4 | 
 5 |   By using [Gettext](https://hexdocs.pm/gettext),
 6 |   your module gains a set of macros for translations, for example:
 7 | 
 8 |       import PhoenixReactPlaygroundWeb.Gettext
 9 | 
10 |       # Simple translation
11 |       gettext("Here is the string to translate")
12 | 
13 |       # Plural translation
14 |       ngettext("Here is the string to translate",
15 |                "Here are the strings to translate",
16 |                3)
17 | 
18 |       # Domain-based translation
19 |       dgettext("errors", "Here is the error message to translate")
20 | 
21 |   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
22 |   """
23 |   use Gettext, otp_app: :phoenix_react_playground
24 | end
25 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/router.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.Router do
 2 |   use PhoenixReactPlaygroundWeb, :router
 3 | 
 4 |   pipeline :browser do
 5 |     plug :accepts, ["html"]
 6 |     plug :fetch_session
 7 |     plug :fetch_flash
 8 |     plug :protect_from_forgery
 9 |     plug :put_secure_browser_headers
10 |   end
11 | 
12 |   pipeline :api do
13 |     plug :accepts, ["json"]
14 |   end
15 | 
16 |   scope "/api", PhoenixReactPlaygroundWeb do
17 |     pipe_through :api
18 | 
19 |     resources "/languages", LanguageController, except: [:new, :edit]
20 |   end
21 | 
22 |   scope "/", PhoenixReactPlaygroundWeb do
23 |     pipe_through :browser
24 | 
25 |     get "/*path", PageController, :index
26 |   end
27 | 
28 |   # Other scopes may use custom stacks.
29 |   # scope "/api", PhoenixReactPlaygroundWeb do
30 |   #   pipe_through :api
31 |   # end
32 | end
33 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/templates/layout/app.html.eex:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8"/>
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 7 |     <title>PhoenixReactPlayground · Phoenix Framework</title>
 8 |     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
 9 |   </head>
10 |   <body>
11 |     <%= render @view_module, @view_template, assigns %>
12 |     <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/templates/page/index.html.eex:
--------------------------------------------------------------------------------
1 | <div id="react-app"></div>
2 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/changeset_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ChangesetView do
 2 |   use PhoenixReactPlaygroundWeb, :view
 3 | 
 4 |   @doc """
 5 |   Traverses and translates changeset errors.
 6 | 
 7 |   See `Ecto.Changeset.traverse_errors/2` and
 8 |   `PhoenixReactPlaygroundWeb.ErrorHelpers.translate_error/1` for more details.
 9 |   """
10 |   def translate_errors(changeset) do
11 |     Ecto.Changeset.traverse_errors(changeset, &translate_error/1)
12 |   end
13 | 
14 |   def render("error.json", %{changeset: changeset}) do
15 |     # When encoded, the changeset returns its errors
16 |     # as a JSON object. So we just pass it forward.
17 |     %{errors: translate_errors(changeset)}
18 |   end
19 | end
20 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/error_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ErrorHelpers do
 2 |   @moduledoc """
 3 |   Conveniences for translating and building error messages.
 4 |   """
 5 | 
 6 |   use Phoenix.HTML
 7 | 
 8 |   @doc """
 9 |   Generates tag for inlined form input errors.
10 |   """
11 |   def error_tag(form, field) do
12 |     Enum.map(Keyword.get_values(form.errors, field), fn error ->
13 |       content_tag(:span, translate_error(error), class: "help-block")
14 |     end)
15 |   end
16 | 
17 |   @doc """
18 |   Translates an error message using gettext.
19 |   """
20 |   def translate_error({msg, opts}) do
21 |     # When using gettext, we typically pass the strings we want
22 |     # to translate as a static argument:
23 |     #
24 |     #     # Translate "is invalid" in the "errors" domain
25 |     #     dgettext("errors", "is invalid")
26 |     #
27 |     #     # Translate the number of files with plural rules
28 |     #     dngettext("errors", "1 file", "%{count} files", count)
29 |     #
30 |     # Because the error messages we show in our forms and APIs
31 |     # are defined inside Ecto, we need to translate them dynamically.
32 |     # This requires us to call the Gettext module passing our gettext
33 |     # backend as first argument.
34 |     #
35 |     # Note we use the "errors" domain, which means translations
36 |     # should be written to the errors.po file. The :count option is
37 |     # set by Ecto and indicates we should also apply plural rules.
38 |     if count = opts[:count] do
39 |       Gettext.dngettext(PhoenixReactPlaygroundWeb.Gettext, "errors", msg, msg, count, opts)
40 |     else
41 |       Gettext.dgettext(PhoenixReactPlaygroundWeb.Gettext, "errors", msg, opts)
42 |     end
43 |   end
44 | end
45 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/error_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ErrorView do
 2 |   use PhoenixReactPlaygroundWeb, :view
 3 | 
 4 |   # If you want to customize a particular status code
 5 |   # for a certain format, you may uncomment below.
 6 |   # def render("500.html", _assigns) do
 7 |   #   "Internal Server Error"
 8 |   # end
 9 | 
10 |   # By default, Phoenix returns the status message from
11 |   # the template name. For example, "404.html" becomes
12 |   # "Not Found".
13 |   def template_not_found(template, _assigns) do
14 |     Phoenix.Controller.status_message_from_template(template)
15 |   end
16 | end
17 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/language_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.LanguageView do
 2 |   use PhoenixReactPlaygroundWeb, :view
 3 |   alias PhoenixReactPlaygroundWeb.LanguageView
 4 | 
 5 |   def render("index.json", %{languages: languages}) do
 6 |     %{data: render_many(languages, LanguageView, "language.json")}
 7 |   end
 8 | 
 9 |   def render("show.json", %{language: language}) do
10 |     %{data: render_one(language, LanguageView, "language.json")}
11 |   end
12 | 
13 |   def render("language.json", %{language: language}) do
14 |     %{id: language.id,
15 |       name: language.name,
16 |       proverb: language.proverb}
17 |   end
18 | end
19 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/layout_view.ex:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.LayoutView do
2 |   use PhoenixReactPlaygroundWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/phoenix_react_playground_web/views/page_view.ex:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.PageView do
2 |   use PhoenixReactPlaygroundWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/mix.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.MixProject do
 2 |   use Mix.Project
 3 | 
 4 |   def project do
 5 |     [
 6 |       app: :phoenix_react_playground,
 7 |       version: "0.1.0",
 8 |       elixir: "~> 1.5",
 9 |       elixirc_paths: elixirc_paths(Mix.env()),
10 |       compilers: [:phoenix, :gettext] ++ Mix.compilers(),
11 |       start_permanent: Mix.env() == :prod,
12 |       aliases: aliases(),
13 |       deps: deps()
14 |     ]
15 |   end
16 | 
17 |   # Configuration for the OTP application.
18 |   #
19 |   # Type `mix help compile.app` for more information.
20 |   def application do
21 |     [
22 |       mod: {PhoenixReactPlayground.Application, []},
23 |       extra_applications: [:logger, :runtime_tools]
24 |     ]
25 |   end
26 | 
27 |   # Specifies which paths to compile per environment.
28 |   defp elixirc_paths(:test), do: ["lib", "test/support"]
29 |   defp elixirc_paths(_), do: ["lib"]
30 | 
31 |   # Specifies your project dependencies.
32 |   #
33 |   # Type `mix help deps` for examples and options.
34 |   defp deps do
35 |     [
36 |       {:phoenix, "~> 1.4.0"},
37 |       {:phoenix_pubsub, "~> 1.1"},
38 |       {:phoenix_ecto, "~> 4.0"},
39 |       {:ecto_sql, "~> 3.0"},
40 |       {:postgrex, ">= 0.0.0"},
41 |       {:phoenix_html, "~> 2.11"},
42 |       {:phoenix_live_reload, "~> 1.2", only: :dev},
43 |       {:gettext, "~> 0.11"},
44 |       {:jason, "~> 1.0"},
45 |       {:plug_cowboy, "~> 2.0"}
46 |     ]
47 |   end
48 | 
49 |   # Aliases are shortcuts or tasks specific to the current project.
50 |   # For example, to create, migrate and run the seeds file at once:
51 |   #
52 |   #     $ mix ecto.setup
53 |   #
54 |   # See the documentation for `Mix` for more info on aliases.
55 |   defp aliases do
56 |     [
57 |       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
58 |       "ecto.reset": ["ecto.drop", "ecto.setup"],
59 |       test: ["ecto.create --quiet", "ecto.migrate", "test"]
60 |     ]
61 |   end
62 | end
63 | 


--------------------------------------------------------------------------------
/mix.lock:
--------------------------------------------------------------------------------
 1 | %{
 2 |   "connection": {:hex, :connection, "1.0.4", "a1cae72211f0eef17705aaededacac3eb30e6625b04a6117c1b2db6ace7d5976", [:mix], [], "hexpm"},
 3 |   "cowboy": {:hex, :cowboy, "2.6.1", "f2e06f757c337b3b311f9437e6e072b678fcd71545a7b2865bdaa154d078593f", [:rebar3], [{:cowlib, "~> 2.7.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "~> 1.7.1", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm"},
 4 |   "cowlib": {:hex, :cowlib, "2.7.0", "3ef16e77562f9855a2605900cedb15c1462d76fb1be6a32fc3ae91973ee543d2", [:rebar3], [], "hexpm"},
 5 |   "db_connection": {:hex, :db_connection, "2.0.3", "b4e8aa43c100e16f122ccd6798cd51c48c79fd391c39d411f42b3cd765daccb0", [:mix], [{:connection, "~> 1.0.2", [hex: :connection, repo: "hexpm", optional: false]}], "hexpm"},
 6 |   "decimal": {:hex, :decimal, "1.6.0", "bfd84d90ff966e1f5d4370bdd3943432d8f65f07d3bab48001aebd7030590dcc", [:mix], [], "hexpm"},
 7 |   "ecto": {:hex, :ecto, "3.0.6", "d33ab5b3f7553a41507d4b0ad5bf192d533119c4ad08f3a5d63d85aa12117dc9", [:mix], [{:decimal, "~> 1.6", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:poison, "~> 2.2 or ~> 3.0", [hex: :poison, repo: "hexpm", optional: true]}], "hexpm"},
 8 |   "ecto_sql": {:hex, :ecto_sql, "3.0.4", "e7a0feb0b2484b90981c56d5cd03c52122c1c31ded0b95ed213b7c5c07ae6737", [:mix], [{:db_connection, "~> 2.0", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.0.6", [hex: :ecto, repo: "hexpm", optional: false]}, {:mariaex, "~> 0.9.1", [hex: :mariaex, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.14.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.3.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm"},
 9 |   "file_system": {:hex, :file_system, "0.2.6", "fd4dc3af89b9ab1dc8ccbcc214a0e60c41f34be251d9307920748a14bf41f1d3", [:mix], [], "hexpm"},
10 |   "gettext": {:hex, :gettext, "0.16.1", "e2130b25eebcbe02bb343b119a07ae2c7e28bd4b146c4a154da2ffb2b3507af2", [:mix], [], "hexpm"},
11 |   "jason": {:hex, :jason, "1.1.2", "b03dedea67a99223a2eaf9f1264ce37154564de899fd3d8b9a21b1a6fd64afe7", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm"},
12 |   "mime": {:hex, :mime, "1.3.1", "30ce04ab3175b6ad0bdce0035cba77bba68b813d523d1aac73d9781b4d193cf8", [:mix], [], "hexpm"},
13 |   "phoenix": {:hex, :phoenix, "1.4.0", "56fe9a809e0e735f3e3b9b31c1b749d4b436e466d8da627b8d82f90eaae714d2", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 1.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}], "hexpm"},
14 |   "phoenix_ecto": {:hex, :phoenix_ecto, "4.0.0", "c43117a136e7399ea04ecaac73f8f23ee0ffe3e07acfcb8062fe5f4c9f0f6531", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.9", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
15 |   "phoenix_html": {:hex, :phoenix_html, "2.13.1", "fa8f034b5328e2dfa0e4131b5569379003f34bc1fafdaa84985b0b9d2f12e68b", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
16 |   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.0", "3bb31a9fbd40ffe8652e60c8660dffd72dd231efcdf49b744fb75b9ef7db5dd2", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm"},
17 |   "phoenix_pubsub": {:hex, :phoenix_pubsub, "1.1.1", "6668d787e602981f24f17a5fbb69cc98f8ab085114ebfac6cc36e10a90c8e93c", [:mix], [], "hexpm"},
18 |   "plug": {:hex, :plug, "1.7.1", "8516d565fb84a6a8b2ca722e74e2cd25ca0fc9d64f364ec9dbec09d33eb78ccd", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}], "hexpm"},
19 |   "plug_cowboy": {:hex, :plug_cowboy, "2.0.1", "d798f8ee5acc86b7d42dbe4450b8b0dadf665ce588236eb0a751a132417a980e", [:mix], [{:cowboy, "~> 2.5", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm"},
20 |   "plug_crypto": {:hex, :plug_crypto, "1.0.0", "18e49317d3fa343f24620ed22795ec29d4a5e602d52d1513ccea0b07d8ea7d4d", [:mix], [], "hexpm"},
21 |   "postgrex": {:hex, :postgrex, "0.14.1", "63247d4a5ad6b9de57a0bac5d807e1c32d41e39c04b8a4156a26c63bcd8a2e49", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.0", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm"},
22 |   "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm"},
23 |   "telemetry": {:hex, :telemetry, "0.3.0", "099a7f3ce31e4780f971b4630a3c22ec66d22208bc090fe33a2a3a6a67754a73", [:rebar3], [], "hexpm"},
24 | }
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "repository": {},
 3 |   "license": "MIT",
 4 |   "scripts": {
 5 |     "deploy": "webpack --mode production",
 6 |     "watch": "webpack --mode development --watch"
 7 |   },
 8 |   "dependencies": {
 9 |     "milligram": "^1.3.0",
10 |     "phoenix": "file:deps/phoenix",
11 |     "phoenix_html": "file:deps/phoenix_html",
12 |     "react": "^16.7.0",
13 |     "react-dom": "^16.7.0",
14 |     "react-router-dom": "^4.3.1"
15 |   },
16 |   "devDependencies": {
17 |     "@babel/core": "^7.0.0",
18 |     "@babel/plugin-proposal-class-properties": "^7.2.3",
19 |     "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
20 |     "@babel/preset-env": "^7.0.0",
21 |     "@babel/preset-react": "^7.0.0",
22 |     "@babel/preset-typescript": "^7.1.0",
23 |     "@types/react": "^16.7.18",
24 |     "@types/react-dom": "^16.0.11",
25 |     "@types/react-router-dom": "^4.3.1",
26 |     "babel-loader": "^8.0.0",
27 |     "copy-webpack-plugin": "^4.5.0",
28 |     "css-loader": "^0.28.10",
29 |     "mini-css-extract-plugin": "^0.4.0",
30 |     "optimize-css-assets-webpack-plugin": "^4.0.0",
31 |     "typescript": "^3.2.2",
32 |     "uglifyjs-webpack-plugin": "^1.2.4",
33 |     "webpack": "4.28.4",
34 |     "webpack-cli": "^3.2.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/priv/gettext/en/LC_MESSAGES/errors.po:
--------------------------------------------------------------------------------
 1 | ## `msgid`s in this file come from POT (.pot) files.
 2 | ##
 3 | ## Do not add, change, or remove `msgid`s manually here as
 4 | ## they're tied to the ones in the corresponding POT file
 5 | ## (with the same domain).
 6 | ##
 7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge`
 8 | ## to merge POT files into PO files.
 9 | msgid ""
10 | msgstr ""
11 | "Language: en\n"
12 | 
13 | ## From Ecto.Changeset.cast/4
14 | msgid "can't be blank"
15 | msgstr ""
16 | 
17 | ## From Ecto.Changeset.unique_constraint/3
18 | msgid "has already been taken"
19 | msgstr ""
20 | 
21 | ## From Ecto.Changeset.put_change/3
22 | msgid "is invalid"
23 | msgstr ""
24 | 
25 | ## From Ecto.Changeset.validate_acceptance/3
26 | msgid "must be accepted"
27 | msgstr ""
28 | 
29 | ## From Ecto.Changeset.validate_format/3
30 | msgid "has invalid format"
31 | msgstr ""
32 | 
33 | ## From Ecto.Changeset.validate_subset/3
34 | msgid "has an invalid entry"
35 | msgstr ""
36 | 
37 | ## From Ecto.Changeset.validate_exclusion/3
38 | msgid "is reserved"
39 | msgstr ""
40 | 
41 | ## From Ecto.Changeset.validate_confirmation/3
42 | msgid "does not match confirmation"
43 | msgstr ""
44 | 
45 | ## From Ecto.Changeset.no_assoc_constraint/3
46 | msgid "is still associated with this entry"
47 | msgstr ""
48 | 
49 | msgid "are still associated with this entry"
50 | msgstr ""
51 | 
52 | ## From Ecto.Changeset.validate_length/3
53 | msgid "should be %{count} character(s)"
54 | msgid_plural "should be %{count} character(s)"
55 | msgstr[0] ""
56 | msgstr[1] ""
57 | 
58 | msgid "should have %{count} item(s)"
59 | msgid_plural "should have %{count} item(s)"
60 | msgstr[0] ""
61 | msgstr[1] ""
62 | 
63 | msgid "should be at least %{count} character(s)"
64 | msgid_plural "should be at least %{count} character(s)"
65 | msgstr[0] ""
66 | msgstr[1] ""
67 | 
68 | msgid "should have at least %{count} item(s)"
69 | msgid_plural "should have at least %{count} item(s)"
70 | msgstr[0] ""
71 | msgstr[1] ""
72 | 
73 | msgid "should be at most %{count} character(s)"
74 | msgid_plural "should be at most %{count} character(s)"
75 | msgstr[0] ""
76 | msgstr[1] ""
77 | 
78 | msgid "should have at most %{count} item(s)"
79 | msgid_plural "should have at most %{count} item(s)"
80 | msgstr[0] ""
81 | msgstr[1] ""
82 | 
83 | ## From Ecto.Changeset.validate_number/3
84 | msgid "must be less than %{number}"
85 | msgstr ""
86 | 
87 | msgid "must be greater than %{number}"
88 | msgstr ""
89 | 
90 | msgid "must be less than or equal to %{number}"
91 | msgstr ""
92 | 
93 | msgid "must be greater than or equal to %{number}"
94 | msgstr ""
95 | 
96 | msgid "must be equal to %{number}"
97 | msgstr ""
98 | 


--------------------------------------------------------------------------------
/priv/gettext/errors.pot:
--------------------------------------------------------------------------------
 1 | ## This is a PO Template file.
 2 | ##
 3 | ## `msgid`s here are often extracted from source code.
 4 | ## Add new translations manually only if they're dynamic
 5 | ## translations that can't be statically extracted.
 6 | ##
 7 | ## Run `mix gettext.extract` to bring this file up to
 8 | ## date. Leave `msgstr`s empty as changing them here has no
 9 | ## effect: edit them in PO (`.po`) files instead.
10 | 
11 | ## From Ecto.Changeset.cast/4
12 | msgid "can't be blank"
13 | msgstr ""
14 | 
15 | ## From Ecto.Changeset.unique_constraint/3
16 | msgid "has already been taken"
17 | msgstr ""
18 | 
19 | ## From Ecto.Changeset.put_change/3
20 | msgid "is invalid"
21 | msgstr ""
22 | 
23 | ## From Ecto.Changeset.validate_acceptance/3
24 | msgid "must be accepted"
25 | msgstr ""
26 | 
27 | ## From Ecto.Changeset.validate_format/3
28 | msgid "has invalid format"
29 | msgstr ""
30 | 
31 | ## From Ecto.Changeset.validate_subset/3
32 | msgid "has an invalid entry"
33 | msgstr ""
34 | 
35 | ## From Ecto.Changeset.validate_exclusion/3
36 | msgid "is reserved"
37 | msgstr ""
38 | 
39 | ## From Ecto.Changeset.validate_confirmation/3
40 | msgid "does not match confirmation"
41 | msgstr ""
42 | 
43 | ## From Ecto.Changeset.no_assoc_constraint/3
44 | msgid "is still associated with this entry"
45 | msgstr ""
46 | 
47 | msgid "are still associated with this entry"
48 | msgstr ""
49 | 
50 | ## From Ecto.Changeset.validate_length/3
51 | msgid "should be %{count} character(s)"
52 | msgid_plural "should be %{count} character(s)"
53 | msgstr[0] ""
54 | msgstr[1] ""
55 | 
56 | msgid "should have %{count} item(s)"
57 | msgid_plural "should have %{count} item(s)"
58 | msgstr[0] ""
59 | msgstr[1] ""
60 | 
61 | msgid "should be at least %{count} character(s)"
62 | msgid_plural "should be at least %{count} character(s)"
63 | msgstr[0] ""
64 | msgstr[1] ""
65 | 
66 | msgid "should have at least %{count} item(s)"
67 | msgid_plural "should have at least %{count} item(s)"
68 | msgstr[0] ""
69 | msgstr[1] ""
70 | 
71 | msgid "should be at most %{count} character(s)"
72 | msgid_plural "should be at most %{count} character(s)"
73 | msgstr[0] ""
74 | msgstr[1] ""
75 | 
76 | msgid "should have at most %{count} item(s)"
77 | msgid_plural "should have at most %{count} item(s)"
78 | msgstr[0] ""
79 | msgstr[1] ""
80 | 
81 | ## From Ecto.Changeset.validate_number/3
82 | msgid "must be less than %{number}"
83 | msgstr ""
84 | 
85 | msgid "must be greater than %{number}"
86 | msgstr ""
87 | 
88 | msgid "must be less than or equal to %{number}"
89 | msgstr ""
90 | 
91 | msgid "must be greater than or equal to %{number}"
92 | msgstr ""
93 | 
94 | msgid "must be equal to %{number}"
95 | msgstr ""
96 | 


--------------------------------------------------------------------------------
/priv/repo/migrations/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 |   import_deps: [:ecto_sql],
3 |   inputs: ["*.exs"]
4 | ]
5 | 


--------------------------------------------------------------------------------
/priv/repo/migrations/20190116173737_create_languages.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.Repo.Migrations.CreateLanguages do
 2 |   use Ecto.Migration
 3 | 
 4 |   def change do
 5 |     create table(:languages) do
 6 |       add :name, :string
 7 |       add :proverb, :string
 8 | 
 9 |       timestamps()
10 |     end
11 | 
12 |   end
13 | end
14 | 


--------------------------------------------------------------------------------
/priv/repo/seeds.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.DatabaseSeeder do
 2 |   @moduledoc """
 3 |   Script for populating the database. You can run it as:
 4 | 
 5 |       mix run priv/repo/seeds.exs
 6 | 
 7 |   Inside the script, you can read and write to any of your
 8 |   repositories directly:
 9 | 
10 |       PhoenixReactPlayground.Repo.insert!(%PhoenixReactPlayground.SomeSchema{})
11 | 
12 |   We recommend using the bang functions (`insert!`, `update!`
13 |   and so on) as they will fail if something goes wrong.
14 |   """
15 |   alias PhoenixReactPlayground.Repo
16 |   alias PhoenixReactPlayground.Example.Language
17 | 
18 |   # Clear the database first before seeding
19 |   Repo.delete_all Language
20 | 
21 |   Repo.insert! %Language{
22 |     name: "English",
23 |     proverb: "A penny saved is a penny earned.",
24 |   }
25 | 
26 |   Repo.insert! %Language{
27 |     name: "Indonesian",
28 |     proverb: "Dimana ada kemauan, di situ ada jalan.",
29 |   }
30 | 
31 |   Repo.insert! %Language{
32 |     name: "Dutch",
33 |     proverb: "Die goed doet, goed ontmoet.",
34 |   }
35 | end
36 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground/example/example_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.ExampleTest do
 2 |   use PhoenixReactPlayground.DataCase
 3 | 
 4 |   alias PhoenixReactPlayground.Example
 5 | 
 6 |   describe "languages" do
 7 |     alias PhoenixReactPlayground.Example.Language
 8 | 
 9 |     @valid_attrs %{name: "some name", proverb: "some proverb"}
10 |     @update_attrs %{name: "some updated name", proverb: "some updated proverb"}
11 |     @invalid_attrs %{name: nil, proverb: nil}
12 | 
13 |     def language_fixture(attrs \\ %{}) do
14 |       {:ok, language} =
15 |         attrs
16 |         |> Enum.into(@valid_attrs)
17 |         |> Example.create_language()
18 | 
19 |       language
20 |     end
21 | 
22 |     test "list_languages/0 returns all languages" do
23 |       language = language_fixture()
24 |       assert Example.list_languages() == [language]
25 |     end
26 | 
27 |     test "get_language!/1 returns the language with given id" do
28 |       language = language_fixture()
29 |       assert Example.get_language!(language.id) == language
30 |     end
31 | 
32 |     test "create_language/1 with valid data creates a language" do
33 |       assert {:ok, %Language{} = language} = Example.create_language(@valid_attrs)
34 |       assert language.name == "some name"
35 |       assert language.proverb == "some proverb"
36 |     end
37 | 
38 |     test "create_language/1 with invalid data returns error changeset" do
39 |       assert {:error, %Ecto.Changeset{}} = Example.create_language(@invalid_attrs)
40 |     end
41 | 
42 |     test "update_language/2 with valid data updates the language" do
43 |       language = language_fixture()
44 |       assert {:ok, %Language{} = language} = Example.update_language(language, @update_attrs)
45 |       assert language.name == "some updated name"
46 |       assert language.proverb == "some updated proverb"
47 |     end
48 | 
49 |     test "update_language/2 with invalid data returns error changeset" do
50 |       language = language_fixture()
51 |       assert {:error, %Ecto.Changeset{}} = Example.update_language(language, @invalid_attrs)
52 |       assert language == Example.get_language!(language.id)
53 |     end
54 | 
55 |     test "delete_language/1 deletes the language" do
56 |       language = language_fixture()
57 |       assert {:ok, %Language{}} = Example.delete_language(language)
58 |       assert_raise Ecto.NoResultsError, fn -> Example.get_language!(language.id) end
59 |     end
60 | 
61 |     test "change_language/1 returns a language changeset" do
62 |       language = language_fixture()
63 |       assert %Ecto.Changeset{} = Example.change_language(language)
64 |     end
65 |   end
66 | end
67 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground_web/controllers/language_controller_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.LanguageControllerTest do
 2 |   use PhoenixReactPlaygroundWeb.ConnCase
 3 | 
 4 |   alias PhoenixReactPlayground.Example
 5 |   alias PhoenixReactPlayground.Example.Language
 6 | 
 7 |   @create_attrs %{
 8 |     name: "some name",
 9 |     proverb: "some proverb"
10 |   }
11 |   @update_attrs %{
12 |     name: "some updated name",
13 |     proverb: "some updated proverb"
14 |   }
15 |   @invalid_attrs %{name: nil, proverb: nil}
16 | 
17 |   def fixture(:language) do
18 |     {:ok, language} = Example.create_language(@create_attrs)
19 |     language
20 |   end
21 | 
22 |   setup %{conn: conn} do
23 |     {:ok, conn: put_req_header(conn, "accept", "application/json")}
24 |   end
25 | 
26 |   describe "index" do
27 |     test "lists all languages", %{conn: conn} do
28 |       conn = get(conn, Routes.language_path(conn, :index))
29 |       assert json_response(conn, 200)["data"] == []
30 |     end
31 |   end
32 | 
33 |   describe "create language" do
34 |     test "renders language when data is valid", %{conn: conn} do
35 |       conn = post(conn, Routes.language_path(conn, :create), language: @create_attrs)
36 |       assert %{"id" => id} = json_response(conn, 201)["data"]
37 | 
38 |       conn = get(conn, Routes.language_path(conn, :show, id))
39 | 
40 |       assert %{
41 |                "id" => id,
42 |                "name" => "some name",
43 |                "proverb" => "some proverb"
44 |              } = json_response(conn, 200)["data"]
45 |     end
46 | 
47 |     test "renders errors when data is invalid", %{conn: conn} do
48 |       conn = post(conn, Routes.language_path(conn, :create), language: @invalid_attrs)
49 |       assert json_response(conn, 422)["errors"] != %{}
50 |     end
51 |   end
52 | 
53 |   describe "update language" do
54 |     setup [:create_language]
55 | 
56 |     test "renders language when data is valid", %{conn: conn, language: %Language{id: id} = language} do
57 |       conn = put(conn, Routes.language_path(conn, :update, language), language: @update_attrs)
58 |       assert %{"id" => ^id} = json_response(conn, 200)["data"]
59 | 
60 |       conn = get(conn, Routes.language_path(conn, :show, id))
61 | 
62 |       assert %{
63 |                "id" => id,
64 |                "name" => "some updated name",
65 |                "proverb" => "some updated proverb"
66 |              } = json_response(conn, 200)["data"]
67 |     end
68 | 
69 |     test "renders errors when data is invalid", %{conn: conn, language: language} do
70 |       conn = put(conn, Routes.language_path(conn, :update, language), language: @invalid_attrs)
71 |       assert json_response(conn, 422)["errors"] != %{}
72 |     end
73 |   end
74 | 
75 |   describe "delete language" do
76 |     setup [:create_language]
77 | 
78 |     test "deletes chosen language", %{conn: conn, language: language} do
79 |       conn = delete(conn, Routes.language_path(conn, :delete, language))
80 |       assert response(conn, 204)
81 | 
82 |       assert_error_sent 404, fn ->
83 |         get(conn, Routes.language_path(conn, :show, language))
84 |       end
85 |     end
86 |   end
87 | 
88 |   defp create_language(_) do
89 |     language = fixture(:language)
90 |     {:ok, language: language}
91 |   end
92 | end
93 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground_web/controllers/page_controller_test.exs:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.PageControllerTest do
2 |   use PhoenixReactPlaygroundWeb.ConnCase
3 | 
4 |   test "GET /", %{conn: conn} do
5 |     conn = get(conn, "/")
6 |     assert html_response(conn, 200) =~ "Welcome to Phoenix!"
7 |   end
8 | end
9 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground_web/views/error_view_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ErrorViewTest do
 2 |   use PhoenixReactPlaygroundWeb.ConnCase, async: true
 3 | 
 4 |   # Bring render/3 and render_to_string/3 for testing custom views
 5 |   import Phoenix.View
 6 | 
 7 |   test "renders 404.html" do
 8 |     assert render_to_string(PhoenixReactPlaygroundWeb.ErrorView, "404.html", []) == "Not Found"
 9 |   end
10 | 
11 |   test "renders 500.html" do
12 |     assert render_to_string(PhoenixReactPlaygroundWeb.ErrorView, "500.html", []) == "Internal Server Error"
13 |   end
14 | end
15 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground_web/views/layout_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.LayoutViewTest do
2 |   use PhoenixReactPlaygroundWeb.ConnCase, async: true
3 | end
4 | 


--------------------------------------------------------------------------------
/test/phoenix_react_playground_web/views/page_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule PhoenixReactPlaygroundWeb.PageViewTest do
2 |   use PhoenixReactPlaygroundWeb.ConnCase, async: true
3 | end
4 | 


--------------------------------------------------------------------------------
/test/support/channel_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ChannelCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   channel tests.
 5 | 
 6 |   Such tests rely on `Phoenix.ChannelTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   it cannot be async. For this reason, every test runs
12 |   inside a transaction which is reset at the beginning
13 |   of the test unless the test case is marked as async.
14 |   """
15 | 
16 |   use ExUnit.CaseTemplate
17 | 
18 |   using do
19 |     quote do
20 |       # Import conveniences for testing with channels
21 |       use Phoenix.ChannelTest
22 | 
23 |       # The default endpoint for testing
24 |       @endpoint PhoenixReactPlaygroundWeb.Endpoint
25 |     end
26 |   end
27 | 
28 |   setup tags do
29 |     :ok = Ecto.Adapters.SQL.Sandbox.checkout(PhoenixReactPlayground.Repo)
30 | 
31 |     unless tags[:async] do
32 |       Ecto.Adapters.SQL.Sandbox.mode(PhoenixReactPlayground.Repo, {:shared, self()})
33 |     end
34 | 
35 |     :ok
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/test/support/conn_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlaygroundWeb.ConnCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   tests that require setting up a connection.
 5 | 
 6 |   Such tests rely on `Phoenix.ConnTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   it cannot be async. For this reason, every test runs
12 |   inside a transaction which is reset at the beginning
13 |   of the test unless the test case is marked as async.
14 |   """
15 | 
16 |   use ExUnit.CaseTemplate
17 | 
18 |   using do
19 |     quote do
20 |       # Import conveniences for testing with connections
21 |       use Phoenix.ConnTest
22 |       alias PhoenixReactPlaygroundWeb.Router.Helpers, as: Routes
23 | 
24 |       # The default endpoint for testing
25 |       @endpoint PhoenixReactPlaygroundWeb.Endpoint
26 |     end
27 |   end
28 | 
29 |   setup tags do
30 |     :ok = Ecto.Adapters.SQL.Sandbox.checkout(PhoenixReactPlayground.Repo)
31 | 
32 |     unless tags[:async] do
33 |       Ecto.Adapters.SQL.Sandbox.mode(PhoenixReactPlayground.Repo, {:shared, self()})
34 |     end
35 | 
36 |     {:ok, conn: Phoenix.ConnTest.build_conn()}
37 |   end
38 | end
39 | 


--------------------------------------------------------------------------------
/test/support/data_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule PhoenixReactPlayground.DataCase do
 2 |   @moduledoc """
 3 |   This module defines the setup for tests requiring
 4 |   access to the application's data layer.
 5 | 
 6 |   You may define functions here to be used as helpers in
 7 |   your tests.
 8 | 
 9 |   Finally, if the test case interacts with the database,
10 |   it cannot be async. For this reason, every test runs
11 |   inside a transaction which is reset at the beginning
12 |   of the test unless the test case is marked as async.
13 |   """
14 | 
15 |   use ExUnit.CaseTemplate
16 | 
17 |   using do
18 |     quote do
19 |       alias PhoenixReactPlayground.Repo
20 | 
21 |       import Ecto
22 |       import Ecto.Changeset
23 |       import Ecto.Query
24 |       import PhoenixReactPlayground.DataCase
25 |     end
26 |   end
27 | 
28 |   setup tags do
29 |     :ok = Ecto.Adapters.SQL.Sandbox.checkout(PhoenixReactPlayground.Repo)
30 | 
31 |     unless tags[:async] do
32 |       Ecto.Adapters.SQL.Sandbox.mode(PhoenixReactPlayground.Repo, {:shared, self()})
33 |     end
34 | 
35 |     :ok
36 |   end
37 | 
38 |   @doc """
39 |   A helper that transforms changeset errors into a map of messages.
40 | 
41 |       assert {:error, changeset} = Accounts.create_user(%{password: "short"})
42 |       assert "password is too short" in errors_on(changeset).password
43 |       assert %{password: ["password is too short"]} = errors_on(changeset)
44 | 
45 |   """
46 |   def errors_on(changeset) do
47 |     Ecto.Changeset.traverse_errors(changeset, fn {message, opts} ->
48 |       Enum.reduce(opts, message, fn {key, value}, acc ->
49 |         String.replace(acc, "%{#{key}}", to_string(value))
50 |       end)
51 |     end)
52 |   end
53 | end
54 | 


--------------------------------------------------------------------------------
/test/test_helper.exs:
--------------------------------------------------------------------------------
1 | ExUnit.start()
2 | Ecto.Adapters.SQL.Sandbox.mode(PhoenixReactPlayground.Repo, :manual)
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "allowSyntheticDefaultImports": true,
 5 |     "esModuleInterop": true,
 6 |     "isolatedModules": true,
 7 |     "lib": ["dom", "esnext"],
 8 |     "jsx": "preserve",
 9 |     "target": "es2016",
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "preserveConstEnums": true,
13 |     "removeComments": false,
14 |     "sourceMap": true,
15 |     "strict": true
16 |   },
17 |   "include": ["./**/*.ts", "./**/*.tsx"]
18 | }
19 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const glob = require('glob');
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 6 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 7 | 
 8 | module.exports = (env, options) => ({
 9 |   optimization: {
10 |     minimizer: [
11 |       new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
12 |       new OptimizeCSSAssetsPlugin({})
13 |     ]
14 |   },
15 |   entry: {
16 |     app: './assets/js/app.tsx'
17 |   },
18 |   output: {
19 |     filename: 'app.js',
20 |     path: path.resolve(__dirname, 'priv/static/js')
21 |   },
22 |   module: {
23 |     rules: [
24 |       {
25 |         test: /\.(js|jsx|ts|tsx)$/,
26 |         exclude: /node_modules/,
27 |         use: {
28 |           loader: 'babel-loader'
29 |         }
30 |       },
31 |       {
32 |         test: /\.css$/,
33 |         use: [MiniCssExtractPlugin.loader, 'css-loader']
34 |       }
35 |     ]
36 |   },
37 |   plugins: [
38 |     new MiniCssExtractPlugin({ filename: '../css/app.css' }),
39 |     new CopyWebpackPlugin([{ from: 'assets/static/', to: '../' }])
40 |   ],
41 |   resolve: {
42 |     // Add '.ts' and '.tsx' as resolvable extensions.
43 |     extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
44 |   }
45 | });
46 | 


--------------------------------------------------------------------------------