├── .gitignore
├── README.md
├── docs
    └── app-demo.gif
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── App.css
    ├── App.test.tsx
    ├── App.tsx
    ├── components
    │   ├── atoms
    │   │   └── AuthButton
    │   │   │   └── index.tsx
    │   ├── pages
    │   │   ├── AuthCallback
    │   │   │   └── index.tsx
    │   │   ├── Index
    │   │   │   └── index.tsx
    │   │   └── StreamList
    │   │   │   └── index.tsx
    │   └── templates
    │   │   ├── PageColumn
    │   │       └── index.tsx
    │   │   └── Root
    │   │       └── index.tsx
    ├── context
    │   ├── auth.tsx
    │   ├── graphql.tsx
    │   └── user.tsx
    ├── hooks
    │   └── useStreams.tsx
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    └── setupTests.ts
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Speckle Demo React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | Demo: https://speckle-demo-app-react.vercel.app/
 6 | 
 7 | ![](docs/app-demo.gif)
 8 | 
 9 | 
10 | ## Getting Started
11 | 
12 | ### Prerequisites
13 | - [Node.js](https://nodejs.org/en/) (version 14 or higher)
14 | - [Yarn](https://yarnpkg.com/) (version 1.22 or higher)
15 | 
16 | ### Installation
17 | 
18 | To get started, clone this repository and install the dependencies:
19 | 
20 | ```bash
21 | git clone https://github.com/antoinedao/speckle-demo-app-react.git
22 | cd speckle-demo-app-react
23 | yarn install
24 | ```
25 | 
26 | ### Configuration
27 | 
28 | The application requires a Speckle Server to be running and a [Speckle Application](https://speckle.guide/dev/apps.html) to be configured on the server. The application will use the `http://localhost:3000` URL by default, so make sure to configure the application with this URL.
29 | 
30 | This template uses the main [Speckle Server](https://speckle.xyz) by default. To use a different server, you can change the `REACT_APP_SERVER_URL` environment variable in the `.env` file.
31 | 
32 | This template also comes pre-packages with the Application id and secret for the Speckle React App Demo owned by Antoine Dao. You can use it to test the code out before creating you own Application. 
33 | 
34 | To use your own Application, you can change the `REACT_APP_APP_ID` and `REACT_APP_APP_SECRET` environment variables in the `.env` file. You will have to configure the Speckle Application redirect URL to `http(s)://<your-app-url>/auth`.
35 | 
36 | ## Application Structure
37 | 
38 | The application is structured as follows:
39 | 
40 | - `src/components` - contains the React UI components. The subfolders follow the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) methodology:
41 |   - `src/components/atoms` - contains the smallest components, such as buttons, inputs, etc.
42 |   - `src/components/molecules` - contains components that are composed of atoms
43 |   - `src/components/organisms` - contains components that are composed of molecules and/or atoms
44 |   - `src/components/templates` - contains components that are composed of organisms, molecules and/or atoms
45 |   - `src/components/pages` - contains components that are composed of templates, organisms, molecules and/or atoms
46 | - `src/context` - contains React Context objects used to share authentication, user and graphql clients across the application
47 | - `src/hooks` - contains an example React Hook that to featch a list of streams from the Speckle Server
48 | - `src/App.tsx` - the main application component
49 | 
50 | 
51 | ## Available Scripts
52 | 
53 | In the project directory, you can run:
54 | 
55 | ### `yarn start`
56 | 
57 | Runs the app in the development mode.\
58 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
59 | 
60 | The page will reload if you make edits.\
61 | You will also see any lint errors in the console.
62 | 
63 | ### `yarn test`
64 | 
65 | Launches the test runner in the interactive watch mode.\
66 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
67 | 
68 | ### `yarn build`
69 | 
70 | Builds the app for production to the `build` folder.\
71 | It correctly bundles React in production mode and optimizes the build for the best performance.
72 | 
73 | The build is minified and the filenames include the hashes.\
74 | Your app is ready to be deployed!
75 | 
76 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
77 | 
78 | ### `yarn eject`
79 | 
80 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
81 | 
82 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
83 | 
84 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
85 | 
86 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
87 | 
88 | ## Learn More
89 | 
90 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
91 | 
92 | To learn React, check out the [React documentation](https://reactjs.org/).
93 | 


--------------------------------------------------------------------------------
/docs/app-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AntoineDao/speckle-demo-app-react/04b8cf25b2f5be77820870008f415b4f681a4685/docs/app-demo.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@ant-design/icons": "^5.2.5",
 7 |     "@apollo/client": "^3.8.1",
 8 |     "@testing-library/jest-dom": "^5.14.1",
 9 |     "@testing-library/react": "^13.0.0",
10 |     "@testing-library/user-event": "^13.2.1",
11 |     "@types/jest": "^27.0.1",
12 |     "@types/node": "^16.7.13",
13 |     "@types/react": "^18.0.0",
14 |     "@types/react-dom": "^18.0.0",
15 |     "antd": "^5.8.3",
16 |     "graphql": "^16.7.1",
17 |     "lodash": "^4.17.21",
18 |     "moment-timezone": "^0.5.43",
19 |     "react": "^18.2.0",
20 |     "react-dom": "^18.2.0",
21 |     "react-markdown": "^8.0.7",
22 |     "react-moment": "^1.1.3",
23 |     "react-router-dom": "^6.15.0",
24 |     "react-scripts": "5.0.1",
25 |     "react-syntax-highlighter": "^15.5.0",
26 |     "typescript": "^4.4.2",
27 |     "web-vitals": "^2.1.0"
28 |   },
29 |   "scripts": {
30 |     "start": "react-scripts start",
31 |     "build": "react-scripts build",
32 |     "test": "react-scripts test",
33 |     "eject": "react-scripts eject",
34 |     "relocate": "react-scripts build && rm -rf ../server/build && mv -f build ../server"
35 |   },
36 |   "eslintConfig": {
37 |     "extends": [
38 |       "react-app",
39 |       "react-app/jest"
40 |     ]
41 |   },
42 |   "browserslist": {
43 |     "production": [
44 |       ">0.2%",
45 |       "not dead",
46 |       "not op_mini all"
47 |     ],
48 |     "development": [
49 |       "last 1 chrome version",
50 |       "last 1 firefox version",
51 |       "last 1 safari version"
52 |     ]
53 |   },
54 |   "devDependencies": {
55 |     "@types/lodash": "^4.14.197",
56 |     "@types/react-syntax-highlighter": "^15.5.7"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AntoineDao/speckle-demo-app-react/04b8cf25b2f5be77820870008f415b4f681a4685/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Speckle React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AntoineDao/speckle-demo-app-react/04b8cf25b2f5be77820870008f415b4f681a4685/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AntoineDao/speckle-demo-app-react/04b8cf25b2f5be77820870008f415b4f681a4685/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Funckle",
 3 |   "name": "Build and Deploy Funky Functions for Speckle",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, screen } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   render(<App />);
 7 |   const linkElement = screen.getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {
 3 |   createBrowserRouter,
 4 |   createRoutesFromElements,
 5 |   RouterProvider,
 6 |   Route,
 7 | } from "react-router-dom";
 8 | 
 9 | import { AuthProvider } from 'context/auth'
10 | import { GraphqlProvider } from 'context/graphql';
11 | import { UserProvider } from 'context/user';
12 | 
13 | import Root from 'components/templates/Root'
14 | import Index from 'components/pages/Index';
15 | import AuthCallback from 'components/pages/AuthCallback';
16 | import StreamList from 'components/pages/StreamList';
17 | 
18 | const App = () => {
19 |   return (
20 |     <AuthProvider>
21 |       <GraphqlProvider>
22 |         <UserProvider>
23 |           <RouterProvider router={createBrowserRouter(
24 |             createRoutesFromElements(
25 |               <Route
26 |                 path=""
27 |                 element={<Root appName='Speckle React Demo' />}
28 |               >
29 |                 <Route index element={<Index />} />
30 |                 <Route path="auth" element={<AuthCallback />} />
31 |                 <Route path="streams" element={<StreamList />} />
32 |               </Route>
33 | 
34 |             )
35 |           )} />
36 |         </UserProvider>
37 |       </GraphqlProvider>
38 |     </AuthProvider>
39 |   );
40 | }
41 | 
42 | export default App;
43 | 


--------------------------------------------------------------------------------
/src/components/atoms/AuthButton/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useAuth } from '../../../context/auth'
 3 | import { Avatar, Button, Space, Typography } from 'antd'
 4 | import { useUser } from '../../../context/user';
 5 | 
 6 | 
 7 | type Props = {}
 8 | 
 9 | const AuthButton = ({ }: Props) => {
10 |     const { token, login, logOut } = useAuth()
11 |     const { user } = useUser()
12 |     return (
13 |         token ?
14 |             (
15 |                 <Space>
16 |                     <Avatar src={user?.avatar} />
17 |                     <Button type='text' onClick={() => logOut()}>
18 |                         <Typography.Title level={5} style={{ margin: 0, color: 'white' }}>
19 |                             Log Out
20 |                         </Typography.Title>
21 |                     </Button>
22 |                 </Space>
23 |             )
24 |             :
25 |             <Button type='text' onClick={() => login()}>
26 |                 <Typography.Title level={5} style={{ margin: 0, color: 'white' }}>
27 |                     Log In
28 |                 </Typography.Title>
29 |             </Button>
30 |     )
31 | }
32 | 
33 | export default AuthButton


--------------------------------------------------------------------------------
/src/components/pages/AuthCallback/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { useSearchParams, useNavigate } from "react-router-dom";
 3 | import { useAuth } from '../../../context/auth'
 4 | 
 5 | type Props = {}
 6 | 
 7 | const AuthCallback = ({ }: Props) => {
 8 |     let [searchParams, setSearchParams] = useSearchParams();
 9 |     const navigate = useNavigate()
10 |     const { exchangeAccessCode } = useAuth()
11 | 
12 |     useEffect(() => {
13 |         if (searchParams.has("access_code")) {
14 |             const accessCode = searchParams.get("access_code")!
15 |             setSearchParams({})
16 |             exchangeAccessCode(accessCode).then(() => {
17 |                 navigate('/')
18 |             })
19 |         }
20 |     }, [searchParams, exchangeAccessCode, setSearchParams, navigate])
21 | 
22 |     return (
23 |         <div>AuthCallback</div>
24 |     )
25 | }
26 | 
27 | 
28 | export default AuthCallback


--------------------------------------------------------------------------------
/src/components/pages/Index/index.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import { Card, Col, Row } from 'antd'
  4 | import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
  5 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
  6 | import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'
  7 | 
  8 | const Index = () => {
  9 | 
 10 |     const introText = `
 11 | # Welcome to Speckle inside React
 12 | 
 13 | # ✨ ❤️ 🕸️
 14 | 
 15 | ## Source Code
 16 | 
 17 | The source code for this application is available on [GitHub](https://github.com/antoinedao/speckle-demo-app-react.git).
 18 | 
 19 | ## User Quick Start
 20 | 
 21 | ### Pre-requisites
 22 | 
 23 | - [Speckle Account](https://speckle.xyz). You must create one first if you don't have one already.
 24 | 
 25 | ### Testing This Application
 26 | You can test this application out by logging in using the "Log In" button on the top right corner. This will take you to the main Speckle Server (https://speckle.xyz) where you can log in using your Speckle Account credentials. Once you log in, you will be redirected back to this application and you will be able to see your user information on the top right corner.
 27 | 
 28 | You can then view your streams by clicking on the "streams" button on the left hand side of this screen.
 29 | 
 30 | And that's it! It's a pretty simple application 😅
 31 | 
 32 | ## Running This Application Locally
 33 | 
 34 | 
 35 | ### Prerequisites
 36 | - [Node.js](https://nodejs.org/en/) (version 14 or higher)
 37 | - [Yarn](https://yarnpkg.com/) (version 1.22 or higher)
 38 | 
 39 | ### Installation
 40 | 
 41 | To get started, clone this repository and install the dependencies:
 42 | 
 43 | \`\`\`bash
 44 | git clone https://github.com/antoinedao/speckle-demo-app-react.git
 45 | cd speckle-demo-app-react
 46 | yarn install
 47 | \`\`\`
 48 | 
 49 | ### Configuration
 50 | 
 51 | The application requires a Speckle Server to be running and a [Speckle Application](https://speckle.guide/dev/apps.html) to be configured on the server. The application will use the \`http://localhost:3000\` URL by default, so make sure to configure the application with this URL.
 52 | 
 53 | This template uses the main [Speckle Server](https://speckle.xyz) by default. To use a different server, you can change the \`REACT_APP_SERVER_URL\` environment variable in the \`.env\` file.
 54 | 
 55 | This template also comes pre-packages with the Application id and secret for the Speckle React App Demo owned by Antoine Dao. You can use it to test the code out before creating you own Application. To use your own Application, you can change the \`REACT_APP_APP_ID\` and \`REACT_APP_APP_SECRET\` environment variables in the \`.env\` file.
 56 | 
 57 | ## Application Structure
 58 | 
 59 | The application is structured as follows:
 60 | 
 61 | - \`src/components\` - contains the React UI components. The subfolders follow the [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) methodology:
 62 |   - \`src/components/atoms\` - contains the smallest components, such as buttons, inputs, etc.
 63 |   - \`src/components/molecules\` - contains components that are composed of atoms
 64 |   - \`src/components/organisms\` - contains components that are composed of molecules and/or atoms
 65 |   - \`src/components/templates\` - contains components that are composed of organisms, molecules and/or atoms
 66 |   - \`src/components/pages\` - contains components that are composed of templates, organisms, molecules and/or atoms
 67 | - \`src/context\` - contains React Context objects used to share authentication, user and graphql clients across the application
 68 | - \`src/hooks\` - contains an example React Hook that to featch a list of streams from the Speckle Server
 69 | - \`src/App.tsx\` - the main application component
 70 | 
 71 | 
 72 |     `
 73 | 
 74 | 
 75 |     return (
 76 |         <Row>
 77 |             <Col span={24}>
 78 |                 <Card>
 79 |                     <ReactMarkdown
 80 |                         children={introText}
 81 |                         components={{
 82 |                             code({ node, inline, className, children, ...props }) {
 83 |                                 const match = /language-(\w+)/.exec(className || '')
 84 |                                 return !inline && match ? (
 85 |                                     <SyntaxHighlighter
 86 |                                         {...props}
 87 |                                         children={String(children).replace(/\n$/, '')}
 88 |                                         style={dracula}
 89 |                                         language={match[1]}
 90 |                                         PreTag="div"
 91 |                                     />
 92 |                                 ) : (
 93 |                                     <code {...props} className={className}>
 94 |                                         {children}
 95 |                                     </code>
 96 |                                 )
 97 |                             }
 98 |                         }}
 99 |                     />
100 |                 </Card>
101 |             </Col>
102 |         </Row>
103 | 
104 |     )
105 | }
106 | 
107 | export default Index


--------------------------------------------------------------------------------
/src/components/pages/StreamList/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import { Card, List, Space, Typography } from 'antd';
 3 | import { BranchesOutlined } from '@ant-design/icons'
 4 | import { Link } from "react-router-dom";
 5 | 
 6 | import { useStreams } from 'hooks/useStreams'
 7 | import PageColumn from 'components/templates/PageColumn';
 8 | 
 9 | const StreamList = () => {
10 |     const { streams, loading, error } = useStreams({})
11 | 
12 |     useEffect(() => {
13 |         console.log(streams)
14 |     }, [streams])
15 |     return (
16 |         <PageColumn
17 |             header={[]}
18 |         >
19 |             <List
20 |                 grid={{
21 |                     gutter: 16,
22 |                     column: 4,
23 |                 }}
24 |                 dataSource={streams}
25 |                 loading={loading}
26 |                 renderItem={(item) => (
27 |                     <List.Item>
28 |                         <Link to={`https://speckle.xyz/streams/${item.id}`}>
29 |                             <Card
30 |                                 loading={loading}
31 |                                 cover={<img alt="example" src='https://speckle.systems/content/images/2021/02/automation.png' />}
32 |                                 bordered
33 |                                 hoverable
34 |                             >
35 |                                 <Card.Meta
36 |                                     title={item.name}
37 |                                     description={
38 |                                         <Space>
39 |                                             <Typography.Text>{item.branches.totalCount} x</Typography.Text>
40 |                                             <BranchesOutlined />
41 |                                         </Space>
42 |                                     }
43 |                                 />
44 |                             </Card>
45 |                         </Link>
46 | 
47 |                     </List.Item>
48 |                 )}
49 |             />
50 |         </PageColumn>
51 |     )
52 | }
53 | 
54 | export default StreamList


--------------------------------------------------------------------------------
/src/components/templates/PageColumn/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Col, Row } from 'antd';
 3 | 
 4 | type Props = {
 5 |     header: React.ReactNode[]
 6 |     children: React.ReactNode
 7 | }
 8 | 
 9 | const PageColumn = (props: Props) => {
10 |     return (
11 |         <Row gutter={[16, 16]}>
12 |             <Col span={24}>
13 |                 <Row
14 |                     justify="space-between"
15 |                     gutter={16}
16 |                 >
17 |                     {props.header.map((item, index) => (
18 |                         <Col key={index}>
19 |                             {item}
20 |                         </Col>
21 |                     ))}
22 |                 </Row>
23 |             </Col>
24 |             <Col span={24}>
25 |                 {props.children}
26 |             </Col>
27 |         </Row>
28 |     )
29 | }
30 | 
31 | export default PageColumn


--------------------------------------------------------------------------------
/src/components/templates/Root/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Outlet, Link } from "react-router-dom";
 3 | import { Typography, Layout, Menu, Row, Col, Space } from 'antd';
 4 | import { DatabaseFilled } from '@ant-design/icons';
 5 | import AuthButton from 'components/atoms/AuthButton';
 6 | 
 7 | const { Header, Content, Footer } = Layout;
 8 | 
 9 | type Props = {
10 |     appName?: string
11 |     children?: React.ReactNode
12 | }
13 | 
14 | 
15 | const Root = ({ children, appName }: Props) => {
16 |     return (
17 |         <Layout className="layout">
18 |             <Header>
19 |                 <Row justify='space-between' align='middle'>
20 |                     <Col>
21 |                         <Link to='/'>
22 |                             <div className="demo-logo">
23 |                                 <Typography.Title level={3} style={{ margin: 0, color: 'white' }}>{appName}</Typography.Title>
24 |                             </div>
25 |                         </Link>
26 |                     </Col>
27 |                     <Col>
28 |                         <AuthButton />
29 |                     </Col>
30 |                 </Row>
31 | 
32 | 
33 |             </Header>
34 |             <Layout hasSider>
35 |                 <Layout.Sider width={200} className="site-layout-background">
36 |                     <Menu
37 |                         style={{ height: '100%', borderRight: 0 }}
38 | 
39 |                         mode="inline"
40 |                         items={[{
41 |                             key: 'streams',
42 |                             label: (
43 |                                 <Link to='/streams'>
44 |                                     <Space>
45 |                                         <DatabaseFilled />
46 |                                         Streams
47 |                                     </Space>
48 |                                 </Link>
49 |                             )
50 |                         }]}
51 |                     />
52 |                 </Layout.Sider>
53 |                 <Content style={{ padding: '20px 20px', minHeight: '90vh' }}>
54 |                     {
55 |                         children ? children : <Outlet />
56 | 
57 |                     }
58 |                 </Content>
59 |             </Layout>
60 | 
61 |             <Footer style={{ textAlign: 'center' }}>Made with ❤️ by <Link to='https://github.com/antoinedao'>Antoine Dao</Link></Footer>
62 |         </Layout >
63 |     );
64 | };
65 | 
66 | export default Root;
67 | 


