From 511b4579f8dfc241fd0359718fd0f84954a6ed50 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Sat, 9 May 2020 12:54:53 +0200
Subject: [PATCH] feat: Add codemod to use the breakpoints hook

---
 .../use-breakpoints-hook/example-after.js     | 16 ++++++
 .../use-breakpoints-hook/example-before.js    | 19 +++++++
 codemods/use-breakpoints-hook/index.js        | 49 +++++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 codemods/use-breakpoints-hook/example-after.js
 create mode 100644 codemods/use-breakpoints-hook/example-before.js
 create mode 100644 codemods/use-breakpoints-hook/index.js

diff --git a/codemods/use-breakpoints-hook/example-after.js b/codemods/use-breakpoints-hook/example-after.js
new file mode 100644
index 0000000000..b0c3d768f7
--- /dev/null
+++ b/codemods/use-breakpoints-hook/example-after.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useBreakpoints } from 'cozy-ui/transpiled/react'
+
+const MobileComponent = () => <>Mobile</>
+const DesktopComponent = () => <>Desktop</>
+
+const Component = () => {
+  const { isMobile, isDesktop } = useBreakpoints()
+  return isMobile ? (
+    <MobileComponent />
+  ) : isDesktop ? (
+    <DesktopComponent />
+  ) : null
+}
+
+export default otherHoc(Component)
diff --git a/codemods/use-breakpoints-hook/example-before.js b/codemods/use-breakpoints-hook/example-before.js
new file mode 100644
index 0000000000..cbee4cb143
--- /dev/null
+++ b/codemods/use-breakpoints-hook/example-before.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import compose from 'lodash/flowRight'
+import { withBreakpoints } from 'cozy-ui/transpiled/react'
+
+const MobileComponent = () => <>Mobile</>
+const DesktopComponent = () => <>Desktop</>
+
+const Component = ({ breakpoints: { isMobile, isDesktop } }) => {
+  return isMobile ? (
+    <MobileComponent />
+  ) : isDesktop ? (
+    <DesktopComponent />
+  ) : null
+}
+
+export default compose(
+  withBreakpoints(),
+  otherHoc
+)(Component)
diff --git a/codemods/use-breakpoints-hook/index.js b/codemods/use-breakpoints-hook/index.js
new file mode 100644
index 0000000000..30c399e525
--- /dev/null
+++ b/codemods/use-breakpoints-hook/index.js
@@ -0,0 +1,49 @@
+import { hocReplacer } from '@cozy/codemods'
+
+const isBreakpointProp = prop => {
+  return prop.key && prop.key.name === 'breakpoints'
+}
+
+const findBreakpointsProp = objPattern => {
+  if (!objPattern) {
+    return
+  }
+  if (objPattern.type !== 'ObjectPattern') {
+    return
+  }
+
+  return objPattern.properties
+    ? objPattern.properties.filter(isBreakpointProp).map(prop => prop)
+    : []
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const replaceBreakpointsHOC = hocReplacer({
+    propsFilter: isBreakpointProp,
+    propsFinder: findBreakpointsProp,
+    hookUsage: foundProps => {
+      return `const ${foundProps
+        .map(p => j(p.value).toSource())
+        .join(', ')} = useBreakpoints()`
+    },
+    hocName: 'withBreakpoints',
+    j,
+    importOptions: {
+      filter: x => {
+        return (
+          x.source.value == 'cozy-ui/transpiled/react' ||
+          x.source.value == 'cozy-ui/react'
+        )
+      },
+      specifiers: {
+        useBreakpoints: true
+      },
+      package: 'cozy-ui/transpiled/react'
+    }
+  })
+
+  return replaceBreakpointsHOC(root)
+}