Merge pull request #18 from ably-labs/add-formatting

Add formatting
ably-labs · May 29, 2024 · 2c64a2e · 2c64a2e
2 parents 1385560 + 2dbc7af
commit 2c64a2e
Show file tree

Hide file tree

Showing 18 changed files with 2,472 additions and 1,038 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# http://EditorConfig.org
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.{js,ts,.ts.d}]
+indent_style = space
+indent_size = 2
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,6 +1,5 @@
 version: 2
 updates:
-
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

diff --git a/.github/workflows/format-check.yml b/.github/workflows/format-check.yml
@@ -0,0 +1,20 @@
+name: Format Check
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 20.x
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run format:check
diff --git a/.github/workflows/linkchecker.yml b/.github/workflows/linkchecker.yml
@@ -8,21 +8,21 @@ on:
   workflow_dispatch:
 
 permissions:
-    contents: read
-    pull-requests: write
+  contents: read
+  pull-requests: write
 
 jobs:
-    link-checker:
-        runs-on: ubuntu-latest
-        steps:
-            - name: 'Checkout source code'
-              uses: actions/checkout@v3
-        
-            - name: Link Checker
-              id: lychee
-              uses: lycheeverse/[email protected]
-              with:
-                fail: true
-                args: --verbose --no-progress --exclude-mail --exclude-loopback **/*.md
-              env:
-                GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+  link-checker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout source code"
+        uses: actions/checkout@v3
+
+      - name: Link Checker
+        id: lychee
+        uses: lycheeverse/[email protected]
+        with:
+          fail: true
+          args: --verbose --no-progress --exclude-mail --exclude-loopback **/*.md
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}
diff --git a/components/ArticlePreview.js b/components/ArticlePreview.js
@@ -1,6 +1,6 @@
-import React from "react";
-import styles from "../styles/Home.module.css";
-import Image from "next/image";
+import React from 'react';
+import styles from '../styles/Home.module.css';
+import Image from 'next/image';
 
 export default function ArticlePreview({ index, headline }) {
   return (
@@ -22,8 +22,7 @@ export default function ArticlePreview({ index, headline }) {
           </a>
         </h1>
         <div className={styles.details}>
-          {headline.data.site} - shared {headline.data.timestamp} by{" "}
-          {headline.data.author}
+          {headline.data.site} - shared {headline.data.timestamp} by {headline.data.author}
         </div>
         <p>{headline.data.desc}</p>
       </div>

diff --git a/components/Articles.js b/components/Articles.js
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { useChannel } from "@ably-labs/react-hooks";
-import ArticlePreview from "./ArticlePreview";
-import styles from "../styles/Home.module.css";
+import React, { useState } from 'react';
+import { useChannel } from '@ably-labs/react-hooks';
+import ArticlePreview from './ArticlePreview';
+import styles from '../styles/Home.module.css';
 
 /* 
 clearHistoryState:
@@ -14,9 +14,9 @@ let clearHistoryState = true;
 export default function Articles(props) {
   let inputBox = null;
 
-  const [headlineText, setHeadlineText] = useState("");
+  const [headlineText, setHeadlineText] = useState('');
   const [headlines, updateHeadlines] = useState(props.history);
-  const [_, ably] = useChannel("[?rewind=5]headlines", (headline) => {
+  const [_, ably] = useChannel('[?rewind=5]headlines', (headline) => {
     if (clearHistoryState) {
       resetHeadlines();
       clearHistoryState = false;
@@ -30,12 +30,8 @@ export default function Articles(props) {
   };
   const headlineTextIsEmpty = headlineText.trim().length === 0;
 
-  const processedHeadlines = headlines.map((headline) =>
-    processMessage(headline, ably.auth.clientId)
-  );
-  const articles = processedHeadlines.map((headline, index) => (
-    <ArticlePreview key={index} headline={headline} />
-  ));
+  const processedHeadlines = headlines.map((headline) => processMessage(headline, ably.auth.clientId));
+  const articles = processedHeadlines.map((headline, index) => <ArticlePreview key={index} headline={headline} />);
 
   const handleFormSubmission = async (event) => {
     const nonEnterKeyPress = event.charCode && event.charCode !== 13;
@@ -45,13 +41,13 @@ export default function Articles(props) {
 
     event.preventDefault();
 
-    await fetch("/api/publish", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
+    await fetch('/api/publish', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ text: headlineText, author: ably.auth.clientId }),
     });
 
-    setHeadlineText("");
+    setHeadlineText('');
     inputBox?.focus();
   };
 
@@ -69,11 +65,7 @@ export default function Articles(props) {
           onKeyPress={handleFormSubmission}
           className={styles.input}
         />
-        <button
-          type="submit"
-          className={styles.submit}
-          disabled={headlineTextIsEmpty}
-        >
+        <button type="submit" className={styles.submit} disabled={headlineTextIsEmpty}>
           Submit
         </button>
       </form>
@@ -85,11 +77,9 @@ export default function Articles(props) {
 function processMessage(headline, currentClientId) {
   /*headline.data.author =
     headline.data.author === currentClientId ? "me" : headline.data.author;*/
-  headline.data.timestamp =
-    "timestamp" in headline ? formatDate(headline.timestamp) : "earlier";
-  headline.data.url = headline?.data?.url || "http://example.com";
-  headline.data.image =
-    headline?.data?.image || "http://placekitten.com/g/200/300";
+  headline.data.timestamp = 'timestamp' in headline ? formatDate(headline.timestamp) : 'earlier';
+  headline.data.url = headline?.data?.url || 'http://example.com';
+  headline.data.image = headline?.data?.image || 'http://placekitten.com/g/200/300';
   return headline;
 }
 

diff --git a/components/Participants.js b/components/Participants.js
@@ -1,13 +1,13 @@
-import React from "react";
-import { usePresence, assertConfiguration } from "@ably-labs/react-hooks";
-import styles from "../styles/Home.module.css";
+import React from 'react';
+import { usePresence, assertConfiguration } from '@ably-labs/react-hooks';
+import styles from '../styles/Home.module.css';
 
 export default function Participants(props) {
   const ably = assertConfiguration();
-  const [presenceData] = usePresence("headlines");
+  const [presenceData] = usePresence('headlines');
 
   const presenceList = presenceData.map((member, index) => {
-    const isItMe = member.clientId === ably.auth.clientId ? "(me)" : "";
+    const isItMe = member.clientId === ably.auth.clientId ? '(me)' : '';
 
     return (
       <li key={index} className={styles.participant}>

diff --git a/lib/history.js b/lib/history.js
@@ -1,10 +1,10 @@
-import Ably from "ably";
+import Ably from 'ably';
 
 const rest = new Ably.Rest.Promise({
   key: process.env.ABLY_SERVER_API_KEY,
 });
 
-const channel = rest.channels.get("headlines");
+const channel = rest.channels.get('headlines');
 
 export async function getHistoricalMessages() {
   const resultPage = await channel.history({ limit: 5 });

diff --git a/next.config.js b/next.config.js
@@ -3,24 +3,24 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["static.ably.dev", "res.cloudinary.com"],
+    domains: ['static.ably.dev', 'res.cloudinary.com'],
   },
   async headers() {
     return [
       {
         // match all API routes
-        source: "/api/:path*",
+        source: '/api/:path*',
         headers: [
-          { key: "Access-Control-Allow-Credentials", value: "true" },
-          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: 'Access-Control-Allow-Credentials', value: 'true' },
+          { key: 'Access-Control-Allow-Origin', value: '*' },
           {
-            key: "Access-Control-Allow-Methods",
-            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT',
           },
           {
-            key: "Access-Control-Allow-Headers",
+            key: 'Access-Control-Allow-Headers',
             value:
-              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
           },
         ],
       },