--------------------------------------------------------------------------------
/src/context/auth.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | export const APP_NAME = 'SpeckleReactDemo'
 3 | export const TOKEN = `${APP_NAME}.AuthToken`
 4 | export const REFRESH_TOKEN = `${APP_NAME}.RefreshToken`
 5 | export const CHALLENGE = `${APP_NAME}.Challenge`
 6 | 
 7 | export const SERVER_URL = process.env.REACT_APP_SERVER_URL ?? 'https://speckle.xyz'
 8 | const SPECKLE_APP_ID = process.env.REACT_APP_APP_ID ?? '9397f1dfb2'
 9 | const SPECKLE_APP_SECRET = process.env.REACT_APP_APP_SECRET ?? '94217b3eee'
10 | 
11 | // Create an auth context
12 | export const AuthContext = React.createContext({
13 |     token: null as string | null,
14 |     refreshToken: null as string | null,
15 |     login: () => { },
16 |     exchangeAccessCode: (accessCode: string) => Promise.resolve(),
17 |     logOut: () => { }
18 | })
19 | 
20 | 
21 | // Create an auth provider
22 | export const AuthProvider = ({ children }: any) => {
23 | 
24 |     // Get the token and refreshToken from localStorage
25 |     const [token, setToken] = React.useState(localStorage.getItem(TOKEN))
26 |     const [refreshToken, setRefreshToken] = React.useState(localStorage.getItem(REFRESH_TOKEN))
27 | 
28 |     // Create a login function that redirects to the Speckle server authentication page
29 |     const login = () => {
30 |         // Generate random challenge
31 |         var challenge =
32 |             Math.random()
33 |                 .toString(36)
34 |                 .substring(2, 15) +
35 |             Math.random()
36 |                 .toString(36)
37 |                 .substring(2, 15)
38 |         // Save challenge in localStorage
39 |         localStorage.setItem(CHALLENGE, challenge)
40 |         // Send user to auth page
41 |         // @ts-ignore
42 |         window.location = `${SERVER_URL}/authn/verify/${SPECKLE_APP_ID}/${challenge}`
43 |     }
44 | 
45 |     // Create a logOut function that removes the token and refreshToken from localStorage
46 |     const logOut = () => {
47 |         localStorage.removeItem(TOKEN)
48 |         localStorage.removeItem(REFRESH_TOKEN)
49 |         setToken(null)
50 |         setRefreshToken(null)
51 |     }
52 | 
53 |     // Create an exchangeAccessCode function that exchanges the provided access code with a token/refreshToken pair, and saves them to local storage.
54 |     const exchangeAccessCode = async (accessCode: string) => {
55 |         var res = await fetch(`${SERVER_URL}/auth/token/`, {
56 |             method: "POST",
57 |             headers: {
58 |                 "Content-Type": "application/json"
59 |             },
60 |             body: JSON.stringify({
61 |                 accessCode: accessCode,
62 |                 appId: SPECKLE_APP_ID,
63 |                 appSecret: SPECKLE_APP_SECRET,
64 |                 challenge: localStorage.getItem(CHALLENGE)
65 |             })
66 |         })
67 |         var data = await res.json()
68 | 
69 |         if (data.token) {
70 |             // If retrieving the token was successful, remove challenge and set the new token and refresh token
71 |             localStorage.removeItem(CHALLENGE)
72 |             localStorage.setItem(TOKEN, data.token)
73 |             localStorage.setItem(REFRESH_TOKEN, data.refreshToken)
74 |             setToken(data.token)
75 |             setRefreshToken(data.refreshToken)
76 | 
77 |         }
78 |     }
79 | 
80 |     return (
81 |         <AuthContext.Provider
82 |             value={{
83 |                 token,
84 |                 refreshToken,
85 |                 login,
86 |                 exchangeAccessCode,
87 |                 logOut
88 |             }}
89 |         >
90 |             {children}
91 |         </AuthContext.Provider>
92 |     )
93 | }
94 | 
95 | 
96 | // Create a hook to use the auth context
97 | export const useAuth = () => React.useContext(AuthContext)


