Merge pull request #14 from Anatole-Godard/dev

release: 1.0

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "no-undef": "off",
+    "no-unused-vars": "warn",
+    "no-console": "warn",
+    "no-empty-function": "warn",
+    "@typescript-eslint/no-empty-function": "warn"
+  }
+}

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: Lint
+
+on:
+  - push
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linters
+        uses: wearerequired/lint-action@v2
+        with:
+          eslint: true
+          eslint_auto_fix: true

.github/workflows/test.yml

@@ -0,0 +1,18 @@
+name: "Test"
+on:
+  - push
+  - pull_request
+
+jobs:
+  unit-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Launch unit tests
+        run: yarn test

App.tsx

@@ -1,3 +1,5 @@
+import "react-native-gesture-handler";
+import "core/ignoreWarnings";
 import React, { useState } from "react";
 
 /// Navigation
@@ -13,7 +15,6 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { useColorScheme } from "react-native";
 import { AuthProvider } from "hooks/useAuth";
 import { useFonts } from "expo-font";
-import AppLoading from "expo-app-loading";
 import { PreferencesProvider } from "hooks/usePreferences";
 import { theme } from "core/theme";
 import { ToastProvider } from "react-native-paper-toast";
@@ -31,15 +32,15 @@ export default function App() {
     _colorScheme || "light"
   );
 
-  let [fontsLoaded] = useFonts({
+  const [fontsLoaded] = useFonts({
     Marianne: require("./assets/fonts/Marianne-Regular.ttf"),
     "Marianne-Bold": require("./assets/fonts/Marianne-Bold.ttf"),
     "Marianne-ExtraBold": require("./assets/fonts/Marianne-ExtraBold.ttf"),
     Spectral: require("./assets/fonts/Spectral-Regular.ttf"),
   });
 
   if (!fontsLoaded) {
-    return <AppLoading />;
+    return null;
   }
 
   return (

babel.config.js

@@ -3,6 +3,7 @@ module.exports = function (api) {
   return {
     presets: ["babel-preset-expo"],
     plugins: [
+      "react-native-reanimated/plugin",
       [
         "module-resolver",
         {

components/Carousel/Carousel.tsx

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Dimensions, Image, StyleSheet, View } from "react-native";
+import { Media } from "../../types/Resource/Media";
+import { DocumentIcon, VideoCameraIcon, VolumeUpIcon } from "react-native-heroicons/outline";
+import { HOST_URL } from "../../constants/env";
+import { TouchableRipple } from "react-native-paper";
+
+const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef<() => void | null>();
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      if (typeof savedCallback?.current !== "undefined") {
+        savedCallback?.current();
+      }
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};
+type Props = {
+  images: Media[];
+};
+
+const MAX_WIDTH = Dimensions.get("screen").width;
+
+
+const Carousel: React.FC<Props> = ({ images }) => {
+  const animation = useRef(new Animated.Value(0));
+  const [currentImage, setCurrentImage] = useState(0);
+  useInterval(() => handleAnimation(), 500000);
+
+  const handleAnimation = (index: number | null = null) => {
+    let newCurrentImage = index ? index : currentImage + 1;
+
+    if (newCurrentImage >= images.length) {
+      newCurrentImage = 0;
+    }
+
+    Animated.spring(animation.current, {
+      toValue: -(MAX_WIDTH * newCurrentImage),
+      useNativeDriver: true
+    }).start();
+
+    setCurrentImage(newCurrentImage);
+  };
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Animated.View
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            transform: [{ translateX: animation.current }]
+          }}>
+          {images.map((image) => (
+            <View
+            >
+              {image.type.includes("image") && (
+                <>
+                  <Image
+                    source={{ uri: HOST_URL + image.url }}
+                    style={styles.image}
+                    alt={image.name} />
+                </>
+              )}
+              {image.type.includes("audio") && (
+                <>
+                  <Image
+                    source={{ uri: "https://source.unsplash.com/random/?audio" }}
+                    style={styles.image}
+                    alt='meeting'
+                  />
+
+                  <View style={styles.overlayIconContainer}>
+                    <VolumeUpIcon style={styles.overlayIcon} size={50} />
+                  </View>
+                </>
+              )}
+              {image.type.includes("video") && (
+                <>
+                  <Image
+                    source={{ uri: "https://source.unsplash.com/random/?video" }}
+                    style={styles.image}
+                    alt='meeting'
+                  />
+                  <View style={styles.overlayIconContainer}>
+                    <VideoCameraIcon style={styles.overlayIcon} size={50} />
+                  </View>
+                </>
+              )}
+              {image.type.includes("application/pdf") && (
+                <>
+                  <Image
+                    source={{ uri: "https://source.unsplash.com/random/?document" }}
+                    style={styles.image}
+                    alt='meeting'
+                  />
+
+                  <View style={styles.overlayIconContainer}>
+                    <DocumentIcon style={styles.overlayIcon} size={50} />
+                  </View>
+                </>
+              )}
+            </View>
+          ))}
+        </Animated.View>
+        <View style={styles.indicatorContainer}>
+          {images.map((image, index) => (
+            <TouchableRipple onPress={() => {
+              handleAnimation(index);
+            }}>
+              <View
+                key={`${image}_${index}`}
+                style={[
+                  styles.indicator,
+                  index === currentImage ? styles.activeIndicator : undefined
+                ]}
+              />
+            </TouchableRipple>
+          ))}
+        </View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    resizeMode: "cover",
+    height: 200,
+    width: MAX_WIDTH,
+    borderRadius: 10,
+    zIndex: 10
+  },
+  container: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "row",
+    height: 200,
+    overflow: "hidden",
+    backgroundColor: "#b3b3b3",
+    borderRadius: 10
+  },
+  indicatorContainer: {
+    position: "absolute",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    bottom: 10,
+    zIndex: 2
+  },
+  indicator: {
+    width: 15,
+    height: 15,
+    borderRadius: 7.5,
+    borderColor: "white",
+    borderWidth: 1,
+    marginHorizontal: 10,
+    marginBottom: 10
+  },
+  activeIndicator: {
+    backgroundColor: "white"
+  },
+  overlayIconContainer: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0,0,0, 0.60)",
+    zIndex: 10,
+    left: 0
+  },
+  overlayIcon: {
+    position: "absolute",
+    top: "35%",
+    left: "39%",
+    opacity: 1,
+    color: "white"
+  }
+});
+
+export default Carousel;

