React client with context for state management

client/src/App.tsx

@@ -0,0 +1,16 @@
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { Navbar } from './components/Navigation/Navbar';
+import { Home, Snippet, Snippets } from './containers';
+
+export const App = () => {
+  return (
+    <BrowserRouter>
+      <Navbar />
+      <Switch>
+        <Route exact path='/' component={Home} />
+        <Route path='/snippets' component={Snippets} />
+        <Route path='/snippet/:id' component={Snippet} />
+      </Switch>
+    </BrowserRouter>
+  );
+};

client/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

client/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './bootstrap.min.css';
+import { App } from './App';
+import { SnippetsContextProvider } from './store';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <SnippetsContextProvider>
+      <App />
+    </SnippetsContextProvider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);

client/src/store/SnippetsContext.tsx

@@ -0,0 +1,51 @@
+import { useState, createContext } from 'react';
+import axios from 'axios';
+import {
+  Context,
+  Snippet,
+  Response,
+  LanguageCount
+} from '../typescript/interfaces';
+
+export const SnippetsContext = createContext<Context>({
+  snippets: [],
+  languageCount: [],
+  getSnippets: () => {},
+  countSnippets: () => {}
+});
+
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const SnippetsContextProvider = (props: Props): JSX.Element => {
+  const [snippets, setSnippets] = useState<Snippet[]>([]);
+  const [languageCount, setLanguageCount] = useState<LanguageCount[]>([]);
+
+  const getSnippets = (): void => {
+    axios
+      .get<Response<Snippet[]>>('/api/snippets')
+      .then(res => setSnippets(res.data.data))
+      .catch(err => console.log(err));
+  };
+
+  const countSnippets = (): void => {
+    axios
+      .get<Response<LanguageCount[]>>('/api/snippets/statistics/count')
+      .then(res => setLanguageCount(res.data.data))
+      .catch(err => console.log(err));
+  };
+
+  const context = {
+    snippets,
+    languageCount,
+    getSnippets,
+    countSnippets
+  };
+
+  return (
+    <SnippetsContext.Provider value={context}>
+      {props.children}
+    </SnippetsContext.Provider>
+  );
+};

client/src/store/index.ts

@@ -0,0 +1 @@
+export * from './SnippetsContext';

client/src/typescript/interfaces/Context.ts

@@ -0,0 +1,8 @@
+import { LanguageCount, Snippet } from '.';
+
+export interface Context {
+  snippets: Snippet[];
+  languageCount: LanguageCount[];
+  getSnippets: () => void;
+  countSnippets: () => void;
+}

client/src/typescript/interfaces/Model.ts

@@ -0,0 +1,5 @@
+export interface Model {
+  id: number;
+  createdAt: Date;
+  updatedAt: Date;
+}

client/src/typescript/interfaces/Response.ts

@@ -0,0 +1,3 @@
+export interface Response<T> {
+  data: T;
+}

client/src/typescript/interfaces/Route.ts

@@ -0,0 +1,4 @@
+export interface Route {
+  name: string;
+  dest: string;
+}

client/src/typescript/interfaces/Snippet.ts

@@ -0,0 +1,11 @@
+import { Model } from '.';
+
+export interface NewSnippet {
+  title: string;
+  description?: string;
+  language: string;
+  code: string;
+  docs?: string;
+}
+
+export interface Snippet extends Model, NewSnippet {}

client/src/typescript/interfaces/Statistics.ts

@@ -0,0 +1,4 @@
+export interface LanguageCount {
+  count: number;
+  language: string;
+}

client/src/typescript/interfaces/index.ts

@@ -0,0 +1,6 @@
+export * from './Model';
+export * from './Snippet';
+export * from './Route';
+export * from './Response';
+export * from './Context';
+export * from './Statistics';

client/src/utils/dateParser.ts

@@ -0,0 +1,17 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+interface Return {
+  formatted: string;
+  relative: string;
+}
+
+export const dateParser = (date: Date): Return => {
+  dayjs.extend(relativeTime);
+
+  const parsedDate = dayjs(date);
+  const formatted = parsedDate.format('YYYY-MM-DD HH:mm');
+  const relative = parsedDate.fromNow();
+
+  return { formatted, relative };
+};

client/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './dateParser';