--------------------------------------------------------------------------------
/src/context/graphql.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useMemo } from 'react'
 2 | 
 3 | import { ApolloClient, createHttpLink, InMemoryCache, ApolloProvider } from '@apollo/client';
 4 | import { setContext } from '@apollo/client/link/context';
 5 | 
 6 | import { useAuth } from './auth'
 7 | 
 8 | 
 9 | 
10 | const SPECKLE_SERVER_URL = 'https://speckle.xyz'
11 | 
12 | export const GraphqlProvider = ({ children }: any) => {
13 | 
14 |     const { token } = useAuth()
15 | 
16 |     const speckleServerLink = createHttpLink({
17 |         uri: `${SPECKLE_SERVER_URL}/graphql`,
18 |     })
19 | 
20 |     const authLink = useMemo(() => setContext((_, { headers }) => {
21 |         // get the authentication token from local storage if it exists
22 |         // return the headers to the context so httpLink can read them
23 |         return {
24 |             headers: {
25 |                 ...headers,
26 |                 authorization: token ? `Bearer ${token}` : "",
27 |             }
28 |         }
29 |     }), [token])
30 | 
31 |     const client = useMemo(() => new ApolloClient({
32 |         link: authLink.concat(speckleServerLink),
33 |         cache: new InMemoryCache()
34 |     }), [authLink, speckleServerLink])
35 | 
36 |     return (
37 |         <ApolloProvider client={client}>
38 |             {children}
39 |         </ApolloProvider>
40 |     )
41 | }
42 | 