components/Channel/ChannelHomeHeader.tsx

@@ -6,7 +6,6 @@ import React, { useEffect, useState } from "react";
 import {
   FlatList,
   Image,
-  RefreshControl,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -34,14 +33,11 @@ export const ChannelHomeHeader = (props: Props) => {
   const { colorScheme } = usePreferences();
   const { user } = useAuth();
   const [channels, setChannels] = useState<Channel[]>([]);
-  const [loading, setLoading] = useState(true);
 
   const fetchData = async () => {
-    setLoading(true);
     const res = await fetchRSR(API_URL + "/channel", user?.session);
     const body = await res.json();
     setChannels(body.data.attributes);
-    setLoading(false);
   };
 
   useEffect(() => {
@@ -90,7 +86,9 @@ const ChannelHome = (props: ChannelHomeProps) => {
         <TouchableOpacity
           onPress={props.onPress}
           onLongPress={() => {
-            let current = refRBSheet?.current || { open: () => {} };
+            const current = refRBSheet?.current || { open: () => {
+              // eslint-disable-next-line @typescript-eslint/no-empty-function
+            } };
             current.open();
           }}
           style={{
@@ -181,7 +179,9 @@ const ChannelHome = (props: ChannelHomeProps) => {
           <View style={styles.topRow}>
             <TouchableOpacity
               onPress={() => {
-                let current = refRBSheet?.current || { close: () => {} };
+                const current = refRBSheet?.current || { close: () => {
+                  // eslint-disable-next-line @typescript-eslint/no-empty-function
+                } };
                 current.close();
                 props.onPress();
               }}

components/Channel/ChannelItem.tsx

@@ -13,7 +13,6 @@ import fr from "date-fns/locale/fr";
 import {
   TrashIcon,
   UserGroupIcon,
-  UsersIcon,
 } from "react-native-heroicons/outline";
 
 export interface ChannelItemProps extends Channel {
@@ -32,6 +31,7 @@ const RightAction = ({ slug }: { slug: string }) => {
       }}
     >
       <TouchableOpacity
+        // eslint-disable-next-line no-console
         onPress={() => console.log("quit" + slug)}
         style={{
           justifyContent: "center",

components/Channel/DetailledChannel.tsx

@@ -10,7 +10,7 @@ import { HOST_URL } from "constants/env";
 import { UserMinimum } from "types/User";
 import { useAuth } from "hooks/useAuth";
 
-interface Props extends Channel {}
+type Props = Channel
 
 export const DetailledChannel = (props: Props) => {
   const { user } = useAuth();