--------------------------------------------------------------------------------
/src/context/user.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useMemo } from 'react'
 2 | import { useQuery, gql } from '@apollo/client';
 3 | 
 4 | 
 5 | type User = {
 6 |     id: string
 7 |     name: string
 8 |     email: string
 9 |     avatar: string
10 |     bio: string
11 | }
12 | 
13 | 
14 | const GET_USER = gql`
15 | query {
16 |     activeUser{
17 |       id
18 |       email
19 |       name
20 |       bio
21 |       avatar
22 |     }
23 |   }
24 | `;
25 | 
26 | export const UserContext = createContext({
27 |     user: null as User | null,
28 | })
29 | 
30 | export const UserProvider = ({ children }: any) => {
31 | 
32 |     const { loading, error, data } = useQuery(GET_USER);
33 | 
34 |     const user = useMemo(() => {
35 |         if (loading) return null
36 |         if (error) return null
37 |         if (!data || !data.activeUser) return null
38 |         return data.activeUser
39 |     }, [loading, error, data])
40 | 
41 |     return (
42 |         <UserContext.Provider value={{
43 |             user: user,
44 |         }}>
45 |             {children}
46 |         </UserContext.Provider>
47 |     )
48 | }
49 | 
50 | 
51 | export const useUser = () => useContext(UserContext)


--------------------------------------------------------------------------------
/src/hooks/useStreams.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from 'react';
 2 | import { gql, useQuery } from '@apollo/client';
 3 | 
 4 | type Props = {}
 5 | 
 6 | type Stream = {
 7 |   id: string,
 8 |   name: string,
 9 |   branches: {
10 |     totalCount: number
11 |   },
12 | }
13 | 
14 | const GET_STREAMS = gql`
15 | query GetStreams {
16 |   streams{
17 |     items {
18 |       id
19 |       name
20 |       branches {
21 |         totalCount
22 |       }
23 |     }
24 |   }
25 | }
26 | `;
27 | 
28 | 
29 | export const useStreams = ({ }: Props) => {
30 |   const { loading, error, data } = useQuery(GET_STREAMS);
31 | 
32 |   const streams = useMemo(() => {
33 |     if (data) {
34 |       console.log(data)
35 |       return data.streams.items as Stream[]
36 |     }
37 |     return []
38 |   }, [data])
39 | 
40 |   return {
41 |     streams,
42 |     loading,
43 |     error
44 |   }
45 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(
 8 |   document.getElementById('root') as HTMLElement
 9 | );
10 | root.render(
11 |   <React.StrictMode>
12 |     <App />
13 |   </React.StrictMode>
14 | );
15 | 
16 | // If you want to start measuring performance in your app, pass a function
17 | // to log results (for example: reportWebVitals(console.log))
18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19 | reportWebVitals();
20 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "baseUrl": "src",
 5 |     "lib": [
 6 |       "dom",
 7 |       "dom.iterable",
 8 |       "esnext"
 9 |     ],
10 |     "allowJs": true,
11 |     "skipLibCheck": true,
12 |     "esModuleInterop": true,
13 |     "allowSyntheticDefaultImports": true,
14 |     "strict": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "noFallthroughCasesInSwitch": true,
17 |     "module": "esnext",
18 |     "moduleResolution": "node",
19 |     "resolveJsonModule": true,
20 |     "isolatedModules": true,
21 |     "noEmit": true,
22 |     "jsx": "react-jsx"
23 |   },
24 |   "include": [
25 |     "src"
26 |   ],
27 | }


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